HTML

Hyper Text Markup Language 超文本标记语言
生成WWW网页文件的语言,用于生成超文本文档(可以加入任何元素的链接)

HTML 负责整体的框架以及内容部分，HTML5可以负责一部分的数据验证
CSS 负责美化网页，部分特效
JS 负责数据验证、数据交互特效

基于标准通用标记语言SGML的应用

静态网页

网页文件中没有程序代码，只有HTML，后缀为.html .htm .shtml .xml
一旦生成，内容就不会变化

动态网页

内容是动态的，文件里包含程序代码，动态产生内容 .asp .aspx .cgi .php .perl .jsp

服务器代码（HTML, JSP, JAVA, 数据库）
IP - 域名 baidu.com 网络服务商DNS服务器（把域名和IP地址一一对应）

静态网页基本结构

文档类型声明，必须放在文档的最顶部，告知浏览器HTML版本网页文件格式，表示是HTML文档文档头，可加入网页标题、作者信息、版本信息、js和css，文档头的信息不会出现在浏览器的内容区文档标题 ### HTML标签和格式

<p style = "color:blue;"></p>
空元素
<br />
<input type = "submit" />
<img />

HTML常用标签

注释

元数据标签

meta-->指定当前网页的字符集

字符集：字符的集合常见字符集（GBK/UTF-8）
区别：
GBK（GB2312）存储的字符比较少，仅仅存储了汉字和一些常用外文，体积较小
UTF-8 存储世界上所有的文字，体积较大

HTML头部的辅助性标签，用于定义页面的说明，关键字，修改日期和其他数据

告知搜索引擎SEO你的网页的关键字

<meta name = "Keywords" content = "HTML入门" /> 
<meta name = "Dexcription" content = "HTML" />

移动端相关

<meta name = "viewport" content = "width=device-width.." />

2s之后跳转到url指定的页面

<meta http-equiv="refresh" content="2;URL=http://www.baidu.com" />

指定双核浏览器的渲染方式

<meta name = "render" content="webkit" />

浏览器的四大内核（渲染引擎）
作用：相当于一个解释器，解释网页的语法并且显示出来
Trident
Gecko
Webkit
Blink

布局标签

div标签定义HTML文档中的一分隔区块或内容的一个区域部分

文本标签

<p> 段落标签
<h1>~<h6> 一级~六级标题（自动换行，单独占一行）
<b> <strong> 加粗 后者加强语气 语义化
<em> <i> 斜体 后者有强调作用
<u> 下划线
<s> <del> 删除线 后者语义化标签 表示删除
<br /> 换行 手动换行
<hr />

超链接标签

<a href = " " target = "_blank">这是一个超链接</a>

target属性：
_blank 在新窗口中打开被链接文档
_self 默认，在相同的框架中打开被链接文档
_parent 在父框架集中打开被链接文档
_top 在整个窗口中打开被链接文档
framename 在指定的框架中打开被链接文档

a标签的支持协议
http 浏览器
tencent QQ
magnet 磁力下载
服务器不能运行文件协议 file://
锚点如：

<h2 id = "p1">我是p1</h2>
<a href = "#p1" >跳转到p1</a>

假链接
占位留至项目后期改为真链接
#：颜色会改变，自动跳转到页面最上方
Javascript：

多媒体标签

图片标签

<img src = "", alt = ""， title = ""， width ="", height = "">

alt：当图片不存在时的文字提示
title：当鼠标放置到图片上时出现的文字提示
width/height：高度和宽度，单位为px，默认值是auto（防止拉伸）
另有src = data:... -->
src属性不仅可以指定图片的路径，还可以指定图片的base64格式的字符串，一般用于小图片
（base64的图片可以减少页面请求次数，不依赖于外链）

绝对路径和相对路径

路径是计算出来额，不会随着环境变化而改变

绝对路径：指完整的网址

相对路径：指目标相对于当前文件的路径如 ./img/pic.jpg
./ 指文件本身所在的目录（可省略）
../ 指文件所在的父级目录（可以叠加）
/ 指文件所在的根目录，无论哪个层级都可以使用/单斜杠直接访问根目录

小summary
相对路径的三种查找方式：
同级查找：直接写文件名称即可找到：例如src=”pic.jpg”
向下查找：写文件夹名称/文件名称：例如：sec=”img/pic.jpg”
向上查找：通过../表示向上一级，例如：src=”../pic.jpg”

相对路径的要求：
1.相对路径不能跨盘符查找；
2.相对路径的过程不能有中文；

序列号标签

有序列表

<ol><li>

无序列表

<ul><li>

定义列表

<dl><dt><dd>

表格标签

table tr td thead tbody tfoot
th --> 自动加粗
属性：
border 设置表格边框，0无边框，1有边框
cellspacing 表格单元格之间的间距
cellpadding 表格单元格内的内边距（文字和边框的距离）

tr 表示一行
th 表头的单元格（自带居中和加粗效果）
td 单元格

thead
tbody
tfoot
作用：针对大表格的分段显示 + 打印到多张纸
浏览器加载的过程中，会等所有代码加载完才会显示表格所有内容

制作细线表格
原理：设置两次背景颜色（并不是由border设置出来的，而是单元格之间露出来的背景颜色）
步骤：
1.设置table的背景颜色（边框颜色）；bgcolor='red’
2.设置td的背景颜色，设置tr则整行变色；
3.设置cellspacing=”1”,作用是设置边框的粗细；

实现跨行跨列的单元格
栗子：占两列两行

<tr rowspan = "2"><td colspan = "2"></td></tr>

HTML框架

frameset框架
注意：frameset不能和body同时存在

<frameset>
        <frame src = "http://www.baidu.com">
</frameset>

钓鱼网站惯用做法！！Response header 中加了数据后框架就不能嵌套某个网址

可以嵌套使用，cols的剩余页面可以用*号自动计算

cols/rows属性：分配多个页面的占比

<frameset cols = "20%, 80%">
        <frame src = "http://www.baidu.com">
         <frame src = "http://www.163.com">
</frameset>

src属性：框架文档的URL name属性：框架名称 noresize属性：是否可以调整大小 scrolling：是否显示滚动条

内联框架（iframe框架）
用于在网页内显示网页，可以和body标签同时使用，且不依赖于framset

<iframe src = "http://www.baidu.com" width = "200px" height = "200px">

src：指定框架文档的URL
width/height：指定框架宽度/高度
name：指定框架名称
frameborder：指定框架边框

表单标签

多用于注册登录投票设置界面

<form>

action：服务器提交页面的地址或者获取数据的地址（要结合method）
method： get/post
target：在什么地方打开url

<input>

type属性

test 文本域

password 密码域

radio 单选框

    <input type="radio" name="sex" value="0" checked="checked" />男
    <input type="radio" name="sex" value="1" />女

特殊按钮

<input type="submit" value="提交" />
<input type="reset" value="重置" />
<input type="image" src="" width="" />

hidden 隐藏域

<input type="hidden" name="token" value="123456" />

不让用户看见或更改 -->安全处理

checkbox 复选框（更改value可在请求过程页面中查看）
想使得点字也选择上该选项的处理方式，直接来两段代码
方法一

    <div>
        兴趣爱好：
        <input type="checkbox" name="like" value="1" id="like1" />
        <label for="like1">
            JAVA
        </label>
     </div>

方法二

<label>
    <input type="checkbox" name="like" value="2" />JAVA
</label>

注意：、
1.表单元素的name属性，指示的是提交到服务器的数据的名字，所以不可以缺少
disabled属性设置为灰色不可编辑状态 --> 就不会提交该项数据到服务器

2.id属性是唯一标识符
3.value属性不建议使用汉字（按钮类型的只是按钮上显示的文字，问题不大）

数据传输方式
get：用来从服务器上获取数据将表单数据按照xxx=xxx的形式（name = value）添加到url里
post：用来向服务器提交数据不会更改url

注意：
隐私数据不能用get方式！
get传输的数据量小，url有长度限制（IE 2083个字符限制）

大大大文本域！

<textarea rows="" clos=""></textarea>

下拉选项

<select name="">
    <option value="1" selected="selected"></option>
 </select>

html常用字符实体

空格
< 小于号
> 大于号
& 和号&
" 引号"
' 单引号'（IE不支持）
© 版权
® 注册商标

HTML5

新标准 W3C
主要目的互联网语义化 --> 更好被人类和机器阅读

HTML部分特征：舍弃了部分的html元素
（如

<u>

新增语法特征：
语义特征
本地存储特征
网页多媒体特性
智能表单
地理定位
多线程

语义化标签

title 几个与页面密切相关的关键字

mark 高亮显示

<mark>我会高亮</mark>

cite 包含对文献的引用，显示效果会带有一点斜体

 <img ...>
 <cite>对图片的说明</cite>

cite 属性内放引用自哪个地方

blockquote 长文本引用，有内容自动缩进

<blockquote cite="https://www.."></blockquote>

code 单行代码

pre 多行代码

kbd

del 定义被删除的文字

time

 <time>2019年10月6日</time>
 <time datetime="2019年11月11日">双十一</time>

abbr

progress 滚动条（在不同浏览器里显示效果不一样，IE直接就不支持）

 <progress max="100" value=""></progress>

max表示滚动的最大值，value表示在该点停留在哪个位置

IE：

<progress max="100" value="">您的浏览器不支持该标签</progress>

meter （类似滚动条）数据范围标量

<meter min="0" max="100" low="40" high="80" optimum="20" value="20"></meter>

low / high 表示界定值
optimum 最优值，小于low时表示越小越好
value 相对于optimum会有蓝、黄、红的界定显示

HTML新增主题结构标签

定义文档或者文档的部分区域的页眉，作为介绍内容或者导航链接的容器

搞一个头头的小组合

<header>
    <hgroup>
        <h1></h1>
    </hgroup>
 </header>

描述一个含有多个超链接的区域，该区域包含跳转到其他页面或页面内部其他部分的链接列表
再来一个小全套

<nav>
    <ul>
        <li></li>
        <li></li>
    </ul>
 </nav>

定义文档的主要内容，该内容在文档中应当是独一无二的

元素表示文档、页面、应用或网站中的独立结构，是可以独立分配的、可复用的结构

元素表示一个和其余页面内容几乎无关的部分

定义最近一个张杰内容或者根节点元素的页脚

表示文档中的一个区域（或节）

一个小区别： article比section更具有独立性和完整性

（弄好插件之后会补图的呜呜呜）

HTML5智能表单-新增input类型

<div>邮箱
    <input type="email" name="email"    
    pattern="^\w{6,12}@\w{2,6}[.]\w{2,6}$"
    title="请输入正确的邮箱地址" 
    required="required"/>
 </div>

url

<div>
    URL：<input type="url" name="url" />
</div>

number
会出现一个上下箭头
step默认是1

<div>
    年龄：<input type="number" name="age" min="0" max="100"  step="1"/>
</div>

date
日期：出现一个小日历

<div>出生日期 
    <input type="date" name="birthday" />
</div>

datetime-local
年月日之外还可以设置时间

 <div>出生日期
    <input type="datetime-local" name="date" />
</div>

search

 <div>搜索关键字
    <input type="search" name="date" />
</div>

range

<div>
    透明度（滑块）
    <input type="range" name="opt" min="0" max="100" value="75" />
</div>

color
对十六进制的支持比较好

<div>
    颜色
    <input type="color" name="color" value="#838383" />
</div>

HTML5新增属性和标签

autocomplete
有记录的智能提示

placeholdedr
提示用语

<form action="" method="psot" autocomplete="on">
   <input type="email" id="" value="" placeholdedr="请输入邮箱" />
    
   <input type="submit" value="提交" />
</form>

HTML5新增表单元素

datalist
会有提示，根据首字母还会更新提示

<input type="text" name="os" id="os" list="oslist" />
<datalist id="oslist">
    <option value="Linux'></option>
    <option value="Windows"></option>
</datalist>

keygen（前端不安全，目前废弃）
用于生产密钥对

output （qqgg）
用于不同类型的输出

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
    <input type="range" id="a" value="50">100 +
    <input type="number" id="b" value="50">=
    <output name="x" for="a b">100</output>
</form>

canvas画布 用于图形的绘制结合JavaScript 绘图api完成

audio
支持mp3、wav、ogg

<audio src="" controls="controls" autoplay="autoplay" loop="loop" preload="metadata">当前浏览器不支持</audio>

video
支持ogg、mp4、webm、flash、swf

标签属性
src：需要播放的视频地址
autoplay：是否需要自动播放视频;
controls：是否需要显示控制条;
poster：视频没播放时显示占位图片;
loop：（用于制作广告视频）视频播放完毕之后循环播放（不可以控制）;
preload：预加载视频，但是需要注意preload和autoplay相冲，若设置了autoplay属性,该属性失效;
muted：静音
width/height：和img标签一样;

<video width="800" height="" controls="controls" autoplay="autoplay" muted="muted">
    <source src="" type="video/mp4"></source>
    <source src="" type="video/ogg"></source>
    <source src="" type="video/webm"></source>
    <object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
        <param name="movie" value="myvideo.sef" />
        <param name="flashvars"  value="autostart=true&amp;file=myvideo.swf" />
    </object>
</video>