<!DOCTYPE html> //文档类型声明标签(告诉游览器使用哪种HTML版本来显示网页)最前面
<html lang="en"> //当前文档显示语言 en:英语 zh-CN:中文
<html>//根标签
<head>//头部标签
<meta charset="UTF-8" /> //字符集:多个字符的集合,以便计算机能够识别和储存各种文字
//charset常用的值:GB2312(简体中文),BLG5(繁体中文),GBK,UTF-8(万国码)
//必须要写,不然容易出现乱码
<title> </title>//标题标签
</head>
<body>//主体标签
</body>
</html>
标题标签
<h1>一级标签</h1>
<h2>二级标签</h2>
....
<h6>六级标签</h6> //加粗加黑,占一行 1>6(字体大小)
段落标签paragraph
<p> </p> //文本会根据浏览器窗口大小自动换行 段落与段落之间有间隙
换行标签
<br /> //强制换行 单标签 换行之后无缝隙
文本格式化标签 //突出重要性,比普通文字重要
加粗<strong> </strong>推荐使用
<b> </b>
倾斜<em> </em>推荐使用
<i> </i>
删除线<del> </del>推荐使用
<s> </s>
下划线<ins> </ins>推荐使用
<u> </u>
特殊标签 //没有语义,一个盒子,用来装内容
<div> </div>//分割,分区(大盒子)
//用来布局,一行只能放一个
<span> </span>//跨度,跨距(小盒子)
//一行可放多个
图像标签
<img src="图像URL"/> //单标签 src是图像标签的必须属性,用于指定文件图像的路径和文件名
//其他属性:src 图片路径,必须属性
alt 文本,替换文本,图像不能显示的文字
title 文本,提示文本,鼠标放在图像上显示的文字
width 像素,图片的宽度
height 像素,图片的高度 //一般情况下,width和height只用一个
border 像素,图片边框粗细
//注意点:图像标签可以有多个属性,必须写在标签的后面
属性之间不分先后顺序,标签与属性,属性与属性之间均以空格分开
属性采用键值对的格式,即:属性=“属性值”
//目录文件夹,根目录
//相对路径 同一级路径
下一级路径 /
上一级路径 ../
绝对路径
超链接标签
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a> //从一个页面链接到另一个页面
//href:必须属性
//target: _self 默认值
_blank 在新窗口中打开
//外部链接 href="http://..."
内部链接 href="....html"
空链接 href="#"
下载链接 href="....zip" (链接的是文件 .exe .zip)
网页元素链接
锚点链接 (点击链接,快速定位到页面中的某个位置)
href="#名字" 找到目标位置标签,里面添加一个id属性=名字
注释
<!-- --> 快捷键Ctrl+/
特殊字符
空格符 小于号 < 大于号 > (重点记住)
和号& & 人民币 ¥ 版权 ©
注册商标 ® 摄氏度 ° 正负号 ±
乘号 × 除号 ÷ 平方 ² 立方 ³
表格标签 //显示,展示数据
<table>//定义表格的标签
<tr>//定义表格中的行
<th> </th>//表头单元格标签:位于表格第一行或第一列,表头单元格里面的内容加粗居中显示 table head
<td> </td>//定义表格中的单元格 table date
</tr>
</table>
表格属性 //一般写在css中
表格结构标签 //包含在<table>标签中
<thead> </thead> //表格头部区域,内部必须有<tr>标签
<tbody> </tbody> //表格主体区域
合并单元格
跨行合并:rowspan="合并单元格的个数" //例如<td rowspan="2"> </td>
跨列合并:colspan="合并单元格的个数"
目标单元格(写合并代码)
跨行:最上侧单元格为目标单元格
跨列:最左侧单元格为目标单元格
合并单元格之后,要删除多余的单元格
列表标签 //用来布局的
无序列表
<ul>//只能在<ul>标签中放<li>标签
<li>列表项1</li>//<li>标签中可以容纳所有元素
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
有序列表
<ol>//只能在<ol>标签中放<li>标签
<li>列表项1</li>//<li>标签中可以容纳所有元素
<li>列表项2</li>
<li>列表项3</li>
...
</ol>
自定义列表
<dl>//只能在<dl>标签中放<dt>,<dd>标签
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
</dl>
表单标签 //收集用户信息
表单域//包含表单元素的区域
<form action="url地址" method="提交方式" name="表单域名称"> //method="提交方式" get/post
各种表单元素控件
</form>//定义表单域,以实现用户信息的收集和传递,会把他范围内的表单信息提交给服务器
` <label for=""> </ label> //<label>标签为<input>元素定义标注(标签)
//<label>标签用于绑定一个表单元素,当点击<label>标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验
//核心:<label>标签的for属性应当于相关元素的id属性相同
//例如:<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
表单控件(表单元素)//允许用户在表单中输入或者选择的内容控件
<input type="属性值" /> //单标签,输入的意思,用于收集用户信息
//其他属性:name 定义input元素的名称 //name和value是每个表单元素都有的属性值,主要供后台人员使用
value 定义input元素的值
checked 规定input元素首次加载时应该被选中 //主要针对于单选按钮和复选按钮 checked="checked"
//单选只能写一个,复选可写多个 一打开页面,就可以默认选中某个表单元素
maxlength 规定输入字段中的字符的最大长度
//type属性值:text 文本框,定义单行的输入字段,用户可在其中输入文本,默认宽度为20个字
password 密码框
radio 单选按钮
checkbox 复选框(多选按钮) //单选按钮和复选按钮要有相同的name值
submit 提交按钮,把表单数据发送到服务器
reset 重置按钮,把表单元素还原到初始的默认状态
botton 定义可点击按钮(后期结合js使用)
file 文件域:上传文件
hidden 定义隐藏的输入字段
image 定义图像形式的提交按钮
<select> // 下拉表单元素:多个选项让用户选择,想节约空间时
<option>选项1</option> <select>中至少包含一对<option>
<option>选项2</option> 在<>中定义selected="selected"时,当前选项即为默认选项
<option>选项3</option>
...
</select>
<textarea> //文本域元素:用户输入内容较多的情况下,比如:留言板,评论
属性值:cols(每行中的字符数), rows(显示的行数),实际开发中用CSS来改变大小
</textarea>
提示信息//
双标签,单标签
包含关系,并列关系<!DOCTYPE html> //文档类型声明标签(告诉游览器使用哪种HTML版本来显示网页)最前面
<html lang="en"> //当前文档显示语言 en:英语 zh-CN:中文
<html>//根标签
<head>//头部标签
<meta charset="UTF-8" /> //字符集:多个字符的集合,以便计算机能够识别和储存各种文字
//charset常用的值:GB2312(简体中文),BLG5(繁体中文),GBK,UTF-8(万国码)
//必须要写,不然容易出现乱码
<title> </title>//标题标签
</head>
<body>//主体标签
</body>
</html>
标题标签
<h1>一级标签</h1>
<h2>二级标签</h2>
....
<h6>六级标签</h6> //加粗加黑,占一行 1>6(字体大小)
段落标签paragraph
<p> </p> //文本会根据浏览器窗口大小自动换行 段落与段落之间有间隙
换行标签
<br /> //强制换行 单标签 换行之后无缝隙
文本格式化标签 //突出重要性,比普通文字重要
加粗<strong> </strong>推荐使用
<b> </b>
倾斜<em> </em>推荐使用
<i> </i>
删除线<del> </del>推荐使用
<s> </s>
下划线<ins> </ins>推荐使用
<u> </u>
特殊标签 //没有语义,一个盒子,用来装内容
<div> </div>//分割,分区(大盒子)
//用来布局,一行只能放一个
<span> </span>//跨度,跨距(小盒子)
//一行可放多个
图像标签
<img src="图像URL"/> //单标签 src是图像标签的必须属性,用于指定文件图像的路径和文件名
//其他属性:src 图片路径,必须属性
alt 文本,替换文本,图像不能显示的文字
title 文本,提示文本,鼠标放在图像上显示的文字
width 像素,图片的宽度
height 像素,图片的高度 //一般情况下,width和height只用一个
border 像素,图片边框粗细
//注意点:图像标签可以有多个属性,必须写在标签的后面
属性之间不分先后顺序,标签与属性,属性与属性之间均以空格分开
属性采用键值对的格式,即:属性=“属性值”
//目录文件夹,根目录
//相对路径 同一级路径
下一级路径 /
上一级路径 ../
绝对路径
超链接标签
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a> //从一个页面链接到另一个页面
//href:必须属性
//target: _self 默认值
_blank 在新窗口中打开
//外部链接 href="http://..."
内部链接 href="....html"
空链接 href="#"
下载链接 href="....zip" (链接的是文件 .exe .zip)
网页元素链接
锚点链接 (点击链接,快速定位到页面中的某个位置)
href="#名字" 找到目标位置标签,里面添加一个id属性=名字
注释
<!-- --> 快捷键Ctrl+/
特殊字符
空格符 小于号 < 大于号 > (重点记住)
和号& & 人民币 ¥ 版权 ©
注册商标 ® 摄氏度 ° 正负号 ±
乘号 × 除号 ÷ 平方 ² 立方 ³
表格标签 //显示,展示数据
<table>//定义表格的标签
<tr>//定义表格中的行
<th> </th>//表头单元格标签:位于表格第一行或第一列,表头单元格里面的内容加粗居中显示 table head
<td> </td>//定义表格中的单元格 table date
</tr>
</table>
表格属性 //一般写在css中
表格结构标签 //包含在<table>标签中
<thead> </thead> //表格头部区域,内部必须有<tr>标签
<tbody> </tbody> //表格主体区域
合并单元格
跨行合并:rowspan="合并单元格的个数" //例如<td rowspan="2"> </td>
跨列合并:colspan="合并单元格的个数"
目标单元格(写合并代码)
跨行:最上侧单元格为目标单元格
跨列:最左侧单元格为目标单元格
合并单元格之后,要删除多余的单元格
列表标签 //用来布局的
无序列表
<ul>//只能在<ul>标签中放<li>标签
<li>列表项1</li>//<li>标签中可以容纳所有元素
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
有序列表
<ol>//只能在<ol>标签中放<li>标签
<li>列表项1</li>//<li>标签中可以容纳所有元素
<li>列表项2</li>
<li>列表项3</li>
...
</ol>
自定义列表
<dl>//只能在<dl>标签中放<dt>,<dd>标签
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
</dl>
表单标签 //收集用户信息
表单域//包含表单元素的区域
<form action="url地址" method="提交方式" name="表单域名称"> //method="提交方式" get/post
各种表单元素控件
</form>//定义表单域,以实现用户信息的收集和传递,会把他范围内的表单信息提交给服务器
` <label for=""> </ label> //<label>标签为<input>元素定义标注(标签)
//<label>标签用于绑定一个表单元素,当点击<label>标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验
//核心:<label>标签的for属性应当于相关元素的id属性相同
//例如:<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
表单控件(表单元素)//允许用户在表单中输入或者选择的内容控件
<input type="属性值" /> //单标签,输入的意思,用于收集用户信息
//其他属性:name 定义input元素的名称 //name和value是每个表单元素都有的属性值,主要供后台人员使用
value 定义input元素的值
checked 规定input元素首次加载时应该被选中 //主要针对于单选按钮和复选按钮 checked="checked"
//单选只能写一个,复选可写多个 一打开页面,就可以默认选中某个表单元素
maxlength 规定输入字段中的字符的最大长度
//type属性值:text 文本框,定义单行的输入字段,用户可在其中输入文本,默认宽度为20个字
password 密码框
radio 单选按钮
checkbox 复选框(多选按钮) //单选按钮和复选按钮要有相同的name值
submit 提交按钮,把表单数据发送到服务器
reset 重置按钮,把表单元素还原到初始的默认状态
botton 定义可点击按钮(后期结合js使用)
file 文件域:上传文件
hidden 定义隐藏的输入字段
image 定义图像形式的提交按钮
<select> // 下拉表单元素:多个选项让用户选择,想节约空间时
<option>选项1</option> <select>中至少包含一对<option>
<option>选项2</option> 在<>中定义selected="selected"时,当前选项即为默认选项
<option>选项3</option>
...
</select>
<textarea> //文本域元素:用户输入内容较多的情况下,比如:留言板,评论
属性值:cols(每行中的字符数), rows(显示的行数),实际开发中用CSS来改变大小
</textarea>
提示信息//
双标签,单标签
包含关系,并列关系