1.HTML5头部结构
【DOCTYPE html】
声明文档类型为HTML5文件。
文档声明在HTML5文档必不可少,且必须放在文档的第一行。
【meta标签】
1-charset属性:单独使用,设置文档字符及编码格式。
写法:<meta charset="UTF-8">
常见的中文编码格式:
B-2312:国标码,简体中文
GBK:扩展的国标编码,简体中文
UTF-8:万国码 Unicode码,基本兼容各国语言
2-http-equiv属性:需配合content属性使用。主要声明浏览器如何解释编译文件。
写法:<meta http-equiv="属性值" content="属性值详细内容"
常用属性值:Content-Type HTML4.01之前的文档内容编码声明。
refresh 网页刷新
set-Cookie 设置浏览器cookie缓存
<!--charset属性-->
<meta charset="UTF-8">
<!--网页关键字-->
<meta name="keywords" content="HTML5,网页,第一个"
<!--网页描述-->
<meta name="description" content=我的第一个网页 />
<!--声明文档的编码格式-->
<meta charset="UTF-8" />
【link标签】
1-作用:用于为网页链接各种文件。
2-常用属性:
rel:用于表明被链接文件与当前文件关系。icon表明被链接图片是当前网页的icon图标。
type:表明被链接文件是什么类型,可省略。
href:表明链接文件的地址。
<link rel="icon" href="img/icon.png" />
【title标签】
网页的标题,即网页选项卡上的文字。
<title>第一个页面</title>
2.常见的块级标签
【常见的块级标签】
标题标签<h1></h1>...<h6></h6>
水平线<hr/>
段落<p></p>
换行<br/>
引用<blockquote</blockquote>
预格式<pre></pre>
引用标签<blockquote></blockquote>
表明标签中的文字,为引用的内容,浏览器显示为等宽字体,并缩进。
cite属性,表明引用的来源,一般为引用的网址URL
<blockquote cite="http://www.yt4561761.com">
hahahahahahah
</blockquote>
【有序列表ol order list】
<ol>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
</ol>
【无序列表ul unorder list】
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
【定义描述列表】
<dl>
<dt>标题</dt>
<dd>描述项</dd>
</dl>
一般情况下,标题dt只有一项。描述项dd可以有多项。
浏览器显示时,标题顶格显示,dd缩进显示。
<dl>
<dt>这是dl列表的标题</dt>
<dd>描述项1</dd>
<dd>描述项2</dd>
<dd>描述项3</dd>
</dl>
【图片组合标签figure】
1-<figure></figure>标签有两个子标签:
<img src="">:一幅图片,src表示图片的路径。
<figcaption></figcaption>:图片的标题
2-浏览器显示为:图片与标题上下排列,且整体向后缩进一个单位。
<figure>
<img src="img/icon.png" />
<figcaption>洪浩光伏
</figcaption>
</figure>
【分区标签div】
常配合CSS使用,为网页中最常用的分区标签,常用于网页布局使用
<div style="width:100%; height:100px; ">
这是div里面的文字
<h1>div里面的标题</h1>
</div>
3.表格标签
【table】
<table></table>表格框
<tr></tr>表格行
<td></td>表格列
<th></th> 表格标题列(将tr中的td替换为th),th默认加粗且在单元格居中显示。
【table的常用属性】
1-border:表格边框属性;当使用border="1"设置边框时,会在所有td以及table上嵌套边框,当border加大时,只有table框会加粗。
2-cellspacing:单元格与单元格之间的间隙。当cellspacing="0"时,单元格之间的间隙为0,但边框线并不会合并。
☆☆合并边框的写法style="border-collapse:collapse;" 使用边框合并时,无需设置cellspacing。
3-cellpadding:单元格内边距,单元格中文字与单元格边框之间的距离。
4-width/height:表格的宽高
5-align:设置表格在父容器中的对齐方式 ,left/居左 center/居中 right/居右
☆☆当表格使用align属性时,相当于使表格浮动,可能会导致表格后面的元素受表格浮动影响,导致布局错乱。
6-bgcolor:背景色
7-background:背景图,后接相对路径。背景图和背景色同时生效时,图会覆盖背景色
8-bordercolor:设置边框颜色
【<tr><td>标签的属性】
当表格属性与行列属性冲突时,以行列属性为优先,属性设置优先级td>tr>table。
1-width,height:给单个的行列设置宽高
2-bgcolor:背景色
3-align:设置单元格中的文字,在单元格中的水平对齐方式 left/center/right
4-valign:设置单元格中文字在格中的垂直对齐方式 top/center/bottom
5-nowrap:nowrap="nowrap"设置单元格文字行末不断行
【表格的跨行与跨列】
1-跨列:colspan,某单元格跨N列,则该单元格右边的N-1个td就不需要了。
2-跨行:rowspan,某单元格跨N行,则该单元格下边的N-1个td就不需要了。