一、常用标签：
粗体：strong、b
斜体：i、em、cite
上标：sup
下标：sub
中划线：s
下划线：u
大字号：big
小字号：small
块元素：
h1~h6标题元素
p段落元素
div div元素
hr 水平线
ol 有序列表
ul 无序列表
二、列表
列表元素只能是li，不能是其他元素
1、有序列表：
<ol type = "A">
<li>...</li>
...
<li>...</li>
</ol>
/*
1 阿拉伯数字
a 小写英文
A 大写英文
i 小写罗马数字
I 大写罗马数字
*/
2、无序列表
<ul type = "circle">
<li>...</li>
...
<li>...</li>
</ul>
/*
disc 实心圆
circle 空心圆
square 实心正方形
*/
3、自定义列表
/*
在高级结构中用的多
*/
<dl>
<dt>HTML</dl>
<dd>控制网页的结构</dd>
<dd>结构</dd>
<dt>CSS</dt>
<dd>控制网页的样式</dd>
<dd>样式</dd>
</dl>
三、表格
表格标签：table
行：tr
单元格：td
表格语义标签：<thead> <tbody> <tfoot>
标题：<caption> ... </caption>
将行合并：<td rowspan = "数值" >...</td>
将列合并：<td colspan = "数值">... </td>
<!DOCTYPE >
<html>
<head>
<meta charset="utf-8" />
<title>HTML </title>
<style type="text/css">
table,tr,td{border: 0.0625rem solid red;}
/*css样式，别管*/
</style>
</head>
<body>
<table>
<caption><strong>标题</strong></caption>
<tr>
<td colspan="3">三种前端语言</td>
</tr>
<tr>
<td>HTML</td>
<td>CSS</td>
<td>JavaScript</td>
</tr>
</table>
</body>
</html>
/*
语义标签可能会和合并产生冲突。
自己试试就知道了。
*/
四、图片
图片常用三个属性：
src：引用的路径（可以是相对路径，也可以是绝对路径，一般用相对路径）
alt：当图片无法显示时，会显示alt的值
tltle：图片描述，鼠标移动到图片显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
<img src="../img/1.jpg" alt="无法展示图片时显示" title="鼠标移动到图片上时显示" />
</body>
</html>
-----一些图片知识：
1.jpg 可以很好处理大面积色调的图片，适合处理颜色丰富的复杂图片，但是体积较大，且不支持保存透明背景
2.png 无损格式，可以无损压缩图片以保证页面打开速度，且体积较小，支持透明背景，但不适合存储色彩丰富的图片
3.gif 效果最差，但适合做动画。
4.矢量图 优点：无论放多大，都不会失真。 缺点：无法展示色彩丰富的图片 常见格式有：.ai/.cdr/.fh/.swf 一般不会用，除非是一些字体图标
-----位图和向量图的区别
1、位图适合用于色彩丰富的图片，而矢量图不适用。
2、位图的组成单位是像素，而矢量图的组成单位是数学向量。
3、位图受分辨率的影响，图片放大或缩小后会失真，而矢量图不受，不会失真。
4、网页中的图片绝大多数都是位图，而不是矢量图。
五、超链接
标签：a
1.外部链接
每一个网站都由很多个网页组成，而页面之间通常用超链接实现关联。
超链接实现各个独立界面之间的跳转。
语法：
语法：<a href = "address">文本或者图片</a>
/*href表示路径（可相对可绝对）*/
<!DOCTYPE >
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS</title>
</head>
<body>
<a href="https://space.bilibili.com/629842392">我的B站主页</a>
<a href="https://space.bilibili.com/629842392"><img src="../img/1.jpg" alt="超链接的图标"/></a>
</body>
</html>
2.内部链接
<!DOCTYPE >
<html>
<head>
<meta charset="utf-8" />
<title>HTML</title>
</head>
<body>
<a href="test2.html"><h3>跳转到页面二</h3></a>
<a href="test3.html"><h3>跳转到页面三</h3></a>
</body>
</html>
/*
外部，内部，有区别的。
*/
3.锚点链接
锚点链接可以实现在同一个页面中跳转，比如你在看CSDN的博客的时候，有的博客有目录，你一点就跳到对应位置了，就是锚点链接。先用超链接标签设置一个链接，配置一个id，那么点击的时候就会通过这个链接跳到相应id处。
<body>
<div>
<a href="#用HTML实现表格">表格</a> <!--#表示元素id，id在CSS里面用,同一个页面中id不能重复-->
<a href="#用HTML实现序列">序列</a>
<a href="#用HTML实现超链接">超链接</a>
</div>
<div id="用HTML实现表格">
<p><h1>表格</h1></p>
</div>
<div id="用HTML实现序列">
<p> <h1>序列</h1></p>
</div>
<div id="用HTML实现超链接">
<p><h1>超链接</h1></p>
<a href="https://github.com">世界最大同性交友网站</a>
</div>
</body>
/*
实现锚点链接：1.目标元素的id 2.a标签的href属性指向#id
*/
另外，超链接标签还有一个常用属性target
target
_self 在原来的窗口打开（默认）
_blank 在新窗口打开
_parent 在父窗口打开
_top 在顶层窗口打开
/*
看到这里有没有觉得我的格式稀烂
但是按格式来很麻烦，见谅（dog）
*/
六、表单
这个表单和表格是很不一样的东西
常说的表单是指，文本框、按钮、单选框、复选框、下拉列表等的统称。
五种常用标签：form、 input、 textarea、 select、 option。
form表单属性
name 表单名称 <form name="我的表单">
method 提交方式 取值有两个：get、post（post安全性好，一般用post）
action 提交地址 提交到哪个地址去处理
target 打开方式 属性和前面写的一样，意思也一样
enctype 编码方式 指定表单数据的提交的编码方式，一般不需要设置，除非用到了上传文件功能
表单大多数功能都是input来实现
input属性
text 单行文本框
password 密码文本框
radio 单选框
checkbox 多选框
button/submit/reset 按钮
file 选择文件上传
元素属性没有先后之分，都一样
各种属性：
单行文本框属性
value 设置单行文本框的默认显示值
size 设置单行文本框的长度，一般不用HTML设置，而用CSS设置
maxlength 设置单行文本框最多可以输入的字数
密码文本框：
password
和单行文本框一样，只是输入值不可见。
单选文本框
name:表示单选按钮所在的组名，value表示单选按钮的取值（这两个必须要设置）
checked:默认选中
lable：表示相关联，语义更好
（千万别忘了加name）
多选文本框 checkbox
name
value
checked
普通按钮
button <input type = "button" value = "取值" />
普通按钮一般都是配合JS来进行各种操作的
——提交按钮
提交按钮
<!DOCTYPE >
<html>
<head>
<meta charset="utf-8" />
<title>TITLE</title>
</head>
<body>
<form method="post">
<input type="submit" value="提交按钮" />
</form>
</body>
</html>
——重置按钮
重置按钮
<!DOCTYPE >
<html>
<head>
<meta charset="utf-8" />
<title>TITLE</title>
</head>
<body>
<form method="post">
账号：<input type="text" /><br />
密码:<input type="password" />
<input type="reset" value="重置" />
</form>
</body>
</html>
只能清除它所在的form标签内表单中的内容，对于当前所在form标签之外的清除是无效的
总结一下：
普通按钮一般都是配合JS来进行各种操作的
提交按钮一般用来给服务器提交数据
重置按钮一般用来清除用户在表单中输入的内容
——文件上传
文件上传
<!DOCTYPE >
<html>
<head>
<meta charset="utf-8" />
<title>TITLE</title>
</head>
<body>
<form method="post">
<input type="file" />
</form>
</body>
</html>
真正实现上传还需要用到后端技术
——多行文本框
多行文本框
语法 <testarea rows = "行数" cols = "列数" value = "取值" >默认内容</testarea>
<!DOCTYPE >
<html>
<head>
<meta charset="utf-8" />
<title>TITLE</title>
</head>
<body>
<form method="post">
<textarea rows="5" cols="5" value="多行文本框">这是一个5 X 5 的多行文本框</textarea>
</form>
</body>
</html>
关于文本框的总结：
有三种：单行、多行、密码文本框
单行、密码用input，多行用textarea
——下拉列表
select option
<!DOCTYPE >
<html>
<head>
<meta charset="utf-8" />
<title>TITLE</title>
</head>
<body>
<form method="post">
<select>
<option value>HTML</option>
<option value ="CSS">CSS</option>
</select>
</form>
</body>
</html>
select属性：
multiple设置下拉列表可以选择多个项
size设置下拉列表显示几个列表项，取值为整数
option属性
selected是否被默认选中,或者默认选中显示某个选项
value
下面来一个表单的练习题
配套代码，自己写的很简陋，凑合着看看吧。
/*
没有划块，见谅。
*/
<!DOCTYPE >
<html>
<head>
<meta charset="utf-8" />
<title>TITLE</title>
</head>
<form method="post">
昵称:<input type="text" /><br />
密码:<input type="password" /><br />
邮箱:<input type="text" />
<select>
<option>qq.com</option>
<option>xidian.edu.cn</option>
<option>163.com</option>
</select><br />
性别:
<input type="radio" name="sex" value="man"/>男
<input type="radio" name="sex" value="woman"/>女
<br />
爱好:
<input type="checkbox" name="hobby" value="basketball" />篮球
<input type="checkbox" name="hobby" value="ping-pong" />乒乓球
<input type="checkbox" name="hobby" value="swimming" />游泳
<br />
个人简介:<br />
<textarea rows="10" cols="40">请输入个人简介。
</textarea>
<br />
上传个人照片：<br />
<input type="file" />
<hr />
<input type="submit" value = "提交申请"/>
</form>
</html>
532
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
