html 介绍/基础标签
html ：
HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的internet资源连接为一个逻辑整体。
HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等
<!DOCTYPE html>：声明
标准的html5网页声明，全称为Document Type HyperText Mark-up Language
声明文档类型为超文本标记语言或超文本链接标示语言，支持html5标准的主流
浏览器都认识这个声明，表示网页采用html5规范标准，声明位于最顶部，
此标签可告知浏览器文档使用那种规范，是html5还是xhtml
doctype不区分大小写以下几种方式均可：
<!DOCTYPE html> <!DOCTYPE HTML>
<html></html>：web开始
<html>标签限定了文档的开始点与结束点，是页面元素的第一个标签
html标签是由尖括号括起来的 通常都是成对出现的 第一个是开始标签 第二个是结束标签
<!DOCTYPE html>
<html> </html>
<head></head>：web头部
head标签用于定义文档的头部，是所有头部元素的容器
head标签中的元素可以引用脚本，指示浏览器在哪里找到样式表，提供元信息等
文档的头部描述了文档的各种属性和信息，包括文档标题，在web中的位置以及和其他文档的关系等
绝大多数文档头部包含的数据都不会真正作为内容显示给读者
以下标签可以用在<head>标签部分
<meta>，<base>，<title>，<script>，<style>,<link>
<!DOCTYPE html>
<html> <head> </head> </html>
<body></body>：web主体
body标签定义文档的主体内容
body元素包含文档所有显示的内容 例如文本，超链接，图像，表格和列表等
<!DOCTYPE html>
<html> <head> </head> <body> </body> </html>
<meta charset="utf-8"> ： 编码格式
使用在头部的标签
是一种字符编码，charset="utf-8"告知浏览器此页面属于什么字符编码格式，浏览器做好翻译工作
常见的字符集编码格式有：
gb2312：代表国家标准第2312条 不包含繁体
gbk：国家标准扩展版
unicode：万国码
utf-8：unicode中的其中一种编码格式
<!DOCTYPE html>
<html> <head>
<meta charset="utf8"/>
</head> </html>
<h1>-<h6>:html内容标题
<h1>-<h6>标签可定义html内容标题
<h1>定义最大标签
<h6>定义最小标题
由于一些浏览器会默认的把<h1>标签元素显示为很大的字体
因此会有一些web开发者使用<h2>元素代替<h1>元素来显示
最上层的标题，这样做不会对读者产生影响，但是会让试图
理解'网页结构'的搜索引擎和其他软件感到迷惑，所以请确保
<h1>用于最顶层的标题，<h2>和<h3>用于较低的层级
<html> <head> <mate charset='utf-8' /> <title> yifachen </title> </head> <body> <h1>我是最大的标题标签</h1> <h2>我排行第二</h2> <h3>我排行第三</h3> <h4>我排行第四</h4> <h5>我排行第五</h5> <h6>我排行第六</h6> </body> </html>
<p></p>：段落标签
p元素会自动在其前后创建一些空白
浏览器会自动添加这些空间
<html> <head> <mate charset='utf-8' /> <title> yifachen </title> </head> <body> <p>我是一个段落</p> <p>我是另外一个段落</p> </body> </html>
 ：空格元素
一个 表示一个空格
<html> <head> <mate charset='utf-8' /> <title> yifachen </title> </head> <body> <p>我是一个段落</p>
<p></p>
<p></p>
<p></p> <--让段落看的出效果效果-->
<p>我是另外 一个段落</p> </body> </html>
<em></em>：斜体标签
em标签定义的文本会呈现特殊样式
<html> <head> <mate charset='utf-8' /> <title> yifachen </title> </head> <body> <em>我是一个斜体</em> <em>我是另外 一个斜体</em> </body> </html>
<strong></strong>加粗标签
与em标签一样定义的文本会呈现特殊样式
<html> <head> <mate charset='utf-8' /> <title> yifachen </title> </head> <body> <strong>加粗显示</strong> </body> </html>
<i></i>：斜体标签
<i>标签与<em>标签相似定义的文本会呈现特殊样式
<html> <head> <mate charset='utf-8' /> <title> yifachen </title> </head> <body> <i>我是一个斜体</i> <i>我是另外 一个斜体</i> </body> </html>
<b></b>：粗体标签
<html> <head> <mate charset='utf-8' /> <title> yifachen </title> </head> <body> <b>我是一个粗体</b> </body> </html>
<font></font>:规定字体，颜色，大小标签
front标签有三个属性
size 设置字体大小 数值为1至7
face 设置字体 宋体 微软雅黑等
color 设置字体颜色
当face与color同时存在 color会覆盖face
也可以与其他标签一起使用 利用其特性 例如p标签与h1标签
<html> <head> <mate charset='utf-8' /> <title> yifachen </title> </head> <body> <font size="4" color="blue">我是来举例的</font> <h1><font size="4" color="red">我也是来举例的</font></h1> <p>我是来划一个空格的</p> <font face=”微软雅黑“ size=”4“>我还是来举例的</font> </body> </html>
<br />换行标签
<br>简单的换行符
<br>标签是空标签 它没有结束标签 直接把结束标签放在<br />中
请注意：<br> 标签只是简单地开始新的一行，而<p>标签会在相邻的段落之间插入一些垂直的间距
<html> <head> <mate charset='utf-8' /> <title> yifachen </title> </head> <body> <font size="4" color="blue">我是来举例的</font><br /> <--我是来换个行的--> <h1><font size="4" color="red">我也是来举例的</font></h1> <p>我是来划一个空格的</p> <font face=”微软雅黑“ size=”4“>我还是来举例的</font> </body> </html>
<img>：图片标签
src属性：规定显示图片的url 或 img本地图片的路径
alt/title属性：规定显示图片的文本名称
height属性：定义图像的高度 单位px
width属性：定义图像的宽度 单位px
align属性：定义图像位置
left：左对齐
right：右对齐
center ：居中
border属性：定义图像周围的边框 单位px
vspace属性：定义图像的顶部于底部空白 单位px
hspace属性：定义图像的左侧和右侧的空白 单位px
<html> <head> <mate charset='utf-8' /> <title> yifachen </title> </head> <body> <img src="/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1454783519,2870582753&fm=26" title="112" height="400px" width="600px" align="right" border="20px" /> <img src="img/宝安05期毕业留念.jpg"/> </body> </html>
<a></a>：链接标签
href属性：规定指向页面的url
点击时，默认在原有的窗口打开新链接
href='#'：死链接
target属性：
_blank在新窗口打开链接
download属性：规定被下载的url
<html> <head> <mate charset='utf-8' /> <title> yifachen </title> </head> <body> <a href="www.baidu.com" target="_blank" download="/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1454783519,2870582753&fm=26">点击图片进入百度 <img src="/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1454783519,2870582753&fm=26" title="yifachen" height="400px" width="600px" align="right" border="20px" /> </a> </body> </html>
<ol></ol>：有序列表
<ol>定义有序列表
<li>定义列表的开始
reversed属性：规定列表顺序为降序(9，8，7...)
值：reversed
start属性：规定有序列表的起始值
值：number(随意定义数字)
type属性：规定在列表中使用的标记类型
值：1，a，A，i，I(大写的i)
<html> <head> <mate charset='utf-8' /> <title> yifachen </title> </head> <body> <ol> <li>python</li> <li>java</li> <li>C++</li> </ol> <ol reversed="reversed" start="10"> <li>python</li> <li>java</li> <li>c++</li> </ol> <ol type="I"> <li>python</li> <li>java</li> <li>c++</li> </ol> </body> </html>
<ul></ul>：无序列表
可使用css样式
ul:
设置列表样式类型为没有删除列表项标记
设置填充和边距0px（浏览器兼容性）
ul中所有li:
设置图像的URL，并设置它只显示一次（无重复）
您需要的定位图像位置（左0px和上下5px）
用padding-left属性把文本置于列表中
<html> <head> <mate charset='utf-8' /> <style type="text/css"> ul{ list-style-type: none; padding: 0px; margin: 0px;} ul li { background-image: url(/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1454783519,2870582753&fm=26); background-repeat: no-repeat; background-position: 0px 5px; padding-left: 14px; } </style> <title> yifachen </title> </head> <body> <ul> <li>python</li> <li>java</li> <li>c++</li> </ul> </body> </html>
<table></table>：表格标签
<table>标签定义html表格
表格由tr th td组成
tr：元素定义表格行
th：元素定义表头
td：元素定义表格单元
table标签有以下属性：
border属性：定义表格边框的宽度 单位px
cellspacing属性：定义单元格之间的空白 单位px
cellpadding属性：定义边沿与内容之间的空白 单位px
width属性：定义表格宽度
height属性：定义表格高度
tr th td 标签有以下属性：
colspan属性：number（随意定义数字） 定义横跨列数(左右合并)
rowspan属性：number（随意定义数字） 合并横跨行数(上下合并)
快速生成表格 tr*3 按tab
<html> <head> <mate charset='utf-8' /> <title> yifachen </title> </head> <body> <table border="" cellspacing="0px" cellpadding="10px" width="10px" height="10px"> <tr> <th rowspan="2">dcs</th> <th>姓名</th> <!--th*3 按tab 快速生成--> <th>年龄</th> <th>性别</th> <th>语言</th> </tr> <tr> <td>youzi</td> <td>28</td> <td>男</td> <td>python</td> </tr> </table> </body> </html>
<form></form>:表单标签
action属性：规定当提交表单时向何处发送表单数据
method属性：规定请求以get还是post的方式发送
type属性：text为明文 password为密文
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> yifachen </title> </head> <body> <form action="http://www.baidu.com">User name：<br /> <input type="text" name='username' id='usrid'/><br /> Pass word：<br /> <input type="password" id="pwdid" /><br /><br /> <button>提交</button> </form> </body> </html>
<label></label>:input元素定义标签
type属性：定义input标签 等于radio时为单选框 等于checkbox为复选框 等于file时为上传文件
name属性：等于sex时可避免同时选择两个值
checked属性：表示默认选择的值
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> yifachen </title> </head> <body> <form action="http://www.baidu.com" method="post" >User name：<br /> <input type="text" name='username' id='usrid'/><br /> Pass word：<br /> <input type="password" id="pwdid" /><br /><br /> <label><input type="radio" name="sex" />男</label> <label><input type="radio" name="sex" checked=""/>女</label><br /><br /> 你喜欢的游戏是？<br /> <label><input type="checkbox" />LOL</label> <label><input type="checkbox" />PUBG</label> <label><input type="checkbox" checked=""/>DNF</label><br /> <label><input type="file" /></label><br /> <button>提交</button> </form> </body> </html>
<textarea></textarea>:标签定义多行的文本输入控件 文本域
cols属性：传输number类型数据 规定文本域内可见宽度
rows属性：传入number数据类型 规定文本域内可见行数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> yifachen </title> </head> <body> <form action="http://www.baidu.com" method="post" >User name：<br /> <input type="text" name='username' id='usrid'/><br /> Pass word：<br /> <input type="password" id="pwdid" /><br /><br /> <label><input type="radio" name="sex" />男</label> <label><input type="radio" name="sex" checked=""/>女</label><br /><br /> 你喜欢的游戏是？<br /> <label><input type="checkbox" />LOL</label> <label><input type="checkbox" />PUBG</label> <label><input type="checkbox" checked=""/>DNF</label><br /> <label><input type="file" /></label><br /> <textarea name="textarea" rows="5" cols="50" >我是一个文本域</textarea><br /> <button>提交</button> </form> </body> </html>
<select></select>下拉框标签
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> yifachen </title> </head> <body> <form action="http://www.baidu.com" method="post" >User name：<br /> <input type="text" name='username' id='usrid'/><br /> Pass word：<br /> <input type="password" id="pwdid" /><br /><br /> <label><input type="radio" name="sex" />男</label> <label><input type="radio" name="sex" checked=""/>女</label><br /><br /> 你喜欢的游戏是？<br /> <label><input type="checkbox" />LOL</label> <label><input type="checkbox" />PUBG</label> <label><input type="checkbox" checked=""/>DNF</label><br /> <label><input type="file" /></label><br /> <textarea name="textarea" rows="5" cols="50" >我是一个文本域</textarea><br /> <select > <option value="iphone">iphone</option> <option value="andriod">andriod</option> <option value="ios">ios</option> </select><br /> <button>提交</button> </form> </body> </html>
<button></button>标签
type属性 等于submit时为提交 等于reset为重置 等于button时只是单纯的一个可点击的按钮
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> yifachen </title> </head> <body> <form action="http://www.baidu.com" method="get" >User name：<br /> <input type="text" name='username' id='usrid'/><br /> Pass word：<br /> <input type="password" id="pwdid" /><br /><br /> <label><input type="radio" name="sex" />男</label> <label><input type="radio" name="sex" checked=""/>女</label><br /><br /> 你喜欢的游戏是？<br /> <label><input type="checkbox" />LOL</label> <label><input type="checkbox" />PUBG</label> <label><input type="checkbox" checked=""/>DNF</label><br /> <label><input type="file" /></label><br /> <textarea name="textarea" rows="5" cols="50" >我是一个文本域</textarea><br /> <select > <option value="iphone">iphone</option> <option value="andriod">andriod</option> <option value="ios">ios</option> </select><br /> <button type="reset">重置</button> <button type="submit">提交</button> <button type="button">单纯的按钮</button> </form> </body> </html>
