结构HTML 表现CSS 行为JS
--------------------------------------------------
<p> </p>段落标签
<br/>换行标签（单标签）
--------------------------------------------------
<h1>标题一共六级选</h1>
<h2>文字加粗一行显</h2>
<h3>由大到小依次减</h3>
<h4>从重到轻随之变</h4>
<h5>语法规范书写后</h5>
<h6>具体效果刷新见</h6>
--------------------------------------------------
<strong>加粗(更推荐，语义更强烈)</strong>
<b>加粗</b>
<em>倾斜(更推荐，语义更强烈)</em>
<i>倾斜</i>
<del>删除线(更推荐，语义更强烈)</del>
<s>删除线</s>
<ins>下划线(更推荐，语义更强烈)</ins>
<u>下划线</u>
--------------------------------------------------
src图片路径（必须属性）
alt替换文本，图像显示不出来的时候用文字替换
title="提示文本，鼠标放到图像上，提示的文字
<img src="图片路径"/>
<img src="图片路径" alt="替换文本，图像显示不出来的时候用文字替换"/>
<img src="图片路径" title="提示文本，鼠标放到图像上，提示的文字"/>
--------------------------------------------------
width图像宽度 height图像高度 border图像边框粗细
--------------------------------------------------
相对路径分类：
下一级路径：符号/ 如<img src="images/1.jpg"/>
上一级路径：符号../ 如<img src="../1.jpg"/>
--------------------------------------------------
1. 外部链接：
<a href></a>
<a href="http://www.qq.com" target="_blank">腾讯</a>
target是打开窗口的方式 默认值为_self 当前窗口打开 _blank则是新窗口打开
2.内部链接:网站内部页面之间的相互链接，直接链接内部页面名称即可
<a href="xxx.html" >内部链接</a>
3.空链接：#
<a href="#">空链接</a>
4.下载链接：地址连接的是 文件.exe 或者是 zip等压缩包形式
<a href="111.zip">下载文件</a>
5.网页元素的链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接
<a href="http://www.baidu.com"><img src="111.png"/></a>
6.锚点链接：点击链接可以快速定位到页面中某个位置
在链接文本的href属性中，设置属性值为#名字的形式,如<a href="#two">第二集</a>
找到目标位置标签，里面添加一个id属性=刚才的名字，如<h3 id="two">第二集介绍</h3>
--------------------------------------------------
<!--注释标签--> 快捷键Ctrl + /
--------------------------------------------------
空格符：
小于<：<
大于>： >
和&：&
人民币¥：¥
版权©：©
注册商标®：®
摄氏度°：°
正负号±：±
乘号×：×
除号÷：÷
平方²：²
立方³：³
--------------------------------------------------
表格：用来展示数据（而非布局页面）
1.<table></table>用于定义表格的标签
2.<tr></tr>用于定义表格中的行，必须嵌套在<table></table>标签中
3.<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中
4.字母td指表格数据，即数据单元格的内容
5.<th></th>标签标示HTML表格的表头部分，文本加粗居中显示
6.<thead></thead>：用于定义表格的头部区域 ，<thead>内部必须拥有<tr>标签，一般位于第一行
<tbody>：用于定义表格的主体区域，主要用于放数据主体
align属性值left、center、right 规定相对周围元素的对齐方式
border属性值1或"" 规定表格单元是否拥有边框，默认为""，表示没有边框
cellpadding属性值为像素值 规定单元边沿与其内容之间的空白，默认1像素
cellspacing属性值为像素值 规定单元格之间的空白，默认2像素
width属性值为像素值或百分比 规定表格的宽度
height属性值为像素值或百分比 规定表格的高度
合并单元格：
跨行合并：rowspan="合并单元格的个数" 最上册单元格为目标单元格，写合并代码
跨列合并：colspan="合并单元格的个数" 最左册单元格为目标单元格，写合并代码
第一步：先确定跨行还是跨列合并
第二步：找到目标单元格（跨行找上侧，跨列找左侧），写上合并方式=合并的单元格数量。比如：<td colspan="2"></td>
第三步：删除多余的单元格
--------------------------------------------------
列表：用来布局
无序列表：
<ul></ul>标签标示HTML页面中的无序列表，一般会以项目符号呈现列表项，而列表项使用<li></li>标签定义
1.无序列表的各个列表项之间没有顺序级别之分，是并列的
2.<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的
3.<li>与</li>之间相当于一个容器，可以容纳所有元素
4.无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置
有序列表（使用较少）：
<ol></ol>标签用于定义有序列表，列表排序会以数字来显示，并且使用<li>标签来定义列表项
1.<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的
2.<li>与</li>之间相当于一个容器，可以容纳所有元素
3.有序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置
自定义列表（重点）：
自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号
<dl></dl>标签用于定义描述列表（或定义列表），该标签会与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用
1.<dl></dl>里面只能包含<dt>和<dd>
2.<dt>和<dd>个数无限制，经常是一个<dt>对应多个<dd>
--------------------------------------------------
表单域是一个包含表单元素的区域
在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递
<form>会把它范围内的表单元素信息提交给服务器
<form action="url地址" method="提交方式" name="表单域名称"></form>
action属性值为url地址，用于指定接受并处理表单数据的服务器程序的url地址
method属性值为get/post，用于设置表单数据的提交方式，其取值为get/post
name属性值为名称，用于制定表单的名称，以区分同一个页面中的多个表单域
1.input输入表单元素
<input type=" " > （单标签）
type属性可以让input表单元素设置不同的形态
type属性的属性值及其描述如下：
button：定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）
checkbox：定义复选框，可以实现多选
file：定义输入字段和“浏览”按钮，供文件上传
hidden：定义隐藏的输入字段
image：定义图像形式的提交按钮
password：定义密码字段，该字段中的字符被掩码
radio：定义单选按钮，（实现多选一需要把单选按钮定义相同的name属性）
reset：定义重置按钮，重置按钮会清除表单中的所有数据
submit：定义提交按钮，提交按钮会把表单数据发送到服务器
text：定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符
除type外，<input>标签还有其他很多属性，其常用属性如下：
name属性值由用户自定义，定义input元素的名称，区别不同表单元素
value属性值由用户自定义，规定input元素的值
checked属性值为checked，规定此input元素首次加载时应当被选中
maxlength属性值为正整数，规定输入字段中的字符的最大长度
①name和value是每个表单元素都有的属性值，主要给后台人员使用
②name表单元素的名字，要求单选按钮和复选框要有相同的name值
③checked属性主要针对于单选按钮和复选框，主要作用一打开页面就可以默认选中某个表单元素
④maxlength使用户可以在表单元素输入的最大字符数，一般较少使用
<label>标签为input元素定义标注（标签）
<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择到对应的表单元素上，用来增加用户体验
<label for="sex">女</label>
<input type="radio" name="sex" id="sex"/>
核心：<label>标签的for属性应当与相关元素的id属性相同
2.select下拉表单元素
在页面中如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
①<select>中至少包含一对<option>
②在<option>中定义selected="selected"时，当前项即为默认选中项
3.textarea文本域元素
当用户输入内容较多的情况下，无法使用文本框表单，此时可以使用<textarea>标签
在表单元素中，<textarea>标签是用于定义多行文本输入的控件
使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板、评论
<textarea rows="6" cols="20">
文本内容
</textarea>
①通过<textarea>标签可以轻松的创建多行文本输入框
②rows="显示的行数" cols="每行中的字符数"，我们在实际开发中不会使用，都是用CSS来改变大小
扫一扫
4804
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
