HTML5(第一篇)

Posted 2020-07-28 hello！world！

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5(第一篇)相关的知识，希望对你有一定的参考价值。

html5 是下一代的 HTML。

什么是 HTML5？

HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。

HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。

HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

HTML5 是如何起步的？

HTML5 是 W3C 与 WHATWG 合作的结果。

编者注：W3C 指 World Wide Web Consortium，万维网联盟。

编者注：WHATWG 指 Web Hypertext Application Technology Working Group。

WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。

为 HTML5 建立的一些规则：

新特性应该基于 HTML、CSS、DOM 以及 javascript。
减少对外部插件的需求（比如 Flash）
更优秀的错误处理
更多取代脚本的标记
HTML5 应该独立于设备
开发进程应对公众透明

新特性

HTML5 中的一些有趣的新特性：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

浏览器支持

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

这一章我们说一下 HTML 是什么？

htyper text markup language 即超文本标记语言

超文本: 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

标记语言: 标记（标签）构成的语言.

网页==HTML文档，由浏览器解析，用来展示的

静态网页：静态的资源，如xxx.html

动态网页：html代码是由某种开发语言根据用户请求动态生成的

html文档树形结构图

什么是标签:

是由一对尖括号包裹的单词构成例如: <html> *所有标签中的单词不可能以数字开头.
标签不区分大小写.<html> 和 <HTML>. 推荐使用小写.
标签分为两部分: 开始标签<a> 和结束标签</a>. 两个标签之间的部分我们叫做标签体.
有些标签功能比较简单.使用一个标签即可.这种标签叫做自闭和标签.例如: <br/> <hr/> <input /> <img />
标签可以嵌套.但是不能交叉嵌套. <a><b></a></b>

标签的属性:

通常是以键值对形式出现的. 例如 name="alex"
属性只能出现在开始标签或自闭和标签中.
属性名字全部小写. *属性值必须使用双引号或单引号包裹例如 name="alex"
如果属性值和属性名完全一样.直接写属性名即可. 例如 readonly

本章内容：

简介

HTML定义
标签定义和属性
HTML5基本结构
HTML5字符集

<head>标签

<title>
<base/>
<link/>（rel、href、type）
<meta/>（http-equiv、name、content）

<body>标签

块级标签 & 内联标签
基本标签（<h1>~<h6>、<p>、<b> <strong>、<strike>、<u>、<em> <i>、<sup>、<sub>、<br>、<hr>、<div>、<span>）
特殊符号（>、<、 、"、©...）
<a> 超链接标签(锚标签)（href、target、name）
<img> 图形标签（src、title、alt、width、height、align）
列表标签（<ul>、<ol>、<li>、<dl>、<dt>、<dd>）
<table> 表格标签（<table> 、<caption> 、<tr>、<th>、<td>、<thead>、<tbody>、rowspan、colspan）
<from> 表单标签（action、method、enctype、<input>、<textarea>、<select>、<label>、<fieldset>）

<!DOCTYPE html>标签

head标签：

<meta>meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

1 name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

2 http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content， content 中的内容其实就是各个参数的变量值。

body标签：

一基本标签

<hn>: n的取值范围是1~6; 从大到小. 用来表示标题.

<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.

<b> <strong>: 加粗标签.

<strike>: 为文字加上一条中线.

<em>: 文字变成斜体.

<u>: 文字下方加下划线.

<sup>和<sub>: 上角标和下角表.

<br>:换行.

<hr>:水平线

<div>

　　　　块级标签。块级标签常用于布局，行级标签常用语显示内容。

　　 div的显示通常使用id或class来标识。id为唯一的标签标识，class为标签的类标识。

　　 div的大小是由内容来决定的，默认情况下，高度由内容的高度决定，宽度适应屏幕。

　　可以容纳其他元素，是一个容器。

<span>

style="background-color: aqua" 设置背景颜色
text-index：2em 设置开头空格几行

<body>
<a href="#ooo" style="color: aqua">第一章</a>
<a href="#ket">第二章</a>
    <h1 id="alex">hello</h1>
    <p>mode1</p>
    我是<b>d标签</b>
    <strike>孙其虎</strike>
    <em>哈哈</em>
    <hr>
    C<sup>5</sup>
    D<sub>9</sub>
<table>sdsdsd</table>
<a id="ket">sdfsdf</a>
<div id="ooo">哈UN勾引</div>
<a href="http://www.baidu.com" target="_blank">laiba</a>
<img src="123.jpg" alt="跑了！！！" title="真的是美女" width="300" height="500">
　　<--先创建一个本地图片-->

</body>

块级标签和内联标签

块级标签：<p><h1><table><ol><ul><form><div>

内联标签：<a><input><img><sub><sup><textarea><span>

（块） block元素的特点
① 总是在新行上开始；
② 高度，行高以及外边距和内边距都可控制；
③ 宽度缺省是它的容器的100%，除非设定一个宽度。
④ 它可以容纳内联元素和其他块元素

（内联） inline元素的特点
① 和其他元素都在一行上；
② 高，行高及外边距和内边距不可改变；
③ 宽度就是它的文字或图片的宽度，不可改变
④ 内联元素只能容纳文本或者其他内联元素

对行内元素，需要注意如下
设置宽度width 无效。
设置高度height 无效，可以通过line-height来设置。
设置margin 只有左右margin有效，上下无效。
设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。

特殊字符：

< >

　　&gt；<

　　&quot；空格

　　©引号

　　®版权符号

特殊符号    符号码
"    &quot ;
&    &amp ;
<    &lt ;
>    &gt ;
©   &copy ;
®   &reg ;
±   &plusmn ;
×   &times ;
§   &sect ;
¢   &cent ;
¥   &yen ;
·   &middot ;
    &euro ;
£   &pound ;
™   &trade ;

　　http://www.sjyhome.com/html/html-special-characters.html

二图形标签: <img> :

重要属性有：src、title、alt、width、height、align。

src: 要显示图片的路径.

alt: 图片没有加载成功时的提示.

title: 鼠标悬浮时的提示信息.

width: 图片的宽

height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

align 图片周围文字的垂直对齐情况（过时了）。常用的属性值有：top（与图片的顶部对齐）、middle（与图片的中部对齐）、bottom（默认，与图片的底部对齐）。

<img src="pp.jpg" alt="图片张腿跑咯！！" title="大美女哈" width="270" height="486">

三超链接标签(锚标签)<a>:

重要属性有三个：href、target、name

　　　　href 超链接地址：可以是Web上任意资源，包括图片，网页，样式，脚本文件等。href="#"时，表示被链接页面就是当前页面。

　　　　target 文档打开时要显示的目标位置，属性值一般有：_blank（新窗口中打开）、_self（默认，在超链接所在的容器中打开）、_parent（在超链接的父容器中打开）、_top（整个容器中打开）、name（框架名称）。

　　　　name 锚记名称。作用：跳转到文档的某个地方。返回首页

# 跳转网页

<a href="http://cnblogs.com/pythonxiaohu" target="_blank">huhu Blogs</a>

# 跳转锚记书签名称

<a name="top"><h3>Top！</h3></a>

<div style="height: 800px"></div>

<a href="#top">top</a>

# http://shang.qq.com/v3/widget.html

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=875220171&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:875220171:51" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>

链接QQ案例

<a href="tencent://message/?uin=875220171" target="_blank"><img style="border:0px;" src=http://wpa.qq.com/pa?p=1:707321921:13></a>

# 更多图片地址如下：
# http://wpa.qq.com/pa?p=1:707321921:1
# http://wpa.qq.com/pa?p=1:707321921:2
# http://wpa.qq.com/pa?p=1:707321921:3
# http://wpa.qq.com/pa?p=1:707321921:4
# http://wpa.qq.com/pa?p=1:707321921:5
# http://wpa.qq.com/pa?p=1:707321921:6
# http://wpa.qq.com/pa?p=1:707321921:7
# http://wpa.qq.com/pa?p=1:707321921:8
# http://wpa.qq.com/pa?p=1:707321921:9
# http://wpa.qq.com/pa?p=1:707321921:10
# http://wpa.qq.com/pa?p=1:707321921:11
# http://wpa.qq.com/pa?p=1:707321921:12
# http://wpa.qq.com/pa?p=1:707321921:13

QQ案例（二）

四列表标签：

<ul>: 无序列表

<ol>:有序列表

<li>:列表中的每一项.

<dl> 定义列表

<dt> 列表标题

<dd> 列表项

<ol>
    <li>周杰伦</li>
    <li>张杰</li>
    <li>李易峰</li>
</ol>
<ul>
    <li>林志玲</li>
    <li>刘亦菲</li>
    <li>杨幂</li>
</ul>

<dl>
    <dt>自定义列表</dt>
    <dd>hello</dd>
    <dd>python</dd>
</dl>

五表格标签: <table>:

border: 表格边框.

cellpadding: 内边距

cellspacing: 外边距.

width: 像素百分比.（最好通过css来设置长宽）

HTML 表格有两类单元格：

表头单元 - 包含头部信息（由 th 元素创建）
标准单元 - 包含数据（由 td 元素创建）

rowspan: 单元格竖跨多少行

colspan: 单元格横跨多少列（即合并单元格）

<th>: table header <tbody>(不常用): 为表格进行分区.

<table style="color: aqua" border="10" cellpadding="10" cellspacing="1" width="150">
            <thead>
                <tr>
                    <th rowspan="2">Month</th>
                    <th>Savings</th>
                    <th >Chro</th>
                    <th>Server</th>
                </tr>
            </thead>
                <tr>
                    <td>Sum</td>
                    <td>$180</td>
                    <td>Sum</td>
                    <td>$180</td>
                </tr>
                <tr>
                    <td>Sum1</td>
                    <td>$1800</td>
                    <td>Sum2</td>
                    <td rowspan="2">$18</td>
                </tr>
                <tr>
                    <td colspan="2">Sun</td>
                    <!--<td>$11</td>-->
                    <td>Sk</td>
                    <!--<td>$177</td>-->
                </tr>

六表单标签（django）<form>:

表单用于向服务器传输数据。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含textarea、select、fieldset和 label 元素。

1.表单属性

　　HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中.

action: 表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web

method: 表单的提交方式 post/get 默认取值就是 get（信封）

get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.

post:1.提交的键值对不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.

get/post是常见的两种请求方式.

2.表单元素

<input> type: text 文本输入框

password 密码输入框

radio 单选框

　　　　　　　　 name（将name的值设置为相同值，才表示一组数据，才能实现单选功能）

　　　　value（必须要写，提交到服务器的key值，实际开发过程中value一般是编号）

　　　　checked（是否被选中的状态）

checkbox 多选框

　　　　　　　　 name（名字一定要一样一样的，才表示是一组数据，添加到同一value值列表提交到服务器）

　　　　 value（必须要写，提交到服务器的key值，实际开发过程中value一般是编号）

　　　　 checked（是否被选中的状态）

submit 提交按钮

button 按钮(需要配合js使用.) button和submit的区别？

file 提交文件：form表单需要加上属性enctype="multipart/form-data"

　　　　reset 重置按钮。清空表单的输入，恢复到表单默认的状态。

　　　　image 图片按钮，用来提交表单，与submit是一样的效果。

　　src（图片路径）

　　　　color 颜色标签。value指定颜色值（采用#十六进制数表示）。

　　　　date 日期。value值指定默认的日期，格式为****-**-**（年月日）。

　　　　number 数字向上或者向下滑动。可以填数字然后向上或者向下选择不同的值。

　　　　range 滑动标签。min（指定最小值）、max（指定最大值）、value（指定当前默认值）。

　　　　week 每年的周数。value指定哪一年第几周，格式为2016-W25（2016年第25周）。

　　　　<textarea> 文本域标签。默认表现形式是可以输入很多行文本的文本框。

　　　　　name （表单提交项的key）

　　　　　　　　cols（设置文本域宽度）

　　　　　rows（设置文本域高度，即行数

　　　　<select> 下拉框标签。使用时要结合<option>子标签一起使用。

　　　　　　 name:表单提交项的key

　　　　　　size：选项个数

　　　　　　 multiple：多选

　　　　　　<option> 下拉选中的每一项

- - - 　value（表单提交项的值）
    - 　　selected（selected下拉选默认被选中）

　　　　　　<optgroup>为每一项加上分组

name: 表单提交项的键.注意和id属性的区别：name属性是和服务器通信时使用的名称；而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的。

value: 表单提交项的值.

对于不同的输入类型，value 属性的用法也不同：

　　　　type="button", "reset", "submit" - 定义按钮上的显示的文本

　　　　type="text", "password", "hidden" - 定义输入字段的初始值

　　　　type="checkbox", "radio", "image" - 定义与输入相关联的值

checked: radio 和 checkbox 默认被选中

readonly: 只读. text 和 password

disabled: 对所用input都好使.

<fieldset> 对表单中的相关元素进行分组

<fieldset>
    <legend>温馨提示</legend>
    <div align="middle">建议敲一遍会更好奥 ==</div>
</fieldset>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text</title>
    <link rel="icon" href="wx.png">
    <meta http-equiv="Refresh" content="50">
    <meta http-equiv="Refresh" content="1000;URL=https://www.baidu.com"   >

</head>
<body>
<div style="background-color: aqua">
    <div>
        <h1 style="color: black;font-size: 45px;font-family: 华文彩云;text-align: center">欢迎来到晓元空间！！！</h1>
        <p><a href="#110" style="color: fuchsia;font-size: 30px;">跳转搜索引擎</a></p>
        <img src="1.JPG" alt="图片去哪了" height="150" width="100" title="美女">
        <img src="2.JPG" alt="图片去哪了" height="150" width="100" title="美女">
        <img src="3.JPG" alt="图片去哪了" height="150" width="100" title="美女">
        <img src="4.JPG" alt="图片去哪了" height="150" width="100" title="美女">
        <img src="5.JPG" alt="图片去哪了" height="150" width="100" title="美女">
        <img src="6.JPG" alt="图片去哪了" height="150" width="100" title="美女">
        <img src="7.JPG" alt="图片去哪了" height="150" width="100" title="美女">
        <img src="8.JPG" alt="图片去哪了" height="150" width="100" title="美女">
        <img src="9.JPG" alt="图片去哪了" height="150" width="100" title="美女">
        <img src="10.JPG" alt="图片去哪了" height="150" width="100" title="美女">
        <p style="font-size: 60px"><samp style="color: crimson">无</samp><samp style="color:seagreen">羽</samp><samp style="color: blue">伦</samp><samp style="color: chartreuse">比</samp></p>

        <p style="color: aqua">水是什么:H<sub>2</sub>O</p>
        <p style="color: blueviolet">请问：5<sup>100</sup>是多少？</p>
    </div>
    <table style="text-align: center" border="10" cellspacing="1" cellpadding="20" width="1000">
        <thead style="color: crimson">
            <tr>
                <th>帅哥</th>
                <th>美女</th>
                <th>等于</th>
            </tr>
        </thead>
        <thead style="color: sienna">
            <tr>
                <td>孙其虎</td>
                <td>周杰乱</td>
                <td>男神</td>
            </tr>
        </thead>
        <thead style="color: cornflowerblue">
            <tr>
                <td>魏良平</td>
                <td>刘亦菲</td>
                <td>女神</td>
            </tr>

        </thead>

    </table>
    <ol>
        <li>周杰伦</li>
        <li>张杰</li>
        <li>李易峰</li>
    </ol>
    <ul>
        <li>孙</li>
        <li>梁</li>
        <li>王</li>
    </ul>

    <dl>
        <dt>自定义列表</dt>
        <dd>hello</dd>
        <dd>python</dd>
    </dl>

<form action="http://10.1.1.1:8080" method="post" enctype="multipart/form-data">
    <p>姓名<input type="text" name="1" value="孙其虎" ></p>
    <p>密码<input type="password" name="2"></p>
    <p><samp style="color: darkorange">性别选择</samp></p>
    <p>男<input type="radio" name="1"></p>
    <p>女<input type="radio" name="1"></p>
    <div style="color: aqua">选择爱好</div>
    <p>足球<input type="checkbox" name="1"></p>
    <p>乒乓求<input type="checkbox" name="2"></p>
    <p>篮球<input type="checkbox" name="3"></p>
    <select name="language" size="2">
        <optgroup label="河北省" style="color: brown">
            <option>石家庄</option>
            <option>邯郸 </option>
            <option>廊坊</option>
        </optgroup>
        <optgroup label="河南省" style="color: aqua">
            <option>赤壁</option>
            <option>驻马店</option>
            <option>平顶山</option>
        </optgroup>

        </select>
        <p><input type="submit" value="提交"></p>
        <p><textarea name="qq">不能说的秘密</textarea></p>
    </form>
    <p><a id="110" href="http://www.baidu.com" target="_blank">点击进入百度</a></p>
    <form action="https://www.sogou.com/web" method="post"前端就业课 第一阶段HTML5 零基础到实战JavaScript基础一篇入门
 前端就业课 第一阶段HTML5 零基础到实战一篇文CSS基础入门
 学习HTML5这一篇就够了
 HTML5 初步了解
 html5新增标签
 3.html5的文本元素