Web基础之HTML
2017-02-26 11:47
197 查看
HTML
版本信息：
在文档的起始用DOCTYPE声明指定的版本和风格，让浏览器清楚文档的版本、类型和风格。版本信息分为三种：严格型、传统型（过渡型）、框架型。
分别是：
1）Strict DTD
2）Transitional DTD：（常用）
3）Frameset DTD：（不常用了）
传统型不需要全名空间，严格型需要全名空间；
* 块状元素特点(block)：每个块级元素都从新的一行开始，并且其后的元素也另起一行；元素的宽高、行高及顶底部的距离都可设置；元素宽度在不设置的情况下，是其父容器的100%。
* 内联元素特点(inline)：和其他元素都在一行上；元素的宽高及顶底部边距不可设置；元素的宽度就是它包含的文字或图片的宽度，不可改变。
* 内联块状元素特点(inline-block)：和其他元素都在一行上；元素的宽高、行高及顶底部边距都可设置；
常用的元素有：
元素：所有其他头元素的容器；紧随在起始标签之后；
包含的子元素：
: 标题；出现在浏览器顶部；没有属性；必须出现 在中；一个文档只能有一个标题；
: 元数据元素；定义页面的编码格式或刷新频率等；（为空标记；常用属性有content、http-equiv）;
<script>:JavaScript脚本；</script>
<style> :定义内部样式表；
<link> : 为当前页面引入其他资源；
<body> 元素：文档主本，包含所有要显示的内容；
语义化：明白每个标签的用途，即在什么情况下使用该标签合理。
—> 作用：
1)更容易被搜索引擎收录；
2)更容易让屏幕阅读器读出此网页内容；
文本标记 ：
1）特殊字符 ：
2）标题元素 <hn> :定义大小
3）段落元素 <p> :提供了结构化文本的方式；文本会用单独的段落显示（与前后的文本都换行分开；并会添加一段额外的垂直空白距离，作为段落间距）；
4）换行元素 <br>
5) 分区 元素< span >和< div >:常用于页面布局；
—> <span> 文本 </span> :不会影响布局，常用于同一行中的部分元素；可为文字设置单独的样式；
—> <div> 文本 </div> :独占一行，常用于多行的情况下；
6) 块级 元素( block )和 行内 元素( inline ):
—> 如: <div> 、 <p> 、 <hn> 、 <li> ;默许情况下，会独占一行，即前后都会自动换行；
—> 行内元素：可以与其他元素位于同一行，即不会换行如 <span> 、 <img> 、 <a> ;
7) 图像 元素< img >:
—> 必须属性： src
—> 常用属性: width、height;(不建议宽高都设置，若不知原比例则图像会变形，一般只设置一个，系统会自动按比例缩放)；
8） 链接 元素 <a> :创建一个超链接
—> 语法：<a href=“” target=“”>文本</a>
—> href 属性：链接url
—> target 属性：目标，可取的值有： _self :默认值，替换当前页面；
_blank :打开的新的页面；
9） URL ：统一资源定位器，组成:协议、机名、路径名、文件名；[相对路径和绝对路径]
10） 锚点 ：是文档中某行一个记号，用于链接到文档中的某一行。即实现当前页面不同位置之间的跳转；
使用：
—1—>使用a在目标位置定义一个锚点<a name=“link1”><a>
—2—>使用连接a链接到锚点（在锚点名前加上#即可），href指向link1，如<a href=“ # link1”></a>
[ 注意 ：#后面不是一个页面，而是一个锚点；页面不同位置之前的跳转要在有滚动条的情况下才有效] ；
直接回到页面顶端：早期版本里要先在顶端定义锚点，再定义链接，但由于非常常用，现在简化为只用一个#即可: <a href=“#”>文本</a>
<em> 需要强调的文本 </em> //会以斜体表示
<strong> 需要强调的文本 </strong> //会以粗体显示
<q> 引用文本 </q> //浏览器会自动对引用文本添加引号
<blockquote> 长文本引用 </blockquote> //浏览器会自动缩进
：空格
<hr> : 分隔横线
<address> 取系地址信息 </address> //浏览器会自动默认显示为斜体
<code> var i=i+300; </code> //用于插入代码
<pre> 多行代码 </pre >
列表标记
所有列表都由列表类型和列表项组成：
—>列表类型：有序列表<ol>(ordered list)和无序列表<ul>(unordered list);
—>列表项：<li><list item>,用于指示具体的列表内容；
[注意：定义一个列表必须使用<ol>或<ul>,列表的每个内容，使用一个<li>]
1)无序列表：<ul>只能包含具体的列表项元素<li>,列表中包含的每一项都必须包含在起始标记<li></li>之间；
2）有序列表：<ol>只能包含具体的列表项元素<li>,列表中的每一项内容都必须包含在<li></li>之间；
3）列表嵌套：将列元素嵌套使用，可创建多层列表，即可将带个列表都放在某个li里；
** 常用于创建文档大纲、导航菜单等；
**表格<table>
通常用来组织结构化的信息，由一系列单元格组成；表格的数据保存在单元格里；显进网格数据，常用于页面的布局；
1）创建：
—>表格：<table> 行 <tr> 单元格 <td> </td> </tr> </table>
2）表格常用属性：
—> border：表格外边框宽度，会为每个单元格应用边框
—> width/height：表格的宽和高
—> align：水平对齐方式，可选有的：left、right、center
—> cellpadding属性：单元格内容与单元格边框之前的距离
—> cellspacing:单元格之间的距离
[注意：表格的调试默认自适应（按内容长度自适应）；对表格的宽设定值，每列的宽则会按单元格的长度的比例分配；对列设置宽，会影响整列；对列设置高会影响整行]
3）单元格<td>常用属性：
—> width/height:单元格的宽和高
—>align:水平对齐方式，可选的值有：left、right、center
—>valign：垂直对齐方式，可选的值有：top、middle、bottom;
4) 表格的标题<caption>
默认在表格的上方居中显示；只能位于<table></table>里，且只能对每个表格定义一个标题，且作为第 一个子元素存在；
摘要：<table summary=“表格简介文本”>//，summary中的内容不会被浏览器显示出来，作用是增加表格的可读性（语义化），使搜索引擎更好的读懂表格。
5）行分组（表格特有）
将多个行作为一组，进行统一的设置的时候，使用专门的对表格实现分组的元素；
—> 表格可分为3个部分：表头、表主体和表尾
—> 表头行分组：<thead></thead>；只能出现一次
—> 表主体行分组：<tbody></tbody>:可出现多次；
—> 表尾行分组:<tfoot></tfoot>:只能出现一次
[注意：行分组只能出现在table里，只能包含tr元素]；
6）不规则表格
对<td>,有colspan、rowspan属性可设置单元格的跨列或跨行；
—>colspan：水平方向(横向)延伸单元格，值为正整数，表示水平延伸单元格数；
—>rowspan：垂直方向(竖向)延伸单元格，值为正整数，表示垂直延伸单元格格数；
7)表格的嵌套
在单元格中放置另外一个表在表单元格中，即<td>元素中再包含<table>元素；可用于设计复杂表格或复杂布局；
*表单<form>
作用：
—> 动态交互:通过查看、填写(页面上录入数据)并提交表单信息到服务器
—> 两个基本部分：
—> 实现数据交互的可见界面元素，如文本框或按钮
—> 提交后的表单处理
—> 界面元素
—> 使用<form>元素创建表单
—> 在<form>元素中添加其他表单可以包含的控件元素
1）表单元素<form>
使用<form></form>标记；承载其他交互的元素，以表单作为单位提交数据；
主要属性：
—> action：定义表单被提交时发生的动作，通常包含服务器脚本的url,若没有填写，默认为当前url
—> method：指出表单数据提交的方式，如get或post
—> entrype：表单数据进行编码的方式,如utf-8
2）<input>元素
用于收集用户的信息；是一个空标记，语法为<input/>
主要属性：
—> type：决定元素的类型；
—> value：取决于元素的类型(type),用作初始值(文本杠/密码框)、用于提交的值(单/多选框)、按钮上的文本显示(提交/重置/普通按钮)；
—> name: 单选或多选框的分组；
3）文本框与密码框
文本框<input type=“text”/>
密码框<input type=“password”/>
主要属性：
—>value：用作初始值；
—>maxlength:限制输入字数；
—>readonly：设置文本控件只读，老版本可写成readonly=“”;当前写成readonly=“readonly”;
4) 单选框与多选框
单选框：<input type = “radio”/>
多选框：<input type = “checkbox”/>
主要属性：
—> value：当提交form时，若选择了此单选框，则value的值就被发送到服务器；
—> name：单选或多选框的分组；
—> checked：设置初始状态是否为选中；老版本可写成checked=“”;当前写成checked=“checked”;
5)按钮：
+提交按钮:<input type = “submit”/>传送表单数据给服务器或其他程序处理，并刷新页面；
+重置按钮：<input type =“reset”/> 清除表单的内容并把所有表单控件恢复到默认值
+普通按钮：<input type=“button”/> 用于执行客户端脚本，为其设置onclick事件，才会有功能
主要属性：value：在按钮上的文本显示；
6）隐藏域与文件选择框
隐藏域：<input type = “hidden”/> 不会显示，常用于在页面上隐藏那些不希望被用户看到的数据；
文本选择框：<input type=“file”> 选择要上传的文件
7）<label>元素
主要属性：for: 表示与该元素相关联控件的id值
作用：使用for属性关联其他元素，便单击文本时，就像单元关联的控件 一样；相当于获取焦点
8）选项框
两种：下拉选项框与滚动列表
—> 创建选项框<select>
—> name:选项框全名
—> size: 大于1，则为滚动列表，即是由size来区分下拉和滚动列表
—> multiple：设置多选
—> <option>创建选项
—>value：选项，用于提交的值
—> selected：预造中的项，老版本中可写selected=“”,当前写成selected=“selected”
9)<textarea>元素
多行文本输入框<textarea>文本<textarea/>
属性：
—> cols：指定文本区域列数
—> rows: 指定文本区域的行数
—> readonly：设置只读
10）表单元素分组(表单元素特有)
—> <fieldset>: 为表单控件分组
—> <legend>: 为分组指定一个标题
博客地址：Web基础之HTML
版本信息：
在文档的起始用DOCTYPE声明指定的版本和风格，让浏览器清楚文档的版本、类型和风格。版本信息分为三种：严格型、传统型（过渡型）、框架型。
分别是：
1）Strict DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2）Transitional DTD：（常用）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3）Frameset DTD：（不常用了）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
传统型不需要全名空间，严格型需要全名空间；
* 块状元素特点(block)：每个块级元素都从新的一行开始，并且其后的元素也另起一行；元素的宽高、行高及顶底部的距离都可设置；元素宽度在不设置的情况下，是其父容器的100%。
* 内联元素特点(inline)：和其他元素都在一行上；元素的宽高及顶底部边距不可设置；元素的宽度就是它包含的文字或图片的宽度，不可改变。
* 内联块状元素特点(inline-block)：和其他元素都在一行上；元素的宽高、行高及顶底部边距都可设置；
常用的元素有：
—>块状元素：<div> <p> <hn> <ol> <ul> <dl> <table> <address> <blockquote> <form> <li> —>内联元素：<a> <span> <br> <i> <em> <strong> <label> <q> <var> <cite> <code> —>内联块状元素：<img> <input>
元素：所有其他头元素的容器；紧随在起始标签之后；
包含的子元素：
: 标题；出现在浏览器顶部；没有属性；必须出现 在中；一个文档只能有一个标题；
: 元数据元素；定义页面的编码格式或刷新频率等；（为空标记；常用属性有content、http-equiv）;
<meta http-equive=“Content-Type” content=“text/html; charset=utf-8”>
<script>:JavaScript脚本；</script>
<style> :定义内部样式表；
<link> : 为当前页面引入其他资源；
<body> 元素：文档主本，包含所有要显示的内容；
语义化：明白每个标签的用途，即在什么情况下使用该标签合理。
—> 作用：
1)更容易被搜索引擎收录；
2)更容易让屏幕阅读器读出此网页内容；
文本标记 ：
1）特殊字符 ：
2）标题元素 <hn> :定义大小
3）段落元素 <p> :提供了结构化文本的方式；文本会用单独的段落显示（与前后的文本都换行分开；并会添加一段额外的垂直空白距离，作为段落间距）；
4）换行元素 <br>
5) 分区 元素< span >和< div >:常用于页面布局；
—> <span> 文本 </span> :不会影响布局，常用于同一行中的部分元素；可为文字设置单独的样式；
—> <div> 文本 </div> :独占一行，常用于多行的情况下；
6) 块级 元素( block )和 行内 元素( inline ):
—> 如: <div> 、 <p> 、 <hn> 、 <li> ;默许情况下，会独占一行，即前后都会自动换行；
—> 行内元素：可以与其他元素位于同一行，即不会换行如 <span> 、 <img> 、 <a> ;
7) 图像 元素< img >:
—> 必须属性： src
—> 常用属性: width、height;(不建议宽高都设置，若不知原比例则图像会变形，一般只设置一个，系统会自动按比例缩放)；
8） 链接 元素 <a> :创建一个超链接
—> 语法：<a href=“” target=“”>文本</a>
—> href 属性：链接url
—> target 属性：目标，可取的值有： _self :默认值，替换当前页面；
_blank :打开的新的页面；
9） URL ：统一资源定位器，组成:协议、机名、路径名、文件名；[相对路径和绝对路径]
10） 锚点 ：是文档中某行一个记号，用于链接到文档中的某一行。即实现当前页面不同位置之间的跳转；
使用：
—1—>使用a在目标位置定义一个锚点<a name=“link1”><a>
—2—>使用连接a链接到锚点（在锚点名前加上#即可），href指向link1，如<a href=“ # link1”></a>
[ 注意 ：#后面不是一个页面，而是一个锚点；页面不同位置之前的跳转要在有滚动条的情况下才有效] ；
直接回到页面顶端：早期版本里要先在顶端定义锚点，再定义链接，但由于非常常用，现在简化为只用一个#即可: <a href=“#”>文本</a>
<em> 需要强调的文本 </em> //会以斜体表示
<strong> 需要强调的文本 </strong> //会以粗体显示
<q> 引用文本 </q> //浏览器会自动对引用文本添加引号
<blockquote> 长文本引用 </blockquote> //浏览器会自动缩进
：空格
<hr> : 分隔横线
<address> 取系地址信息 </address> //浏览器会自动默认显示为斜体
<code> var i=i+300; </code> //用于插入代码
<pre> 多行代码 </pre >
列表标记
所有列表都由列表类型和列表项组成：
—>列表类型：有序列表<ol>(ordered list)和无序列表<ul>(unordered list);
—>列表项：<li><list item>,用于指示具体的列表内容；
[注意：定义一个列表必须使用<ol>或<ul>,列表的每个内容，使用一个<li>]
1)无序列表：<ul>只能包含具体的列表项元素<li>,列表中包含的每一项都必须包含在起始标记<li></li>之间；
2）有序列表：<ol>只能包含具体的列表项元素<li>,列表中的每一项内容都必须包含在<li></li>之间；
3）列表嵌套：将列元素嵌套使用，可创建多层列表，即可将带个列表都放在某个li里；
** 常用于创建文档大纲、导航菜单等；
**表格<table>
通常用来组织结构化的信息，由一系列单元格组成；表格的数据保存在单元格里；显进网格数据，常用于页面的布局；
1）创建：
—>表格：<table> 行 <tr> 单元格 <td> </td> </tr> </table>
2）表格常用属性：
—> border：表格外边框宽度，会为每个单元格应用边框
—> width/height：表格的宽和高
—> align：水平对齐方式，可选有的：left、right、center
—> cellpadding属性：单元格内容与单元格边框之前的距离
—> cellspacing:单元格之间的距离
[注意：表格的调试默认自适应（按内容长度自适应）；对表格的宽设定值，每列的宽则会按单元格的长度的比例分配；对列设置宽，会影响整列；对列设置高会影响整行]
3）单元格<td>常用属性：
—> width/height:单元格的宽和高
—>align:水平对齐方式，可选的值有：left、right、center
—>valign：垂直对齐方式，可选的值有：top、middle、bottom;
4) 表格的标题<caption>
默认在表格的上方居中显示；只能位于<table></table>里，且只能对每个表格定义一个标题，且作为第 一个子元素存在；
摘要：<table summary=“表格简介文本”>//，summary中的内容不会被浏览器显示出来，作用是增加表格的可读性（语义化），使搜索引擎更好的读懂表格。
5）行分组（表格特有）
将多个行作为一组，进行统一的设置的时候，使用专门的对表格实现分组的元素；
—> 表格可分为3个部分：表头、表主体和表尾
—> 表头行分组：<thead></thead>；只能出现一次
—> 表主体行分组：<tbody></tbody>:可出现多次；
—> 表尾行分组:<tfoot></tfoot>:只能出现一次
[注意：行分组只能出现在table里，只能包含tr元素]；
6）不规则表格
对<td>,有colspan、rowspan属性可设置单元格的跨列或跨行；
—>colspan：水平方向(横向)延伸单元格，值为正整数，表示水平延伸单元格数；
—>rowspan：垂直方向(竖向)延伸单元格，值为正整数，表示垂直延伸单元格格数；
7)表格的嵌套
在单元格中放置另外一个表在表单元格中，即<td>元素中再包含<table>元素；可用于设计复杂表格或复杂布局；
*表单<form>
作用：
—> 动态交互:通过查看、填写(页面上录入数据)并提交表单信息到服务器
—> 两个基本部分：
—> 实现数据交互的可见界面元素，如文本框或按钮
—> 提交后的表单处理
—> 界面元素
—> 使用<form>元素创建表单
—> 在<form>元素中添加其他表单可以包含的控件元素
1）表单元素<form>
使用<form></form>标记；承载其他交互的元素，以表单作为单位提交数据；
主要属性：
—> action：定义表单被提交时发生的动作，通常包含服务器脚本的url,若没有填写，默认为当前url
—> method：指出表单数据提交的方式，如get或post
—> entrype：表单数据进行编码的方式,如utf-8
2）<input>元素
用于收集用户的信息；是一个空标记，语法为<input/>
主要属性：
—> type：决定元素的类型；
—> value：取决于元素的类型(type),用作初始值(文本杠/密码框)、用于提交的值(单/多选框)、按钮上的文本显示(提交/重置/普通按钮)；
—> name: 单选或多选框的分组；
3）文本框与密码框
文本框<input type=“text”/>
密码框<input type=“password”/>
主要属性：
—>value：用作初始值；
—>maxlength:限制输入字数；
—>readonly：设置文本控件只读，老版本可写成readonly=“”;当前写成readonly=“readonly”;
4) 单选框与多选框
单选框：<input type = “radio”/>
多选框：<input type = “checkbox”/>
主要属性：
—> value：当提交form时，若选择了此单选框，则value的值就被发送到服务器；
—> name：单选或多选框的分组；
—> checked：设置初始状态是否为选中；老版本可写成checked=“”;当前写成checked=“checked”;
5)按钮：
+提交按钮:<input type = “submit”/>传送表单数据给服务器或其他程序处理，并刷新页面；
+重置按钮：<input type =“reset”/> 清除表单的内容并把所有表单控件恢复到默认值
+普通按钮：<input type=“button”/> 用于执行客户端脚本，为其设置onclick事件，才会有功能
主要属性：value：在按钮上的文本显示；
6）隐藏域与文件选择框
隐藏域：<input type = “hidden”/> 不会显示，常用于在页面上隐藏那些不希望被用户看到的数据；
文本选择框：<input type=“file”> 选择要上传的文件
7）<label>元素
主要属性：for: 表示与该元素相关联控件的id值
作用：使用for属性关联其他元素，便单击文本时，就像单元关联的控件 一样；相当于获取焦点
8）选项框
两种：下拉选项框与滚动列表
—> 创建选项框<select>
—> name:选项框全名
—> size: 大于1，则为滚动列表，即是由size来区分下拉和滚动列表
—> multiple：设置多选
—> <option>创建选项
—>value：选项，用于提交的值
—> selected：预造中的项，老版本中可写selected=“”,当前写成selected=“selected”
9)<textarea>元素
多行文本输入框<textarea>文本<textarea/>
属性：
—> cols：指定文本区域列数
—> rows: 指定文本区域的行数
—> readonly：设置只读
10）表单元素分组(表单元素特有)
—> <fieldset>: 为表单控件分组
—> <legend>: 为分组指定一个标题
博客地址：Web基础之HTML
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 这几天买了很多书，最近这2个月的学习目标是：熟悉Linux、C、Python、Web前端基础(HTML、XHTML，CSS)
- HTTP协议、正则表达式、HTML，WEB数据采集基础
- web前端——html基础笔记 NO.8
- web前端——html基础笔记 NO.13｛盒模型，颜色值，字体的缩写｝
- web前端——html基础笔记 NO.12｛css布局模型（流动，浮动，层模型）｝
- web基础之认识动态HTML（DHTML）
- Web前端基础----HTML
- web前端——html基础笔记 NO.6
- Web开发技术——HTML基础
- HTML第四节（Web设计基础）
- WEB_HTML基础
- javaWeb基础01_HTML
- WEB基础__HTML 概述及常用标签
- web前端——html基础笔记 NO.7
- [Java Web] 3、WEB开发之HTML基础程序试手
- Web基础之HTML + CSS
- 学习笔记之javaweb基础:http协议&html基础
- HTML(超文本标记语言)-----WEB开发基础之二
- web前端——html基础笔记 NO.10
- 学习Web基础（HTML/CSS/JS)+服务器端技术(LAMP)