HTML5学习笔记-前端开发

HTML5简介HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言: HyperText Markup Language HTML 不是一种编程语言，而是一种标记语言标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 HT...

HTML5简介

HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的，比如和
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签

自结束标签

标签一般成对出现，但也存在一些自结束标签。

<img>或<img />
<input>或<input />


注释
<!--HTML的注释，网页中不会显示，只在源码显示。注释不能嵌套。-->

标签中的属性

属性用来设置标签中的内容如何显示
 标签的作用就像是容器，它们告诉你起始标签和结束标签之间的内容的结构信息。
 标签内的附加信息,放在标签内 属性名称=属性值。
 属性可以在元素中添加附加信息，一般描述于开始标签，总是以名值对的形式出现，如name=“value”。
 属性值应该始终被包括在引号内。当属性值本身就含有双引号时，必须使用单引号。

<html>
	<head>
		<title>标签的属性</title>
	</head>
	
	<body>
	<!--
		在开始标签和自结束标签中可以设置属性；
		属性是一个名值对；
		属性用来设置标签中的内容如何显示。
		
		属性和标签名或其他属性应该使用空格隔开
		
		属性名不能瞎写，根据文档中规定编写
			有些有属性值，有些没有；
			如果有属性值应该用引号引起来，全单引号或全双引号。
	-->
		<h1>这是我的<font color='red' size='3'>第三个</font>网页！</h1>
	</body>
</html>


文档声明

HTML文档通常以类型声明开始，该声明将帮助浏览器确定其尝试解析和显示的HTML文档类型。

<!DOCTYPE html>

关于进制
字符编码

编码：字符转换为二进制码
 解码：二进制码转换为字符
 遵循规则：字符集（charset）
 乱码问题：编码和解码采用的字符集不同时出现的问题。

文档的使用
实体

标签好解决，加空格
 在html中有些时候，不能直接书写一些特殊字符，比如，字母两侧的大于号和小于号
 在网页中编写的多个空格默认情况下会被浏览器解析为一个空格
 如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体（转义字符）


语法：&实体的名字;

&nbsp; 空格
&gt; 大于号
&lt; 小于号
&copy; 版权符号
更多实体符号可以百度，或者在w3cschool中查找

<p>今天天气&nbsp;&nbsp;&nbsp;真好</p>
<p>a&gt;b&lt;c</p>
<p>版权符号&copy;</p>

meta标签
meta标签

meta标签是 HTML 语言头部的一个辅助性标签，我们可以定义页面编码语言、搜索引擎优化、自动刷新并指向新的页面、控制页面缓冲、响应式视窗等。
 设置网页的元数据，元数据不给用户看。

常用属性：

name指定数据的名称
 charset指定网页的字符集
 content指定数据的内容
 keywords表示网站的关键字，可以同时指定多个关键字，关键字间使用“，”隔开
 description用于指定网站的描述，网站的描述会显示在搜索引擎的搜索结果中
 title标签的内容会作为搜索结果的超链接上的文字显示
 http-equiv=“refresh” content=“秒;url=略” 将页面重定向到另一个网站

<meta name="keywords" content="HTML,CSS">
<meta name="description" content="HTML,CSS">
<meta http-equiv="refresh" content="30;url="https:www.baidu.com">

结构化标签（布局标签）
结构化标签

很多html标签也具有语义的意义，也就是说元素本身传达了关于标签所包含内容类型的一些信息。

header

header标签定义页面的页眉信息。
 比如一些网上商城的顶部logo信息：

<body>
    <header id="header" class="" style="background-color: orange;">
        <div style="float:left">
            Logo
        </div>
        <div style="float:right">
            <span>登录</span>
            <span>登录</span>
        </div>
        <div style="clear:both"></div>
    </header><!-- /header -->
</body>

nav

定义导航链接

<nav class="">
        <ul>
            <li><a href="#">食品</a></li><!--
         --><li><a href="#">电器</a></li><!--
         --><li><a href="#">电子数码</a></li><!--
         --><li><a href="#">书籍</a></li>
        </ul>
</nav>

article

article比p，比div多了语意，虽然理论上都可以使用div来实现，但多出了语意。【比如一本书可以一章可以有多个段落，但可以有几章，而article的语意就像章节，它的内容是独立的，而不是仅仅的“段落”】

<article>
        <header id="header" class="">
            头部：菜鸡互啄区
        </header><!-- /header -->
        <h2>是道德的沦丧，还是。。。</h2>
        贪玩蓝月，你没玩过的全新版本
        <footer>
            底部：欢迎评论
        </footer>
</article>

footer

用于定义页尾

<footer>
        <div style="float:left;margin-right: 10px;">
            <div style="font-weight: bold;">合作伙伴</div>
            <div>支付宝</div>
            <div>baidu</div>
        </div>
        <div style="float:left">
            <div style="font-weight: bold;">帮助信息</div>
            <div>企业信息</div>
            <div>联系方式</div>
        </div>
    </footer>

section

定义网页的中的“区块”【比p多出语意“区块”，而又比div少出样式之意，div更多的用来定义样式，而session可以用来做结构划分】【如果article是一篇文章的话，那么session可以某块围绕一个论点的文章内容】

<section>
        <h3>小标题：如何学习马克思</h3>
        <p>...巴拉巴拉</p>
</section>

aside

aside标签定义其所处内容之外的内容。【aside有语意“其他的内容”，比如说一篇文章有一些其他的相关内容，比如谈到贝叶斯模型，但本文不是主要谈论贝叶斯模型而仅仅以贝叶斯作为一个小点，而又想给出“其他的内容”来描述贝叶斯模型的时候，就可以使用aside】

<section>
         <p>xxx可以用到贝叶斯模型、马尔可夫模型xxx</p>
        <aside>
            <h3>贝叶斯模型</h3>
            <p>贝叶斯模型是xxxx</p>
        </aside>
        <aside>
            <h3>马尔可夫模型</h3>
            <p>马尔可夫模型是xxxx</p>
        </aside>
</section>

main

main 表示网页的主体部分，一个页面中只有一个。

语义化标签
 <!-- 1.加粗 strong更加强烈-->
    我是<strong>加粗</strong>效果
    我也是<b>加粗</b>效果
    <!-- 2.倾斜效果 -->
    我是<em>倾斜</em>效果
    我也是<i>倾斜</i>效果
    <!-- 3.删除效果 -->
    我是<del>删除线</del>
    我也是<s>删除线</s>
    <!-- 4.下划线 -->
    我是<ins>下划线</ins>
    我也是<u>下划线</u>

标题标签：一共有六级标题h1~h6，重要性递减。
    h1在网页中的重要性仅次于title，一般情况下一个页面中只有一个h1。
    一般情况下标题标签只会使用到h1~h3，剩下的很少用
    每一个标题标签独占一行。
   1.在页面中独占一行的元素称为块元素(block elment)
    在p标签中的内容就表示一个段落，p也是一个块元素
    标题标签都是块元素
    hgroup标签为标题分组，将一组相关的标题同时放入到hgroup
        <hgroup></hgroup>
    blockquote表示长引用（块元素）<blochquote></blochquote>
   2.在页面中不会独占一行的元素叫行内元素(inline element)
    em标签用于表示语音语调的加重（行内元素）<em></em> 
    strong表示强调重要的内容！（行内元素）<strong></strong>
    q表示短引用（行内元素）<q></q>
    br表示页面中的换行<br>写一个换一行，写两个换两行

块和行内

行内标签是指两个行内标签在一起不会分行 比如strong和a标签等

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


块标签是指一个标签独占一行 比如div和h1等

<div>块标签</div>
<h1>块标签</h1>


块元素：h1,p
 在网页中一般通过块元素来对网页进行布局
 块元素中基本上什么都能放。
 行内元素：
 用来包裹文字
 一般情况下，会在块元素中放行内元素，而不会在行内元素中放块元素。
 p标签中不能放任何块元素。
 浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正。


如果块标签要进行像行内标签一样从左到右或是从右到左的排列，就需要使用到浮动。
 浮动就是让块标签独占一行的性质消失让内容可以左右排列。
 但是浮动需要满足所有浮动的标签不能超过总框的宽度，不然会出现在下一行。
 浮动的框不算入行数内的，所以如果不解除浮动在浮动标签后面再写入一个新的框，会导致新的框会把浮动框的样式覆盖
 这个时候就需要用到clear：both<div style="clear:both">
 一般新建一个框写在浮动的框后面就可以了，这样会让之前浮动的框全部组成一个块标签。之前新写的框也就不会覆盖写过浮动的框而是在浮动完成后的框的下面排序的。

div和span

div和span标签 没有语义 只是用来装内容的
 一个div占一行，一行中可以有多个span。
 div定义了文档的区域，块级。就用来表示一个区块，目前来讲div还是我们主要的布局元素。
 span为行内元素，一般用于在网页中选中文字。组合文档中的行内元素。

列表

使用li表示列表项
 列表之间相互嵌套

无序列表

ul里面只能放li标签，没有排列顺序

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

有序列表
<ol>
    <li></li>
</ol>

自定义列表

使用dl标签来创建定义列表，使用dt来表示定义的内容，使用dd来对内容进行解释说明。

<dl>
    <dt>名词1</dt>
    <dd>对名词1的解释</dd>
    <dd>对名词1的解释</dd>
</dl>

表格
<table border="1">/*这里可以是小数*/
/*表格和边框属性*/
    <tr>
        <th>Header 1</th>
        /*表头使用th标签进行定义*/
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        /*td指表格数据（table data）*/
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>


合并单元格

1.colspan 跨列合并 最左边的元素向右合并
 2.rowspan 跨行合并 最上面的元素向下合并

表单

表单是一个包含表单元素的区域。
 表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
 表单使用表单标签 来设置。

<form>
.
input 元素
.
</form>

文本域

输入类型是由类型属性（type）定义的。

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

密码字段
<form>
Password: <input type="password" name="pwd">
</form>

单选按钮
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>


复选框
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

提交按钮
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

新增的input属性
新增的type值
date

可以选择日期

<input type="date" />

time

可以选择时间的输入框

<input type="time" name="selecttime" >

month

可以选择年份月份的输入框

<input type="month" name="selectmonth" >

week

可以选择XX年XX周的输入框

<input type="week" name="selectweek" >

search

比普通的文本框增加了一个可全部删除的按钮。【可以点击右边的x来清除所有内容】

<input type="search" >

range

功能：这是一个可拖动的滑动框
 属性：min:定义滑动块的最小值
 max:定义滑动块的最大值
 value:定义默认值
 step:定义最小滑动距离

<input type="range" min="0" max="10" step="1">

url

这个输入框能校验url的合法性【当提交的时候才会检测】

<form action="" method="post" >
        <input type="url" >
        <input type="submit" >
</form>

email

这个输入框能够校验email的合法性

<form action="" method="post" >
        <input type="email" >
        <input type="submit" >
</form>

number

这个输入框能校验输入的是否全部是数字

<form action="" method="post" >
        <input type="number" >
        <input type="submit" >
</form>

新增的属性
list

与datalist配合使用，用来显示输入框的提示选项

placeholder

设置输入框的提示【图中的提示会随着输入自动消失，如果没有内容就又会显示出来】

<form action="" method="post">
        <input type="text"  placeholder="用户名">
        <input type="submit" >
</form>

multiple

设置可以选择多个值

<input type="file" multiple="multiple" >

required

设置输入框为必填框【当提交的时候，如果没有填上就会显示成红色或者给予提示】

<form action="" method="post">
        <input type="text"  placeholder="用户名" required="required">

        <input type="submit" >
</form>

autocomplete

设置下次是否自动完成【如果设置了，那么下次输入时会有上次输入的提示】
 【注意：输入框需要name属性才能使得autocomplete生效】
 也可以把autocomplete放到form中作为属性，代表整个表单都可以autocomplete，（然后也可以在某个输入框中设置autocomplete="off"来特定的不autocomplete）

<form action="" method="get" autocomplete="on" >
        <input type="text"  placeholder="用户名" required="required" autocomplete="on" name="username">
        <input type="submit" >
</form>

autofocus

设置是否自动获取焦点

<form action="" method="post" >
        <input type="text"  placeholder="用户名" required="required" autofocus="autofocus">

        <input type="submit" >
</form>

pattern

可以用来验证输入框的输入是否合法【考虑到行为样式结构相分离，像这样的表单验证应该由javascript完成，所以这里不介绍】

超链接

通过a标签来定义。
 超链接也是行内元素，在a标签中可以嵌套除它本身外的任何元素。

<a href="https://www.runoob.com">这是一个链接</a>

超链接用法
1.target属性:用来指定超链接打开的位置(定义被链接的文档在何处显示)
     可选值:
     _self 默认值 在当前页面中打开超链接
     _blank 在一个新的页面中打开超链接,可以回退
     /*也就是国内浏览器和国外Google的区别*/
   如：
    <a href="http://www.runoob.com/" target="_blank" rel="nooper noreferrer">(访问菜鸟教程)  
    rel属性通常用来描述连接之间的关系，即目的地址(href)和源站点之间的关系。rel通常出现在a,link标签中,rel是relationship的缩写。
    rel属性可以保护target="_blank"       
2.将超链接的href属性设置为#，这样点击超链接以后页面不会发生跳转，而是转到当前页面的顶端位置  
   如：
    <a href="#">去顶部</a>
3.如何去到a标签所在的位置？对a加特殊属性。用id
      id属性：
        每一个标签都可以添加一个id属性；
        创建一个HTML文档书签标记； 
-       id是元素的唯一标识，同一个页面不能出现重复的id属性。
    如：<a id="bottom" href="#">回到顶部</a>
        <a href="#p3">去第三段</a>
        <a href="#bottom">去底部</a>
        <a href="javascript:;">点击这个超链接什么也没有</a>

相对路径
相对路径
 相对路径和绝对路径比较
图片标签

src属性指定外部图片路径(路径规则和超链接是一样的),src的值是图像的URL地址。


base64格式：将图片用base64编码，一般图片需要和网页一起加载时才用。
 直接搜base64在线图片转换。

<img src="url" alt="some_text" width="304" height="228">

图片的格式

jpg（jpeg）:支持的颜色比较丰富，不支持透明效果，不支持动图。
 一般用来显示照片。


gif:支持的颜色比较少，支持简单透明，支持动图。
 用来显示颜色单一的图片，动图。


png:支持的颜色丰富，支持复杂透明，不支持动图。
 颜色丰富，复杂透明图片（专为网页而生）。


webp:谷歌新推出的专门用来表示网页中的图片的一种格式。具备其他图片格式的所有有点，而且文件特别小。
 兼容性差。

选择原则：效果一样，用小的；效果不一样，用效果好的。
内联框架

框架分为垂直框架，水平框架，混合框架，不能调宽度的框架（主要是通过noresize属性进行控制），通过框架，可以把一个页面分成多个不同的区域。
 HTML内联框架是为了实现在网页中显示网页，突出了内联二字，就是在一个网页中，我们能够控制在这个网页中用多大的框去显示另外一个网页，并且能通过CSS对其进行控制。


框架的标签是，是一对标签，它和标签是不能同时使用的，除非浏览器不支持框架时，要加标签时，里面的要添加文本的话，就要在标签里进行编写。如：

<noframes>
<body>您的浏览器无法处理框架！</body>
</noframes>


内联框架则可以放在里面，标签是<iframe></iframe>,如：

<body>
	<iframe src="/example/html/demo_iframe.html" width="200" height="200"></iframe>
	<p>某些老式的浏览器不支持内联框架。</p>
	<p>如果不支持，则 iframe 是不可见的。</p>
</body>


frameborder 属性用于定义iframe表示是否显示边框。
 设置属性值为 “0” 移除iframe的边框，设置为“1”表示有边框。

<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>

音视频播放
音频audio

src:定义要播放的音乐的url地址
 contorls:定义是否使用播放控件（控件有声音大小、停止播放等按钮）【这些属性的设置既可以仅仅使用contorls,也可以使用controls=“controls”】
 autoplay:定义音乐自动播放【这些属性的设置既可以仅仅使用autoplay,也可以使用autoplay=“autoplay”】
 loop:定义循环播放【这些属性的设置既可以仅仅使用loop,也可以使用loop=“loop”】

<audio src="一眼万年.mp3" controls autoplay ></audio>


有时候可以使用“兼容模式”，由于有些网页不支持某些格式或无法播放某音乐，所以需要“多个源”

<audio loop controls>
        <source src="bg.mp3"> <!-- 当第一个无法播放时，播放第二个源的音乐 -->
        <source src="一眼万年.mp3">
 </audio>

视频vedio

src:指定视频的url
 controls:定义是否使用播放控件（控件有声音大小、停止播放等按钮）
 【这些属性的设置既可以仅仅使用contorls,也可以使用controls=“controls”】
 autoplay:定义视频自动播放【这些属性的设置既可以仅仅使用autoplay,也可以使用autoplay=“autoplay”】
 loop:定义视频循环播放【这些属性的设置既可以仅仅使用loop,也可以使用loop=“loop”】
 其他：可以设置标签的width,heigh

<video src="K:\cloudmusic\MV\Taylor Swift - Sparks Fly.mp4"  controls></video>


有时候可以使用“兼容模式”，由于有些网页不支持某些格式或无法播放某视频，所以需要“多个源”

<video autobuffer autoloop loop controls>
        <source src="0.mp4">
        <source src="K:\cloudmusic\MV\Taylor Swift - Sparks Fly.mp4">
</video>

颜色值

HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。
 每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。