黑马程序员技术交流社区

标题: [成都校区】html基础理论 [打印本页]

作者: 小西瓜。    时间: 2019-4-11 08:51
标题: [成都校区】html基础理论
Html总结
一:前言以及web标准
web:
        广义:互联网
        狭义:网页
网页:
        1)网页中的内容:文字、图片、视频、音频、链接、flash。
        2)制作网页:
                通过html代码
        3)浏览网页:
                通过浏览器(IE、谷歌、火狐、苹果、欧朋)
                问题?
                        同一个网页,在不同的浏览器中,显示效果可能不一样。
        4)浏览器软件的厂商不同的,使用的技术(内核)是不一样的。
        5)江湖盟主:W3C组织,制定一系列跟网页相关的标准。
        6)web标准:
                网页中有哪些代码组成?
                        1)html代码        (网页排版)        ---网页结构
                        2)css代码        (外观样式)        ---网页表现
                        3)javascript代码        (网页特效)---网页行为
二:认识html
HTML:
        1)超文本标记语言。
        2)语言的规范:
                1》由各种标签组成,例如:图片标签、文字标签、超链接标签等等等等。
                2》标签都使用<>来包裹。<img />
                3》网页文件有固定的骨架代码:
                4》标签的分类(特点):
                        A、双标签,有开始有结束,例如:<head></head>
                        B、单标签,只有1个标签,例如:<br />、<img />
                5》标签和标签之间的关系:
                        A、并列关系(兄弟关系),例如:<head></head>和<body></body>
                        B、嵌套关系(父子关系),例如:<head></head>和<title></title>
三:html常用标签
html中的标签:
        1)标题标签:
                1》<h1></h1>.....<h6></h6>
                2》双标签
                3》特点:
                                1)标签中的文字加粗
                                2)标签在网页中独占一行
        2)段落标签:
                1》<p></p>
                2》双标签
                3》特点:
                                1)独占一行
        3)水平线标签:
                1》<hr />
                2》单标签
        4)换行标签
                1》<br />
                2》单标签
        5)div和span
                1》<div></div>、<span></span>
                2》特点:
                                div独占一行
                                span一行可以放多个
        6)文本格式化标签(对标签中的文字有修饰效果)
                1》加粗效果:<b></b>、<strong></strong>
                2》斜体效果:<i></i>、<em></em>
                3》删除线效果:<s></s>、<del></de>
                4》下划线效果:<u></u>、<ins></ins>
        7)图像标签
                1》<img src="" />
                2》标签属性
                        alt属性:不能显示的图片显示的文字
                        title属性:
                        width属性:宽高不继承。一般表格居中用w600
                        height属性:
        8)链接标签
                1》<a href=""></a>
                2》标签属性:
                        href属性:链接到的网页地址。
                                1)打开一个其他网站的页面(外部链接)
                                       
                                2)打开一个自己网站的页面(内部链接)
                                        href="demo01.html"
                                3)空链接
                                        href="#"
                        target属性:链接页面的打开方式。
                                1)当前窗口打开。【默认】
                                        target="_self"
                                2)在新窗口打开。
                                        target="_blank"
        9)注释标签
                1》提示作用
                2》<!-- 注释文字 -->
                3》快捷键:ctrl + /
扩展标签:
        1)锚点定位
                ① 在当前页面,可以快速定位。
                ② 使用步骤
                        第1步,先找到目标位置,添加个id属性
                        第2步,创建一个超链接,href的值为“#id值”
        2)base标签
                ① 统一设置页面中所有a标签的打开方式
                ② 使用:
                        <base target="_blank" />
                        1)单标签
                        2)必须写在head标签中                       
        3)pre标签
                <pre></pre>
                保留标签中文字的格式。
        4)特殊字符
                html中预留(征用了)一些符号,例如:><。
                如果我们想在页面显示这些符号,就用特殊字符代替。
                空格:&nbsp;
                >   :&gt;
                <   :&lt;
四:路径
路径:
        1)相对路径(相对于自己)
                A、同级路径(跟自己在同一个文件夹) 直接写文件名
                B、下一级路径        /
                C、上一级路径        ../
        2)绝对路径(不变的路径)
                A、绝对的本地地址(本机地址)---基本不用
                        C:\Users\muxiaoshuai\Desktop\html01\images\timg.gif
                B、绝对的网络地址(别人网站上文件的路径)
                        http://www.itheima.com/images/logo.png
五:表格table
表格:
        1)表格相关的标签
                <table></table>
                <tr></tr>
                <td></td>、<th></th>加粗居中
                <caption></caption>写在table内tr前面
        2)表格的属性(加给table标签)
                边框:border
                宽width、高height
                水平方向的位置:align
                单元格外面的距离:cellspacing
                单元格内文字距边框的距离:cellpadding
        3)合并单元格
                1)区分跨行合并还是跨列合并
                2)步骤:
                        1.先确定是跨行rowspan还是跨列colspan
                        2.找到目标单元格(起始单元格),写合并方式和合并数量
                        3.删除多余的单元格
六:列表
列表:
        1)无序列表
                <ul>
                        <li></li>
                </ul>
        2)自定义列表
                <dl>
                        <dt></dt>
                        <dd></dd>
                        <dd></dd>
                </dl>
七:表单
表单要提交必须用<form></form>
表单:
        1)表单域
                <form></form>
        2)输入框
                文本输入框:<input type="text" value="默认内容" />
                密码输入框:<input type="password" />
        3)单选按钮和复选框
                <input type="radio" name="sex" checked="checked" />
                <input type="checkbox" name="hobby" checked="checked" />
        4)各种按钮
                普通按钮:<input type="button" value="按钮" />
                表单提交按钮:<input type="submit" />
                表单重置按钮:<input type="reset" />
                图片提交按钮:<input type="image" src="" />
        5)文件域(文件上传)
                <input type="file" />
        6)下拉列表
                <select>
                        <option></option>
                        <option selected="selected"></option>
                </select>
        7)文本域
                <textarea></textarea>
               
        8)label标签:
                提示文字+input标签
                1)作用:
                        把提示文字和input绑到一起,单击文字跟单击输入框的效果是一样的。
                2)用法:
                        第1种:直接用label把文字和input一起包裹起来。
                                <label>用户名:<input type="text" value="默认值"> </label>
                        第2种,用label只包裹文字,然后通过for和id来绑起来。
                                <label for="yu">用户名:</label><input type="text" value="默认值" id="yu">

                       




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2