最近在学习HTML网页制作，总结一下所学知识，错误的地方还请大神们指教
1、什么是HTML？
HTML全称为：HypeText Marked Language,中文名为超文本标记语言
超文本：超出文本的范畴
标记：即为HTML语言中的标签
2、HTML的语言规范：
（1）HTML语言不区分大小写（但是最好区分）
（2）HTML语言的大部分标签是双标签，即具有开始标签和结束标签
例如：(开始标签)：<html> 对应的结束标签为：</html>
也有一部分是单标签，例如：表示换行的标签<br/>
（3）在HTML代码中包含两个语句块儿：
<head>：设置相关信息
<body>：在网页上显示的内容均写在<body>语句快中
而且二者均为双标签
（4）在书写代码时，应该注意层次清晰，便于查看与检错
3、HTML的操作思想
网页中有很多数据，不同的数据需要不同的显示效果，可以用不同的标签将数据封装起来，通过标签的改变来显示不同的效果。
4、文字标签、水平线标签、注释标签和标题标签
（1）文字标签：<font></font>
在body语句块中通过使用<font></font>标签可以设置文字的大小、颜色、字体等
它具有以下属性：
- size：设置文字大小- color：设置文字的颜色 - face：设置文字的显示字体
代码为：<font size="10" color="blue" face="华文行楷">大家好</font>（2）水平线标签：<hr/>
在body语句块中书写此标签，会在页面中显示一条横线
它具有以下属性：
- size：横线的粗细- color：横线的颜色
代码为：<hr size="5" color="red"/>（3）注释标签：<!-- -->
在上面标签的中间空白处填写注释内容
（4）标题标签：<h1></h1>..............<h6></h6>
标题标签从<h1>到<h6>的大小一次减小
5、特殊字符的引用
（1）< < （2）> > （3）空格
（4）& & （5）双引号" " （6）注册符®®
（7）版权符© ©
6、列表标签
（1）<dl></dl>：表示列表的范围
在dl里面 <dt></dt>：上层内容
在dl里面 <dd></dd>：下层内容
<dl>
<dt>科目</dt>
<dd>语文</dd>
<dd>数学</dd>
<dd>英语</dd>
</dl>（2）有序列表标签：<ol></ol>
在<ol>内部使用的是<li></li>
<ol>
<li>语文</li>
<li>数学</li>
<li>英语</li>
</ol>
2.数学
3.英语
（3）无序列表标签：<ul></ul>
在<ul>内部使用的是<li></li>
<ul>
<li>语文</li>
<li>数学</li>
<li>英语</li>
</ul>此标签具有的属性有：- circle：空心圆- disc：实心圆（默认） - square ：实心方块
7、图像标签：<img src="图片路径"/>
<img src="img/title.png"/>绝对路径：一个文件或图片完全的路径
相对路径：图片相对于此文件所在的路径
8、超链接标签：<a href="url"></a>
url为想要此页面转到的链接
** 它具有一个属性：
- target：用于设定链接文件是从另外一个页面打开还是在当前页面打开（默认在当前页面）
target="_blank"：在另外的页面打开
target="_self"：在当前页面打开
<a href="day1_html实例1.html" target="_blank">链接1</a>
9、表格标签：<table></table>
可以对数据进行格式化，使数据显示更加清晰
<table></table>表示了表格的范围
** 它具有的属性：
- border：表格线的粗细
- bordercolor ：表示表格的高度
- cellspacing：单元格之间的距离
- width: 表格的宽度
- height： 表格的高度
** 在table里面使用<tr></tr>（表示每一行）
- 设置显示方式 align：left center right
** 在tr里面使用<td></td>（表示每一个单元格）
- 设置显示方式 align：left center right
** 操作技巧：首先数有多少行，每一行里面有多少个单元格
** 设置表格标题使用<caption></caption>
*** 以下代码块为完整的代码
<!DOCTYPE HTML>
<html>
<head>
<title>表格的使用</title>
</head>
<body>
<table border="3" cellspacing="0" width="400" height="150">
<caption>人员信息</caption>
<tr align="center">
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>出生地</th>
</tr>
<tr align="center">
<td>东方不败</td>
<td>男</td>
<td>20</td>
<td>中国</td>
</tr>
<tr align="center">
<td>岳不群</td>
<td>女</td>
<td>30</td>
<td>华山</td>
</tr>
<tr align="center">
<td>林平之</td>
<td>男</td>
<td>40</td>
<td>福建</td>
</tr>
</table>
</body>
</html>10、表单标签：<form></form>
<form></form>表示一个表单范围
输入项：
普通输入项：<input type="text"/>
密码输入项：<input type="password"/>
单选输入项：<input type="radio" name="适当内容" value="适当内容"/>
name属性中的内容必须一样，value中必须填上相应内容，否则使用时地址栏不会显示相应内容
多选输入项：<input type="checkbox" name="适当内容" value="适当内容"/>
name属性中的内容必须一样，value中必须填上相应内容，否则使用时地址栏不会显示相应内容
文本输入项：<input type="file"/>
下拉输入项：<select>
<option type="checked" name="适当内容" id="相应内容" value="相应内容">相应内容</option>
<select>
name属性中的内容必须一样，value和id中最好填上相应内容
文本域(cols表示列；rows表示行)：<textarea cols=" " rows=" "></textarea>
提交按钮：<input type="submit" value="相应内容">
使用图片提交：<input type="image" src="图片路径"/>
重置按钮：<input type="reset" value=""/>
普通按钮：<input type="button" value=""/>
** 以下代码为完整的代码
<!DOCTYPE HTML>
<html>
<head>
<title>表单注册实例</title>
</head>
<body>
<form>
手机号码：<input type="text"/><br/><br/>
创建密码：<input type="password"/><br/><br/>
姓名：<input type="text"/><br/><br/>
性别：<input type="radio" name="sex" value="nv"/>女 <input type="radio" name="sex" value="nan"/>男<br/><br/>
生日：<select name="birth">
<option value="0">请选择</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
</select><br/><br/>
我现在: <input type="radio" name="now" value="在工作"/>在工作 <input type="radio" name="now" value="在上学"/>在上学
<input type="radio" name="now" value="其他"/>其他<br/><br/>
居住地：<select name="location">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="天津">天津</option>
</select><br/><br/>
<input type="submit" value="立即注册">
</form>
</body>
</html>11、html中的其他的常用标签的使用
b：加粗s：删除线
u：下划线
i：斜体
pre：原样输出
sub：下标
sup：上标
p：段落标签 比br标签多一行
div：自动换行
span：在一行显示
<body>
aaaaaaa<br/> <!--其中<br/>标签起换行的的作用-->
<b>aaaaaaa</b>
<hr/> <!--其中<hr/>标签起划横线的作用-->
<s>aaaaaaa</s>
<hr/>
<i>aaaaaaa</a>
</body>12、html的头标签的使用
* html由两部分组成 head和body** 在head里面的标签就是头标签
** title标签：表示在标签上显示的内容
** meta标签：可提供页面的有关信息
** base标签：设置超链接的基本设置
- 可以统一设置超链接的打开方式
<base target="_blank">
** link标签：引入外部文件
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
