HTML
HTML（超文本标记语言——HyperText Markup Language）
HTML的版本
1、HTML 4.01
2、XHTML
3、HTML 5
4、HTML 5.1
声明文档类型
目前最推荐的 HTML 5 文档类型声明
<!DOCTYPE html>
作用
（1）告诉浏览器你的语法
（2）可能还会影响到 JS 的功能
文档结构
<html>
<head>
</head>
<body>
</body>
</html>
1、head标签
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的博客</title>
</head>
（1）告诉浏览器用什么方式解码
<meta charset="utf-8">
编辑器里的文件保存后，浏览器去解析，如果浏览器解析的解码方式和当时的编码方式不一样，就会出现乱码
以下两种情况会出现乱码
1.meta里没有设置charset
2.meta里charset设置错了
如何解决乱码
知道保存文件时的编码方式，在head里加上meta，告诉浏览器用什么方式去解码
（2）适配移动页面
<meta name="viewport" content="width=device-width, initial-scale=1.0">
（3）标题
<title>我的博客</title>
2、常用标签
(1) a标签，创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。
<a href="https://baidu.com" title="百度网站" target="_blank">百度</a>
属性
href为锚定义一个超文本链接来源
-
href="#属性",链接到本页的某个部分
-
图片链接
<a href="https://github.com/fe13" title="标题">
<img src="https://avatars0.githubusercontent.com/u/28950695?v=3&s=200" height="100">
</a>
- 下载链接
<a href="https://angular.io/resources/images/logos/angular/angular.svg" download>下载 Angular Logo</a>
- 电话链接
<a href="tel:+8613701234567">+86 13701234567</a>
- Email链接
<a href="mailto:**@**.com">发邮件给我</a>
<a href="mailto:**@**.com?cc=**@**.com">发邮件给我并抄送**</a>
target指定在何处显示链接的资源。
- _self: 当前页面加载，此值是默认的，如果没有指定属性的话。
- _blank: 新窗口打开
- _parent: 加载响应到当前框架的HTML4父框架或当前的HTML5浏览上下文的父浏览上下文。如果没有parent框架或者浏览上下文，此选项的行为方式相同_self。
- _top: IHTML4中：加载的响应成完整的，原来的窗口，取消所有其它frame。HTML5中：加载响应进入顶层浏览上下文（即，浏览上下文，它是当前的一个的祖先，并且没有parent）。如果没有parent框架或者浏览上下文，此选项的行为方式相同_self
（2）iframe标签，表示嵌套的浏览上下文，有效地将另一个HTML页面嵌入到当前页面中。
<iframe src="#" frameborder="0"></iframe>
属性frameborder，iframe默认有一个border，frameborder设为0，去除border
和a标签结合使用
<iframe name=123 src="#" frameborder="0"></iframe>
<a target = 123 href="http://qq.com">qq</a>
<a target = 123 href="http://baidu.com">baidu</a>
(3) figure标签
<figure>
<img src="https://imgsa.baidu.com/baike/c0%3Dbaike180%2C5%2C5%2C180%2C60/sign=cbcb7644c811728b24208470a995a8ab/43a7d933c895d143b7801df676f082025baf0774.jpg"
alt="傍晚的珠海渔女雕像，旁边还有一群游客"
width="400"
height="300">
<figcaption>傍晚的珠海渔女</figcaption>
</figure>
（4）table标签
tr: table row
th: table head
td: table data
<table>
<colgroup>
<col width = 100>
</colgroup>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
（5）video标签
<video controls>
<source src="nba-finals2017-game-1.mp4" type="video/mp4">
<source src="nba-finals2017-game-1.webm" type="video/webm">
<p>你的浏览器不支持 HTML5 视频。</p>
</video>
（6）audio标签
<audio controls>
<source src="viper.mp3" type="audio/mp3">
<source src="viper.ogg" type="audio/ogg">
<p>你的浏览器不支持 HTML5 音频。</p>
</audio>
（7）form标签，用于搜集不同类型的用户输入
<form action="/abc" method="get">
<input type="text" name="username">
<input type="password" name="password">
<button>提交</button>
</form>
1、form一定要有提交按钮，否则无法提交表单信息
2、form 表单里只有一个button,且没有写type，默认为提交按钮
form标签是表单的外壳，主要有4个属性
1.action 表单提交的地址
2.method 提交表单的方法，form标签主要是用来发POST请求的
POST 和 GET
浏览器向服务器传输数据／发送请求的一种方式
GET 向后台发送请求的时候，会将请求数据拼接成key=value的形式，用&连在一起来，拼接在url上
POST url不会发生变化，数据通过浏览器传输给后台
-
表象不同，get把提交的数据url可以看到，post看不到
-
原理不同，get 是拼接 url， post 是放入http 请求体中
-
提交数据量不同，get最多提交1k数据，浏览器的限制。post理论上无限制，受服务器限制
-
get提交的数据在浏览器历史记录中，安全性不好
-
场景不同，get 重在 "要", post 重在"给"
3.target 在何处打开表单
4.enctype
- 输入单行文本
<div class="username">
<label for="username"></label>
<input id="username" type="text" name="username">
</div>
- 输入密码
for="password"自动focus
placeholder="请输入密码"输入框提示
<div class="password">
<label for="password"></label>
<input id="password" type="password" name="password" placeholder="请输入密码">
</div>
- 复选框
<div class="hobby">
<label for="">爱好</label>
<input type="checkbox" name="hobby" value="red">
<input type="checkbox" name="hobby" value="music">
<input type="checkbox" name="hobby" value="study">
</div>
- 单选框
对于单选框和复选框，value属性返回的永远是HTML预设的值，而我们需要获得的实际是用户是否“勾上了”选项，所以应该用checked
<div class="gender">
<label for="">性别</label>
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
</div>
<form class="weekdays">
<label>星期选择
<input type="radio" name="weekday" id="monday" value="1">Monday
<input type="radio" name="weekday" id="tuesday" value="2">Tuesday
<input type="radio" name="weekday" id="friday" value="3">Friday
</label>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
<script>
var mon = document.querySelector("#monday");
var tue = document.querySelector("#tuesday");
var fri = document.querySelector("#friday");
console.log(mon.value); //1
mon.checked; //true or false
</script>
- 文件上传
<div class="file">
<input type="file" name="myfile" accept="image/png">
</div>
- 下拉框
selected 默认值
<div class="select">
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai" selected>上海</option>
<option value="hangzhou">杭州</option>
</select>
</div>
- 多行文本
<div class="textarea">
<textarea name="article" id="" cols="30" rows="10">
冬天来了 ，春天还会远吗
</textarea>
</div>
- type="hidden"
1.暂存信息
2.安全策略
<input type="hidden" name="abc" value="123">
- 另外一些type属性
<input type="button" value="button">
<input type="submit" submit="submit">
<input type="reset" value="reset">
网友评论