HTML标签

2018-05-13 本文已影响0人 leiuno

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">

HTML标签

HTML

HTML的版本

声明文档类型

文档结构

猜你喜欢

热点阅读