一文搞懂所有HTML知识---你想要知道的HTML知识都在这里了

搜索引擎的优先级

title > description > keyword

charset 编码字符集

gb2312 中国信息处理国家标准码 简体中文编码
gbk 汉字扩展规范 扩大汉字收入 增加繁体中文 增加少数民族文字
utf-8 万国码

DOCTYPE

DOCTYPE html5 的声明方式
document.compatMode 打印兼容性模式
CSS1Compat （写了DOCTYPE）w3c的标准兼容性模式
BackCompat 浏览器的怪异兼容模式

段落缩进两个字符

<p style="text-indent: 2em">我是前端</p>

关于换行

浏览器默认是不认识中文的 认为一个字就是一个字，所以放不下就换行，但是认识英文 知道什么样是一个单词 所以没空格就不会换行 在编辑器内 文本的空格和换行都是文本分隔符 所以多个不会生效

 	<div style="width: 200px; height: 200px; border: 1px solid black">
      我是一个前端工程师我是一个前端工程师我是一个前端工程师我是一个前端工程师我是一个前端工程师我是一个前端工程师我是一个前端工程师
    </div>
    <div style="width: 200px; height: 200px; border: 1px solid black">
      dfasfasfdsdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
    </div>

物理性标签与语义化标签

i 标签与 em 标签都是斜体
b 标签与strong 标签都是加粗强调

p

段落标签
独占一行 块级元素

del

<del>我是delete标签</del>

ins

<ins>我是insert标签</ins>

address

地址标签

<address>地址</address>

div

布局标签 用的最多的标签

实体字符

最常用的< > 与 空格

 < >  

img

行内块元素
图片标签用于向当前页面引入一个图片
用img标签引入外部图片，img标签时一个自结束标签
src属性指定外部图片路径（路径规则与超链接一样）
alt图片描述，默认情况下不会显示，有些浏览器图片无法加载时显示
搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不好会被引擎所收录
width图片宽度（单位是像素）
height图片高度
如果宽度和高度只改了一个，则另一个会等比例缩放
img属于替换元素（块和行内元素之间）
注意：一般情况下在pc端不建议修改图片大小，需多大裁剪多大，而移动端经常缩放

<img src="图片地址" alt="" title="">

a

anchor 标签（锚点）
1.超链接标签
2.打电话
3.发邮件
4.锚点定位

	<a href="tel:138xxxxxxxx"></a>
    发email
    <a href="melto:"></a>
    锚点定位
    <a href="#div"></a>
    协议限定符
    <a href="javascript:;"></a>
    <a href="#"></a>

sub sup上下标签

设置上下角标

	<sup>上标标签</sup>
    <sub>下标签</sub>

ol ul li

ul无序列表 ol有序列表 li表示列表项
ol 上有style 属性可以填 字母/数字/i/I 如果时小写的a 如果超过26个li 后面就是aa,ab…
start 开始值 只有style是数字时才可以
reversed 倒叙 如果start为5 开始倒叙 可以为负数
ul 用的最多
type=“circle|disc|square”

		<ol>
			<li></li>
		</ol>
		<ul type="">
			<li></li>
		</ul>

dl dt dd

dl定义列表
dt表示定义内容 dd表示对内容进行解释说明
列表间可互相嵌套

    <dl>
        <dt>结构</dt>
        <dd>结构表示网页的结构</dd>
    </dl>

table

table 表格标签
caption 标题标签
tr (table row) 表格行标签
th (table header cell) 表头标签
td (table data cell) 单元格标签
aline=“left|center|right” 文字位置
thead 表格的页眉标签
tfoot 表格的页尾标签
tbody 表格的主体标签

table 上可设置的样式
border=“1” 设置边框
cellpadding 单元格内边距
cellspacing 单元格与单元格间距
colspan 合并列
rowspan 列合并

thead tfoot tbody 三者加载顺序 (thead > tfoot > tbody)

    <table border="1" cellpadding="10" cellspacing="10">
      <caption>
        标题标签
      </caption>
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>年龄</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>xx</td>
          <td>18</td>
        </tr>
        <tr>
          <td>2</td>
          <td>xx</td>
          <td rowspan="2">18</td>
        </tr>
        <tr>
          <td>3</td>
          <td>xx</td>
        </tr>
        <tr>
          <td>4</td>
          <td colspan="2">xx</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3" align="center">学生信息</td>
        </tr>
      </tfoot>
    </table>

frameset 框架

frameset是过去用的比较多的布局手段 但是现在逐渐不使用了
frameset与body不能一起使用 所以这里简单了解就好
简单的三栏式布局
rows 分行
cols 分列

<frameset rows="10%,90%">
	<frame  />
	<frameset cols="20%,80%">
		<frame>
		<frame src="http://www.jd.com">
	</frameset>
</frameset>

iframe 内联框架

行内块元素
缺点:
对搜索引擎不友好
滚动条混乱
外层无法监控iframe内的数据加载情况

scrolling=“no|yes|auto” 是否显示内部滚动条
frameborder 边框

<iframe width="100%" scrolling="no" height="1000" src="" frameborder="0"></iframe>

form

块级元素
method=“get|post”
action=“url” 数据提交的地址

	<form action="" action="">
		<input type="text|password">
	</form>

input

基本使用

行内块元素
type=“text|password|submit|reset|button” 文本框|密码框|提交按钮|重置按钮|普通按钮
value=“” 填入输入框默认值
当type为submit时 设置value=“按钮的名称(默认是提交)”

maxlength=“” 最大可输入字符
placeholder=“” 输入提示
input必须加上name 才可以把数据提交到action所填的地址上

readonly=“readonly” 只读 不可输入
disabled=“disabled” 禁用属性 不可输入
readonly 与 disabled 两者的区别
表单提交数据时 disabled 数据不可提交 readonly数据可以提交出去

οnfοcus=“” 获得焦点时
οnblur=“” 失去焦点时

	<p>
		用户名: <input type="text" name="username" value="" maxlength="">
	</p>
	<p>
		密码: <input type="password" name="password" value="" placeholder="">
	</p>
	<p>
		<input type="submit" value="登录">
	</p>
  	<input type="reset">
    <input type="button" value="按钮">

label

行内元素
label 的for属性值与input的id相同 为了提交数据 此时点击label可以使相对应的input获取焦点

<label for="username">用户名</label>
<input type="text" id="username">

单选按钮

checked=“checked”/checked 默认选中
设置name为同一个值 才能完成单选
value=“” 通过value来传递值

<label for="male">男</label>
<input type="text" id="male" name="sex" value="male" checked="checked">
<label for="female">女</label>
<input type="text" id="female" value="female" name="sex">

checkbox

需要有相同的name属性值

    <form action="" method="">
      <h3>你最喜欢的语言</h3>
      <p>
        <input type="checkbox" id="js" name="myFavoriteLen" value="js" />
        <label for="js">javascript</label>
      </p>
      <p>
        <input type="checkbox" id="java" name="myFavoriteLen" value="java" />
        <label for="java">java</label>
      </p>
      <p>
        <input type="checkbox" id="php" name="myFavoriteLen" value="php" />
        <label for="php">php</label>
      </p>
      <input type="submit" />
    </form>

select

option如果有value属性则提交时回去寻找value的值 如果为空 则什么也没有
没有value属性 则会读取option标签的值

		<form action="">
			<select name="lang" id="">
				<option value="js">js</option>
				<option value="java">java</option>
				<option value="php">php</option>
			</select>
			<input type="submit">
		</form>

textarea

cols 可见宽度 8px * cols + 17px
rols 可见行数
textarea标签内不可以换行与空格 否则光标位置会改变

    <form action="">
      <textarea name="" id="text" cols="30" rows="10"></textarea>
      <input type="submit" />
    </form>

fieldset

fieldset打包分组 块级元素
lengend 块级元素

    <fieldset>
      <legend>用户登录</legend>
      <p>
        <label for="username"></label>
        <input type="text" id="username" placeholder="用户名" />
      </p>
      <p>
        <label for="username"></label>
        <input type="password" id="password" placeholder="密码" />
      </p>
    </fieldset>
    <fieldset>
      <legend>用户注册</legend>
      <p>
        <label for="username"></label>
        <input type="text" id="username" placeholder="用户名" />
      </p>
      <p>
        <label for="username"></label>
        <input type="password" id="password" placeholder="密码" />
      </p>
      <p>
        <label for="password1"></label>
        <input type="password" id="password1" placeholder="确认密码" />
      </p>
    </fieldset>
    <p>
      <input type="submit" />
    </p>

audio 与 video

audio标签向我们页面引入一个外部的音频路径
音视频文件引入时，默认情况下时不允许用户自己控制播放与停止属性
controls是否允许用户控制播放
autoplay音频文件是否自动播放
如果设置了autoplay，在我们打开页面时会自动播放
但是大多数浏览器不会自动播放
loop是否循环播放
除了用src来指定外部文件路径，还可用source来指定文件地址
embed用于兼容ie等浏览器

        <audio src="" controls autoplay loop></audio>
        <audio controls>
            <source src=""> 
        </audio>
        <embed src="" type="" width="300" height="100">

        <video controls>
            <source src="">
            <embed src="" type="" width="300" height="100">
        </video>

md5加密

md5 消息摘要算法
特点
1.不可逆加密算法
2.加密后不能解密
3.不需要提供密钥

行内元素 与 块级元素

行内元素
span/strong/em/del/ins/label/a/sub/sup
块级元素
div/hx/p/address/ul/li/dl/dt/dd/table/form/fieldset/legend
行内块元素
input/img/select/textarea/iframe