第一章 网页设计基础知识
HTML语言:超文本标记语言
<html></html> html标签/根标签
<head></head> 头部标签(样式设计)
<body></body> 内容标签(填充内容)
<!-- 内容 --> 为html中的注释,注释中的内容不会出现在页面中
HTML的基本结构
<html>
<head></head>
<body>内容</body>
</html>
第二章 基本标签介绍
段落标签:<p></p>
居中标签:<center></center>
换行标签:</br>
分割线标签:<hr>
标题标签:<hn></hn>
(n的取值范围是1-6,h1最大,h6最小)(该标签有换行效果,为块状元素)
<h1>我是h1</h1>
<h2>我是h2</h2>
第三章 HTML中的文字标签
文本加粗标签:<b></b>
文本倾斜标签:<i></i>
文本下划线标签:<u></u>
文字标签:<font></font>
color属性:更换文本颜色
颜色表示法:
1)英文单词表示法:yellow、red、green
2)十六进制表示法:#000(黑),#fff(白)
3)rgb表示法:rgb(?,?,?) (问号的取值范围为0-255)
<font color="red"></font>
<font color="#000"></font>
<font color="rgb(0,0,0)"></font>
size属性:更改文本大小
<font size="12"></font>
第四章 HTML中的超链接标签
超链接标签:<a></a>
name属性:给定标签名字
id属性:给标签唯一的标识
href属性:负责指定新页面的地址
后接目标网页的地址或路径,可以是本地也可以是网络地址,为#或/则为本页跳转
<a href="new.html">页面跳转</a>
target属性:显示链接的窗口或框架
1)_blank:在新窗口打开链接
2)_self:在当前窗口打开链接
<!--以开启新窗口的形式跳转一个新的页面-->
<a href="new.html" target="_blank">页面跳转</a>
<!--在原窗口完成跳转一个新的页面-->
<a href="new.html" target="_self">页面跳转</a>
第五章 HTML中的图片标签
图片标签:<img />
src属性:负责链接图片地址
width属性:宽度 (单位:像素px)
height属性:高度 (单位:像素px)
<img src="logo.jpg" width="100" height="100" / >
第六章 HTML中的表格标签
表格标签:<table></table>
border属性:边框属性,为任意正整数,数越大越粗
width属性:宽度 (单位:像素px)
height属性:高度 (单位:像素px)
行标签:<tr></tr>
align属性:设置文本对其方向
1)center:居中
2)left:左侧对齐
3)right:右侧对齐
单元格标签:<td></td>
以上三个标签的嵌套顺序为<table><tr><td></td></tr></table>
<table border="1"> <!--两行两列的表格,有边框-->
<tr>
<td>111</td>
<td>222</td>
</tr>
<tr>
<td>333</td>
<td>444</td>
</tr>
</table>
第七章 HTML中的列表
有序列表:<ol></ol>
有顺序的排列列表项
type属性:可以选择前面顺序的类型
1)A:以A、B、C...的顺序排序(大写字母)
2)a:以a。b、c...的顺序排列(小写字母)
3)Ⅰ:以Ⅰ、Ⅱ、Ⅲ...的顺序排序(大罗马数字)
4)i :以i、ii、iii...的顺序排列(小罗马数字)
5)1:以1、2、3...的顺序排序(阿拉伯数字,默认)
start属性:可以决定从多少位开始排序
只可应用于数字,不能应用于字母
无序列表:<ul></ul>
不分顺序的排列列表项
type属性:可以选择前面顺序的类型
1)disc:实心圆
2)circle:空心圆
3)square:实心方块
列表项:<li></li>
以上三个标签的嵌套顺序为<ol><li></li></ol>或<ul><li></li></ul>,无序列表和有序列表之间也可以互相嵌套,例如:<ol><ul><li></li></ul></ol>
<!-- 在有序列表中以数字的顺序排序,开始的数字是第三个 -->
<ol type="1" start="3"> <!-- 输出结果为 -->
<li>第一行</li> <!-- 3、第一行 -->
<li>第二行</li> <!-- 4、第二行 -->
<li>第三行</li> <!-- 5、第三行 -->
</ol>
<!-- 在无序列表中以实心圆的样式排序 -->
<ul type="disc"> <!-- 输出结果为 -->
<li>第一行</li> <!-- ·第一行 -->
<li>第二行</li> <!-- ·第二行 -->
<li>第三行</li> <!-- ·第三行 -->
</ul>
自定义列表:<dl></dl> <dt></dt> <dd></dd>
自定义列表前方没有有序的数字或无序前面的点,嵌套关系为:
<dl>
<dt>第一节
<dd>正文一</dd>
</dt>
</dl>