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、列表标签
-
列表标签:可以将数据按照列表的方式显示。
-
有序列表
- 内容
- 内容
- 内容
-
无序列表
- 内容
- 内容
- 内容
-
在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
转义字符 -
如果想要在网页上显示特殊的字符,那么可以使用转义字符。
转义字符(了解)
>:>
<: <
&:&
空格: