html入门：语法、经常使用标签、表格、表单、h5新增标签

时间 2019-11-21

标签 html 入门语法经常使用标签表格表单 h5 新增栏目 HTML 繁體版

原文原文链接

web标准（前端三剑客：html、css、js）php

网页的结构（后缀名字为html的文件），负责网页的内容整理和分类
网页的样式（后缀名字为css文件），负责设置网页的板式，颜色，文字大小
网页的行为（后缀名字为.js的文件），负责网页的动态交互

1 认识html

概念：HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”，主要是经过HTML标签对网页中的文本、图片、声音等内容进行描述。css

说白了HTML就是用尖括号包裹起来的英文单词，浏览器对这个尖括号包裹起来的英文单词有特殊的解释html

如：<strong>加粗</strong>  <h1>大标题</h1>  等等

HTML骨架

HTML有固定的基本格式，就跟咱们书信有基本的格式是同样的前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页的标题</title>
</head>
<body>
  这里写内容
</body>
</html>

自动生成完整版骨架的快捷方式：! => tab键或者 html:5 => tab键web

标签的关系

一、嵌套关系：html标签嵌套head标签浏览器

<html>
<head></head>
</html>

二、并列关系：head标签与body标签并列ide

<head></head>
<body></body>

2 认知标签

2.1 经常使用标签

一、标题标签
<hn>标题内容</hn>   其中n的取值范围是1-6（1的权重最高，6最小）

二、段落标签
<p>段落内容</p>

三、水平线标签
<hr> 单标签，做用是呈现一个水平线

四、换行标签
<br> 单标签，做用是换行

2.2 字体格式化标签

一、加粗字体
<strong>字体加粗</strong> <b>字体加粗</b>

二、倾斜字体 
<em>字体倾斜</em> <i>字体倾斜</i>

三、字体贯穿线，也就是删除线
<del>字体贯穿</del> <s>字体贯穿</s> 

四、字体下划线
<ins>字体下划线</ins> <u>字体下划线</u>

可使用不一样的标签完成功能，如加粗字体标签，可使用strong，也可使用b，但建议使用具备语义的标签，如加粗字体标签：strong。工具

一个是标签语义强，起强调做用。一个是没有语义，没有强调做用。语义好的网页更受SEO的喜欢，在搜索引擎里面的排名会更靠前。oop

SEO优化：
在输入关键字的时候，搜索引擎会罗列不少不少的网页出来，而用户基本习惯都是点前面的网页，不会去点后面的网页，因此若是网页在搜索引擎中的排名更加靠前，那么天然而然会带来更多的用户点击访问。

2.3 标签属性

在使用标签的时候，一个独立的标签比较单一不能完成一些需求，这个时候就能够借助于标签的属性来完成。多个属性之间用空格隔开。布局

<标签 属性名1=“属性值1” 属性值2=“属性值2”> 
 
<!-- 如：<hr color="red"/> -->

2.4 图片标签

<img src="图片的地址" alt="图片的替换文本" title="图片的标题" />

图片标签属性：
一、src 图片的地址
二、alt 图片加载失败后的替换文本
三、title 鼠标移到图片上，显示图片的标题
四、width="100" height="200" （样式属性都会经过CSS实现）

2.5 连接标签

<a href="连接地址" target="连接打开方式"></a>

<!--<a href="http://www.baidu.com" target="_blank">百度一下</a>-->

连接标签属性：
一、href 跳转的连接地址
二、target 连接打开的方式

一、target的取值

_self 默认值，当前窗口覆盖打开连接
_blank 新建窗口打开连接

二、href 跳转地址分类

站外跳转：http://www.baidu.com
站内跳转：本地文件路径
锚点跳转（页面内部跳转）：

<!-- 在须要跳转的标签上添加 id="自定义id名"   如：<p id="myid"></p>
    让a标签的href属性等于以前本身自定义的id名 如：<a href="#自定义的id名字" /> -->

<!-- 跳转到薪水的位置 -->
<a href="#target_salary">个人薪水</a>

<p id="target_salary">10000+</p>

2.6 路径（地址）

一、绝对地址：从盘符或者http://出发去找目标文件的过程...

<!-- http://开头-->
<img src="https://www.baidu.com/img/bd_logo1.png" alt="百度图片">

<!--盘符开头-->
<img src="c:\img\1.png">

二、相对地址：从当前文件出发去找目标文件的过程就称之为相对路径

同级目录：路径直接写目标文件的名称便可
非同级目录：上一级目录（../）下一级目录（文件名/）

<!-- 同级目录 -->
<img src="img.png"/>

<!-- 非同级目录：上一级目录 -->
<img src="../img.png"/>

<!-- 非同级目录：下一级目录 -->
<img src="img/img.png"/>

2.7 列表

2.7.1 列表分类

一、无序列表
列表之间没有顺序，在实际工做中用的比较多。li标签至关于一个容器，能够容纳因此元素。

<ul>
    <li>无序列表1</li>
    <li>无序列表2</li>
    <li><a href="02_test.html">无序列表3</a></li>
</ul>

二、有序列表
列表之间有顺序，在实际工做中用的较少。

<ol>
    <li>有序列表1</li>
    <li>有序列表2</li>
    <li>有序列表3</li>
</ol>

三、自定义列表
能够针对一个列表标题充分解释，特定状况下使用。

<dl>
    <dt>列表标题</dt>
    <dd>列表标题的解释说明</dd>
    <dd>列表标题的解释说明</dd>
</dl>

2.7.2 列表注意事项

一、<ul></ul>或者<ol></ol>中只能嵌套<li></li>，直接在<ul></ul><ol></ol>标签中输入其余标签或者文字的作法是不被容许的。

 二、<li>与</li>之间至关于一个容器，能够容纳全部元素。

 三、<dl></dl>中只能嵌套<dt></dt>和<dd></dd>，直接在<dl></dl>标签中输入其余标签或者文字的作法是不被容许的。

 四、<dd></dd>之间至关于一个容器，能够容纳全部元素。<dt></dt>同样

2.8 注释和特殊字符

2.8.1 注释

浏览器不解析的标签，做用是用来提示开发人员或者便于开发人员理解和阅读。WebStorm工具注释快捷键command + / （MacBook）

<!-- 注释 -->

2.8.2 特殊字符

在一些状况下，咱们须要在页面上显示一些特殊的标识的时候，咱们就须要用到字符实体。

&lt;p&gt;&lt;/p&gt;

<!-- 网页展现以下那内容 -->
<p></p>

3 表格标签

<table>
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年纪</td>
        <td>成绩</td>
    </tr>

    <tr>
        <td>张三</td>
        <td>男</td>
        <td>23</td>
        <td>99</td>
    </tr>

    <tr>
        <td>李四</td>
        <td>男</td>
        <td>30</td>
        <td>88</td>
    </tr>
</table>

一、表格至少有三个基本的标签构成：table 表明一个表格， tr表明行， td表明单元格
二、tr必须嵌套在table标签中，td必须嵌套在tr或者th中
三、有几个单元格就表明有几列

3.1 表格属性

borde 表格的边框（了解）
width 表格的宽度（了解）
cellspacing 单元格与单元格的间距
cellpadding 单元格与单元格内容的间距
align 表格的对齐方式，值如：left、center、right（了解）

3.2 表格的表头标签

在合适的位置将td替换成th便可，th标签相对td来讲更有语义性，而且会将内部的文字加粗且居中

<table border="1" cellspacing="0" cellpadding="10">
     <tr>
         <th>姓名</th>
         <th>性别</th>
         <th>年纪</th>
         <th>成绩</th>
    </tr>
</table>

3.3 表格的结构

thead标签表示表头部分，tbody标签表示表体部分，caption标签表示表格的标题。表格的结构不是必定须要的，可是添加上表格的结构会使表格的语义更明确。

<table border="1" cellspacing="0" cellpadding="10">
    <caption>成绩管理系统</caption>

    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年纪</th>
            <th>成绩</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>23</td>
            <td>89</td>
        </tr>
    </tbody>
</table>

3.4 合并单元格

单元格的合并分为：跨行和跨列合并
一、跨行合并： rowspan 上下合并将rowspan写在上面的单元格上
二、跨列合并： colspan 左右合并将colspan写在左边的单元格上

<table border="1" width="800" cellspacing="0" cellpadding="8" align="center">

    <caption>成绩管理系统</caption>
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年纪</td>
        <td>成绩</td>
    </tr>

    <tr>
        <td>张三</td>
        <td>男</td>
        <td>23</td>
        <td rowspan="2">99</td>
    </tr>

    <tr>
        <td>kerwin</td>
        <td rowspan="2">女</td>
        <td>30</td>
    </tr>

    <tr>
        <td>张三</td>
        <td>23</td>
        <td>89</td>
    </tr>

    <tr>
        <th>备注</th>
        <td colspan="3"></td>
    </tr>

</table>

4 表单标签

做用：收集用户信息发送给后台

三大组成部分：

表单域（将内部包含的表单信息都收集起来发送给后台）
提示文本（提示用户当前表单的输入内容）
表单（真正用来收集用户信息）

4.1 表单的分类

<input type="">

type的取值：

text 单行文本输入框
password 密码框
radio 单选框（在多个里面选择一个）单选框要生效必须具有name属性而且同一种类型的单选框的name取值必须同样
checkbox 复选框（在多个里面选择某几个）
button 普通按钮
file 用户上传控件
submit 提交按钮，收集表单域里面的用户信息提交给后台

补充：一、radio和checkbox 默认选中项须要使用checked属性

二、value属性表明表单里面包含的值

三、表单若是想被提交，都须要写上name属性（目前不涉及数据提交，能够不写；单选框radio因为特殊性，若是不写就会不能有单选的效果，因此单选框）

四、单行文本输入框，使用maxlength属性能够限制输入的最大字符数

4.2 其它表单补充

一、textarea 多行文本输入框

<textarea rows="5" cols="60"></textarea>

rows 默认显示的行数
cols 默认显示的列数，超过指定数字，自动换行

二、select 下拉菜单

<select>
    <option value="上海">上海</option>
    <option value="北京" selected>北京</option>
    <option value="安徽">安徽</option>
</select>

select下拉框的默认选中项使用selected属性

三、label标签会自动关联表单，点文字的时也至关于点了表单，体验更好

<label><input type="radio" name="sex"> 男</label>
<label><input type="radio" name="sex"> 女</label>
<label>用户名：<input type="text"></label>

4.2 表单域

做用：将内部的表单里面的value值收集起来发送给后台

<form action="" method=""></form>

action 提交的后台地址
method 提交的方法，取值：get post

4.3 容器标签 div 和 span

<div>
    我是一个div，我通常用来作模块布局
</div>

<span>
    我是一个span标签，我通常用来包文字
</span>

表单案例：

<form action="demo.php" method="get">
    用户名：<input type="text" name="username" maxlength="10">
    密码：<input type="password" name="password">
    <br>

    性别：<input type="radio" name="sex" value="男" checked="checked">男
    <input type="radio" name="sex" value="女">女
    <br>

    爱好：<input type="checkbox" value="读书" name="hobby"> 读书
    <input type="checkbox" value="打篮球" name="hobby"> 打篮球
    <input type="checkbox" checked="checked" value="旅游" name="hobby"> 旅游
    <br>

    图片上传：<input type="file">
    <br>

    <select name="city">
        <option value="上海">上海</option>
        <option value="北京" selected>北京</option>
        <option value="安徽">安徽</option>
    </select>
    <br>

    请介绍本身：
    <textarea rows="1" cols="2" name="introduce"></textarea>
    <br>

    <input type="button" value="按钮">
    <br>
    <input type="submit">
</form>

5 h5新增的标签及其表单属性

5.1 h5新增的标签

header,nav,section,footer,aside,article

这些新增标签的功能使用div标签都能实现，且使用方式跟div一摸同样，但div标签没有语义性，搜索引擎不知道这个标签内部装的是什么，因此这样的话搜索引擎不喜欢这样的网页。

header 表示header里面包裹的东西是网站的头部区域
nav 表示nav里面包裹的东西是网站的导航
section 表示里面包裹的东西是网页的某一个模块
footet 表示footer标签里面包裹的东西是网页的页脚
aside 表示aside标签里面包裹的东西是网页的侧边栏
article 表示article标签里面包裹的东西是网页的文章页

5.2 h5新增的表单和新属性

一、h5新增的表单

<!--滑块-->
<input type="range">

<!--日期控件-->
<input type="date">

<!--唤醒数字键盘-->
<input type="number">

二、表单新增属性

placeholder 占位文本
autofocus 自动获取焦点
autocomplete 自动补全
required 自动验证表单

请输入用户名：<input type="text" placeholder="请输入用户名">

5.3 多媒体标签

一、视频标签

网页中插入视频有两种方法：

第一种方法：将视频文件上传到第三方网站获取其分享代码放到本身的页面中便可，如上传到优酷视频网站，没有兼容性可是有广告植入。
第二种方法：使用h5新增的video标签，没有广告，可是有兼容性问题，通常运行在手机端。

<video src=""></video>

video标签经常使用的属性：

autoplay 自动播放
controls 播放控件
loop 循环播放

video的格式支持 ogg,mp4,webm 不一样的浏览器支持的格式不同，因此出现了一种兼容写法:前提是准备三种格式的视频文件。

<video autoplay>
    <source src="视频1.ogg">
    <source src="视频1.mp4">
    <source src="视频1.webm">
    <a href="#">你的浏览器不支持video，点击升级吧</a>
</video>

浏览器会从上到下依次去读，在这个过程当中，只要读到本身识别的视频文件就直接播放这个视频文件，而且不会再日后继续读取。实测：目前的主流浏览器对mp4的支持都比较好

二、音频标签
音频标签的使用和视频标签的使用基本一致，兼容性处理。

<audio>
    <source src="音频1.ogg">
    <source src="音频1.mp3">
    <source src="音频1.webm">
    <a href="#">你的浏览器不支持audio，点击升级吧</a>
</audio>

audio标签的经常使用属性 1.autoplay 自动播放 2.controls 播放控件 3.loop 循环播放

知识补充

字符集的设置

字符集的核心点就是若是设置了以什么字符集进行读取，那么在保存的时候也须要设置成对应的字符集

utf-8 收录了全世界全部国家的语言文字
gbk 收录的是汉字

utf-8 > gbk 因此查询来讲的话gbk的查询和存储都小于utf-8 可是如今国际主流都是utf-8，因此为了后期的考虑，都用utf-8