一、什么是HTML？
HTML指的是超文本标记语言（HyperText Markup Language）,HTML是用来描述网页的一种语言，HTML不是编程语言，而是一种标记语言，HTML使用标记来描述网页
1.HTML基本结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<!DOCTYPE>声明必须在html文档的第一行，位于<html>标签之前
<html></html>标签限定了文档的开始点和结束点
<head>元素定义文档的头部，它是所有头部元素的容器
<body>body标签元素定义文档的主体，body元素包含文档的所有内容，比如文本、超链接、图像、表格、列表等。
<meta charset="utf-8">utf-8是网页和电子邮件的首选编码，其他常见的编码格式：gbk、gb2312
<title>定义文档的标题
二、常用标签
1.标题标签
<h1>-<h6>标签可定义标题，<h1>定义最大的标题，<h6>定义最小的标题
2.段落标题
<p></p>p元素会自动在其前后创建一些空白。
3.字体标签
<i>、<em>将字体显示为斜体，两者显示效果一样，<em>则把文本定义为强调内容
<strong>、<b>将字体显示为粗体，显示效果一样，<strong>则把文本内容定义为语气更强的内容，用于浏览器搜索的关键字
<u>对文本加上下划线
4.换行标签
<br>强制换行
5.分区/节标签 <div>
<div>可定义文档中的分区和节，把文档分割为独立的、不同的部分。它作为严格的组织工具，没有任何格式与其关联
6.<span>
没有语义，没有固定格式表现，当对它应用样式时，它才会产生视觉上的变化。
7.无序列表标签
<ul>
8.有序列表标签
<ol>
9.列表项目标签
<li>标签用在<ul>和<ol>中
10.自定义列表标签
<dl>
<dt>定义列表项目
<dd>描述列表中的项目
11.转义
<小写 >大写  空格 ©版权符
12.注释
<!---->
三、标签分类
1.块级标签
总是在新行上开始，占据一行，可以设置宽高，常见的块级标签：h1-h6，p，ul，ol，li，dl，hr
2.行内标签
默认从左到右在一行排列，无法设置宽高
常见行内标签：a，span
3.行内块标签
可以设置宽高
常见行内块标签：img，input
四、图片与超链接
1.<img>元素向网页中嵌入一张图片
alt：规定图像的替代文本
src：图片的URL
title：鼠标移入图像时的提示文本
2.超链接
<a>标签定义超链接
href指向链接目标
target:_blank在新窗口打开链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标签</title>
</head>
<body>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<p>
<h3>啦啦啦</h3>
一二三四,<br>
二二三四,<br>
三二三四,<br>
</p>
<hello>
©
空 格
<br>换行
<i>斜体</i>
<em>斜体 浏览器强调</em>
<b>粗体</b>
<strong>粗体 浏览器关键字</strong>
<u>下划线</u>
<hr><!--水平线-->
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4006502875,985602266&fm=26&gp=0.jpg" alt="图片路径错误时显示alt" title="网络图片 鼠标在图片上是显示的内容">
<img src="D:\360极速浏览器下载\9d3d90cd47033b34ab3e8ab928755b27.jpeg" title="本地图片">
<!--
../上一层目录
./当前目录
-->
<img src="./img/0.jpg" title="吃屎">
</body>
</html>
<!--
ul无序列表
type 值有：
disc默认实心圆
circle 空心圆
square 实心正方形
-->
<ul type="square">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
<!--
ol 有序列表
type 值有：
1 数字 默认
a 小写字母
A 大写字母
i 小写罗马数字
I 大写罗马数字
start 以第几个开始 默认1
-->
<ol type="1" start="">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
<!--
dl 自定义列表
dt 列表项标题
dd 列表项说明
-->
<dl>
<dt>列表1</dt>
<dd>列表1说明</dd>
<dt>列表2</dt>
<dd>列表2说明</dd>
</dl><a href="http://www.baidu.com" target:_blank title="提示信息">百度</a>
<!--
锚点
给指定标签添加id属性
a标签的href属性值为 #指定元素ID属性的值
-->
<a href="#1" id="top">跳转一楼</a>
<a href="#2">跳转二楼</a>
<a href="#3">跳转三楼</a>
<a href="#4">跳转四楼</a>
<a href="#5">跳转五楼</a>
<p id="1" style="height:300px;background-color:pink">一楼</p>
<p id="2" style="height:300px;background-color:orange">二楼</p>
<p id="3" style="height:300px;background-color:purple">三楼</p>
<p id="4" style="height:300px;background-color:red">四楼</p>
<p id="5" style="height:300px;background-color:blue">五楼
<a href="#top">返回顶部</a><a href="./demo4.html">跳转demo4</a>
<a href="./demo4.html#5">跳转demo4的5楼</a>
五、表格
1.<table>定义HTML表格
tr：行
td、th：列
2.表格常用属性
border：边框厚度，比如border=“1”
cellspacing：设置表格和表格之间的距离
cellpadding：设置内容和表格之间的距离
align：水平对齐方式
left默认，center，right
valign：垂直对齐方式
lcenter默认，top，bottom
3.合并单元格
rowspan：合并行
colspan：合并列
<table border="1" cellspacing="0" width="600" height="300">
<tr align="center">
<td>编号</td>
<td align="left">姓名</td>
<td>年龄</td>
<td>简介</td>
<td>描述</td>
</tr>
<tr align="center">
<td>1</td>
<td>吴昊</td>
<td rowspan="2">男</td>
<td>18</td>
<td colspan="2">貌似潘安</td>
<!-- <td>貌似潘安</td> -->
</tr>
<tr align="center">
<td>1</td>
<td valign="top">王洋洋</td>
<!-- <td>男</td> -->
<td>26</td>
<td>暖水壶</td>
<td>暖男</td>
</tr>
</table>六、表单
1.<form>标签用于为用户创建HTML表单域
表单域能够包含input元素，比如文本字段、复选框、单选框、提交按钮等
2.form属性：
action：规定当提交数据向何处发生数据
method：用于规定发送数据的方式
get：把数据在地址栏以明文形式发送，不安全，大小受浏览器限制
post：不会以明文的形式发送，理论上大小不受浏览器控制
3.常见表单元素
input：text文本字段，password密码字段，radio单选框，checkbox多选框，file选择文件按钮，submit提交按钮，imag图片按钮，reset重置按钮，button单纯的按钮，hidden隐藏域
select：option用来创建多选菜单
textarea：文本域
<form action="数据提交的路径链接" >
用户名
<input type="text" name="username"><br>
密码
<input type="password" name="pwd"><br>
性别
<input type="radio" name="gender" value="1" checked>男
<input type="radio" name="gender" value="0">女
<br>
爱好
<input type="checkbox" name="hobbit" value="0">唱
<input type="checkbox" name="hobbit" value="1">跳
<input type="checkbox" name="hobbit" value="2">rap
<br>
地址
<select name="address">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2" selected>广州</option>
<option value="3">深圳</option>
</select>
<br>
隐藏域
<input type="hidden" name="uid" value="123">
<br>
文本域
<textarea>默认文本</textarea>
<br>
<input type="submit" value="提交">
<button>提交</button>
<br>
单纯按钮
<input type="button" name="按钮">
<br>
重置按钮
<input type="reset" name="reset">
</form>
8516
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
