01 HTML

1、html的语法

标签的分类：

有主体内容的标签。 <标签名称>内容</标签名称>
没有主体内容的标签。<标签名称/>

语法注意：

html是弱类型，语法不严谨
html标签不区分大小写，建议标签都小写
html中的标签可以省略结束标签，如果省略，会自动帮我们补齐结束标签（不建议）
html文本标签
标题标签：数字越小，标题越大
分割线标签：

属性
属性格式：
<开始标签属性名=属性值属性名=属性值>内容</结束标签>
<开始标签属性名=属性值属性名=属性值/>
通用属性：
size：大小。单位是px像素，px也可以省略
color：颜色。取值可以是以下内容。
1. 颜色的英语单词
2. 是红绿蓝三原色组成的颜色
#六个字符表示比如： #00ff00
每一种颜色都是用十六进制表示的，最大是ff，最小是00
#ff0000：红色
#00ff00：绿色
#0000ff：蓝色
如果颜色的两个字符相同，那么可以写一个
#00ff00 -> #0f0
3.rgb值（值1，值2，值3）取值范围0-255（不推荐）
width：宽度，取值可以是以下内容
1. 像素（单位px，px也可以省略）
2. 百分比。
align：排版方式，取值可以是下面几个
left：左对齐
right：右对齐
center：居中
其他文本标签：
文字标签：
属性face：改变字体样式
加粗：
倾斜：
换行：
在html中，无论多少个回车，都会变成一个空格
段落：
有行间距

2、超链接标签

超链接标签可以让文字可以点击，点击后跳转到其他位置。

标签名称：
标签的属性：
href：表示跳转到哪个位置。取值可以是以下内容
1. #。跳转到本页
2. 本地的页面。(重要)
3. 互联网上的页面 (重要)
4. 跳转到邮箱客户端发邮件（了解）
href=“mailto:邮箱地址”
title：鼠标悬停时，显示提示信息
target：打开方式
_self:默认值，在当前窗口中打开页面
_blank:在新的窗口中打开页面

    <a href="#">点点我</a>
    <br/>
    <a href="03.黑马首页案例.html" target="_blank" title="提示：要跳转到本地页面啦">点点我plus</a>
    <br/>
    <a href="http://ntlias3.boxuegu.com/">点点我</a>
    <br/>
    <a href="mailto:[email protected]">点点我</a>

3、列表标签

列表标签：可以将数据按照列表的方式显示。
有序列表
1. 内容
2. 内容
3. 内容
在ol中有一个属性叫做type，可以修改内容前面的序号，取值如下 1：表示以数字显示 a,A：表示以字母显示 i,I：罗马数字显示
无序列表
- 内容
- 内容
- 内容
在ul中也有一个type属性，也可以改变内容前面的标记。
disc ● 默认
circle ○
square ■

4、图片标签

图片标签可以将图片显示在网页中
标签名称：
属性：
src：图片的位置，可以来自本地，也可以来自互联网。
width：图片宽度。单位可以是px像素，也可以是百分比。如果修改了宽度，高度也会自动改变。
height：图片高度
title：鼠标悬停时的提示
alt：图片没有加载出来的提示

    <img src="img/girl.jpg" alt="未加载出来的大美女" width="600" title="这是一个大大的美女"/>
    <!--<img src="img/girl.jpg" width="600" height="200"/>-->
    <!--<img src="http://ntlias3.boxuegu.com/images/login/login-logo.png"/>-->

5、内联标签和块标签

内联标签（行内标签）：标签不会自动换行。
块标签：标签会自动换行。（独占一行）

在html中有两个语义化标签，语义化标签本身没有含义，只是从逻辑上将代码分成不同的部分。
span：内联标签（行内标签）
div：块标签

6、表格标签

表格标签可以将数据以表格的形式展示。
要求：展示一个3行4列的表格。
表格标签：table
属性
border：边框线，单位是px像素
width：宽度
cellspacing：单元格和单元格之间的间距.0表示没有间距
cellpadding：数据和单元格的距离。
子标签：
tr：表示行
td：表示列
注意：table表格标签中要写tr行，tr行标签中要写td列
表格标签可以将数据以表格的形式展示。
要求：展示一个3行4列的表格。
表格标签：table
属性
border：边框线，单位是px像素
width：宽度
cellspacing：单元格和单元格之间的间距.0表示没有间距
cellpadding：数据和单元格的距离。
子标签：
tr：表示行
td：表示列
th：表示表头（列），th中的内容会默认加粗居中。 th标签可以省略
caption：表格的标题
thead：语义化标签，用来对模块进行区分，标签本身没有作用。
tbody：语义化标签，用来对模块进行区分，标签本身没有作用。
tfoot：语义化标签，用来对模块进行区分，标签本身没有作用。
注意：table表格标签中要写tr行，tr行标签中要写td列。
合并单元格操作
如果要合并单元格，可以使用下面的两个属性去实现
rowspan：合并行
colspan：合并列
上面两个属性的值是要合并的单元格的数量，要合并两个单元格，值就是2.
如果想合并单元格，那么就找到要合并的前一个单元格，在该单元格中写上rowspan或colspan
转义字符
如果想要在网页上显示特殊的字符，那么可以使用转义字符。
转义字符（了解）

            >：&gt;
            <: &lt;
            &：&amp;
            空格：&nbsp;

01 HTML基础简讲