HTML笔记

最新推荐文章于 2023-10-18 19:03:42 发布

神奈川___

最新推荐文章于 2023-10-18 19:03:42 发布

阅读量1.4k

点赞数 1

分类专栏：笔记交流原创文章标签： html html5

本文链接：https://blog.csdn.net/weixin_46858768/article/details/114089593

版权

笔记同时被 3 个专栏收录

29 篇文章 4 订阅

订阅专栏

交流

26 篇文章 1 订阅

订阅专栏

原创

24 篇文章 1 订阅

订阅专栏

HTML

- 开头
- 字符集
- 基本标签结构
标签关系：分两类
- 包含 / 父子关系
- 并列 / 兄弟关系
文本标签语义
- 标题标签 ==< h1 >==六个标签==< h6 >==
- 段落标签 < p> < /p>
- 换行标签 < br />
- 文本格式化标签
HTML5
meta属性
base 虚元素
空元素
< div> < span> 盒子标签
img 图像标签
路径
- 父目录/子目录
锚点
- table 表格标签表示数据
- 实例1
ul ol dl 列表标签
- 自定义列表
- 列表总结
- list-style-type 列表
**form表单标签** lable input select output
- 表单的组成
- 表单域
- textarea 文本域
- 指定上传文件类型 accept
select
正则表达式
output 输出计算结果··
- 行内元素转块级元素
- 块级元素转行内元素
- 行内块元素
- 单行文字居中
- media定义
- scoped 定义
- type定义
script元素延时异步
- 异步执行脚本 async
- 对不支持JavaScript的浏览器提示
- rel 定义
- type定义
- media
百分号编码
字符实体
HTML块级和行内元素
- HTML块级元素
- HTML行内元素
- 总结
pre 保留文本原样
语义化注释自我修养
引用 q blockquote
注音引用
video 视频属性
- source
定义
属性
实例
audio 音频
iframe 在网页中嵌入网页
progress进度条
课后作业总结
- 字符实体

开头

所有的标签都要在 < html > 或号里面且成对出现：称为双标签第一个是开始第二个是结束，结束标签有个反 /

< br /> 特殊标签必需为单个标签（极少情况）单个出现的结束标签：单标签\

骨架标签是每个网页都会有的基本结构标签，网页的内容也是在这些基本标签上写的

HTML页面也称为HTML文档

<html lang = "zh-CN">这是一个中文网HTML标签

	<head>文档头部
        <meta charset = "UTF-8">//字符集
		<title>文档标题</title>
	</head>
    
  	<body>
        <p>文档的主体</p>
        <br />换行
    </body>   
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S0arnWy8-1614241281641)(…/HTML%E5%9B%BE%E7%89%87/HTML%E7%BB%93%E6%9E%84.png)]

字符集

标签内可以通过 ** ** 标签的 charset属性来定义HTML文档使用哪种字符编码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BGerh3hD-1614241281645)(…/HTML%E5%9B%BE%E7%89%87/%E5%AD%97%E7%AC%A6%E9%9B%86.png)]

<!DOCTYPE html>	//文档类型声明标签，告诉浏览器这个页面采取HTML5版来显示页面
<html lang = "zh-CN">//告诉浏览器器或搜索引擎这个一个中文网站，本页面采用中文显示
<meta charset = "UTF-8">//必须采用UTF-8保存文字，如不用可会乱码

基本标签结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ok4P86uj-1614241281646)(…/HTML%E5%9B%BE%E7%89%87/%E5%9F%BA%E6%9C%AC%E6%A0%87%E7%AD%BE%E7%BB%93%E6%9E%84.png)]

标签关系：分两类

包含 / 父子关系

<html>
	<title> </title>
</html>

并列 / 兄弟关系

<html>
    <title> </title> 
    <body> </body>
</html>

文本标签语义

标题标签 < h1 >六个标签< h6 >

HTML 提供了 六个网页标题即 <h1> - <h6>  每个标题都要成双成对的出现哦！
<h1>一级标签！</h1>
<h2>二级标签！</h2> 	  以此类推到最后的六级标签！
 是head的缩写，意为头部，标题
作用为标题使用，并且依据重要的性递减
特点：1. 加了标题的文字会变的加粗！字号也会变大。
     2. 一个标签独占一行。

段落标签 < p> < /p>

<p>一个段落标签！</p>
单词 paragraph的缩写，意为段落
标签语义：可以把HTML的文档分割为若干段落
特点：1. 文本在一个段落中会根据窗口的大小自动换行
	 2. 段落和段落之间保有空隙。

换行标签 < br />

<br />
单词 break 的缩写意为 打断、换行
标签语义：强制换行
特点：1. <br />是个单标签
	 2. <br />标签只是简单地开始的新一行，跟段落不一样，段落之间		   会插入一些垂直的间距

文本格式化标签

<strong>	</strong>或者	<b>	</b>	//加粗标签
<em>	</em>或者<i>	</i>	//倾斜标签
<del>	</del>或者<s></s>//删除线标签  s标识错误的或不再正确的！
<ins>	</ins>或者<u></u>//下划线标签 u标识拼写错误的单词或汉语中的专有名词
<sup>	</sup> //标记作为上标的字符，列如表示 幂 这样的数
<sub>	</sub> //标记作为下标的字符，它通常用在脚注 化学式的H2O
<hr /> //在不同的主题间进行分割线时 如切换话题或者场景时可以hr来插入水平线
<pre> </pre>//标识预定文本
<blockquote> </blockquote> //标识引用文本
<abbr title = "lianghuajina">lhj</abbr> //缩写词或首字母缩写词
<cite> </cite> //引用作品“书籍，电源，研究报告” HTML5不可以用在人名上4可以  显示为斜体
cite 元素是用于定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等）的标题；title 元素则是用于定义网页的标题。
<dfn> </dfn>//新术语-技术名词 是指特定专业领域中的一般概念词语的一个指称
<address> </address>//特殊用途：包含页面设计者的联系详情可以是 地址 电话邮箱 会作为斜体显示
<mark> </mark>标记作用！
<small> </small>变小

HTML5

从广义的角度来看，HTML5 是由 HTML、CSS 和 JavaScript 三贱客组成的

HTML 构成了网页的框架、骨骼，CSS 相当于给网页做美颜，而 JavaScript 让网页不再只是一个花瓶，它提供了与用户交互的一系列操作。

换言之，没有 JavaScript，网页就像失去了灵魂。

利用 meta 元素指定网页编码

编码问题曾经可能困扰了无数的攻城狮，但今天，你只要记住将源文件保存为 UTF-8 编码格式，然后在 HTML 文档中指定即可：

< meta charset=“UTF-8”>

meta属性

属性	值	描述
charset	character_set	指定 HTML 文档的编码。
content	text	指定与 `http-equiv` 或 `name` 属性相关的值。
http-equiv	content-type、default-style、refresh	content-type：另一种声明 HTML 文档作用字符编码的方法（`<meta http-equiv="content-type" content="text/html charset=UTF-8">`）。 default-style：指定页面优先使用的样式表。 refresh：以秒为单位指定一个时间间隔，在此时间过去之后将从服务器重新载入当前页面。也可以另行指定一个 URL 让浏览器载入。
name	application-name、author、description、generator、keywords、viewport	application-name：当前页所属 Web 应用系统的名称。 author：当前页的作者名。 description：当前页的内容描述。 generator：用来生成 HTML 的软件名称。 keywords：当前页的关键词。 viewport：网页尺寸自适应。

实例一：指定网页编码
<meta charset="UTF-8">

实例二：为搜索引擎提供关键词
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">

实例三：描述网页内容
<meta name="description" content="《零基础入门学习Web开发》案例演示">

实例四：定义网页的作者
<meta name="author" content="小甲鱼">

实例五：设置网页尺寸自适应
<meta name="viewport" content="width=device-width, initial-scale=1.0">

实例六：每 5 秒刷新一下浏览器并跳转到指定
页面
<meta http-equiv="refresh" content="5;http://bbs.fishc.com">

base 虚元素

<head>
    	<base href = "http://baidu.com" target = "_blank">
	<!-- 虚元素 单标签 设置一个基准URL 此后所有的相对路径会基于该URL进行跳转 但只影响相对路径 对绝对路径不起作用 整一个地址的！ -->
</head>
<body>
    <!-- 虚元素（void element）指的是那些只能使用一个标签表示的元素，比如 img 元素就是一个例子（img 元素只有开始标签，但并没有结束标签）。除了 img 元素，还有 meta 和 base 也属于虚元素。-->
    <a href = "test1">第一个</a> <!-- 相对路径 -->
     <a href = "test2">第二个</a>
     <a href = "test3">第三个</a>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kmR3YIgY-1614241281648)(…/HTML%E5%9B%BE%E7%89%87/base.png)]

空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的，也就是说空元素没有闭合标签的。

元素并非一定要有内容，但元素没有内容的时候，它就叫空元素（一个名词而已，大家不必记怀）。比如下面代码中的

就是空元素。由于空元素中并无内容，所以其可以更简洁地使用 自闭合标签表示

。

……
<p>下面是空元素</p>
<p></p>
<p>上面是空元素</p>
空元素参考：https://m.html.cn/qa/html5/13831.html
……

空元素参考

< div> < span> 盒子标签

<div> 
    局标签！独自占据一行 类似装内容大盒子
</div>//division
<span>
    布局标签！一行上可容纳多个内容 类型装内容的小盒子
</span>

#< a href = “”>链接标签< /a>

<body>
        <a href = "https://ilovefishc.com/html5/">提示名字</a>//原页面链接的跳转
        <a href = "https://ilovefishc.com/html5/" target = "_blank">提示名字</a>//新开页面链接的跳转
</body>

img 图像标签

<body>
   		<img src = "../Fishc.com" width = "300px" height = "300px" alt = "Fishc-logo">//
图片显示的方法之一
</body>

< img> 标签有两个必需的属性：src 属性和 alt 属性。

border CSS 设置

map

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>鱼C-零基础入门学习Web（Html5+Css3）</title>
	<body>
	<!-- map 给图片一个名字 然后再img里面用usemap属性 链接map的名字 再用area 指定位置 alt 是需要的 还可以通过	shape		  属性来指定区域的形状是怎么样的  确定形状后可以用 coords 属性填入坐标区域 再通过 href 定义跳转的目标				 circle 需要提供圆心坐标和其半径 poly 需要提供多边形每个点的坐标 rect 需要提供矩形左上角和右下角的坐标 -->

		<img src="pic.jpg" alt="《零基础入门学习c语言》" usemap="#book">
  	    <map nane="book">
        <!-- circle需要提供圆心的坐标以及圆的半径-->
        <area shape="circle" coords="784,241,163" alt="cup of coffee"href="https://fishc.com.cn" 				target="_blank">
        <!-- poly需要提供多边形每个点的坐标-->
        <area shape="poly"coords="279,230,867,549，636,975，46,655" alt="Boot" 								href="https://item.jd.com/12573534.htm1" target="_blank">	
         <!-- rect需要提供矩形左上角和右下角的坐标-->
        <area shape="rect" coords="710,818,886,1008" alt="rurtle" href = "https://man.ilovefishc.com" 			target="_blank">			</map>    
    </body>
</html>

picture 和 source

提高指定元素资源灵活度 picture 包含 source子元素每个source对应不同的图片和显示匹配条件这样浏览器可以根据不同的条件来选择

最合适的图片进行显示

<!DOCTYPE html><html>
<head>
<meta charset="utf-8"><title>图像适配</title></head>
    <body>
        <picture>
            <source media=" (min-width: 1024px)" srcset="big.jpg">大于1024px时显示
            <source media=" (min-width: 512px) " srcset="small.jpg">小于1024px又大于512px显示
            <img src="normal.jpg" alt="小姐姐" style="width:auto; ">当上面两个条件都不满足时显示
        </picture>
	</ body>
</html>

figure 和 figcaption 将图片标记为插图的

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8"><title>插图</title>
    </ head>
	<body>
        <p>国际c语言混乱代码大赛(The International Obfuscated c code
        Contest）是一项国际程序设计赛事，从1984年开始，每年举办一次，目的是写出最有创意的最让人难以理解的c语言代码</p>			<figure>
            <img src="pic.jpg" alt="国际c语言混乱代码大赛">
            <figcaption>国际c语言混乱代码大赛</figcaption>
         </figure>
    </ body>
</html>

路径

../ 父目录，最高/开头文件夹 ：<img src="../images/FishC.png" alt="FishC-logo">
./  子目录，当前文件夹 ：<img src="./FishC.png" alt="FishC-logo">
注意：这里面斜杠（/）是作为一个分隔线的角色存在的，目录与文件，目录与目录之间使用斜杠进行分隔。
如果可能的话，使用相对路径是最佳做法。

锚点

调用时：在用超链接加#id < a href = “#xx”></ a>

在标题处：< h2 id = “xx”> 标题< /h2>

#特殊字符

&nbsp; 空格 
&lt; 小于号 <
&gt; 大于号 >
&amp; 和号 &
&yen; 人民币 
&copy;  版权 ©
&reg; 注册商标 ®

#table表格标签

table 表格标签表示数据

< tr> 列< /tr> 行 < td> 格< /td> < th> 重要部分< /th>>

<!-- 
	<thead>表格的头区域部分 可以把表头的内容进行伸缩 </thead>
	<tbody>表格的身体区域部分 可以把身体的内容进行伸缩 </tbody>
	table 元素用于定义一个表格；tr 元素（后期：table row）用于定义表格里面的行；th 元素（后期：table header cell）用		于定义表头单元格；最后，td（后期：table data cell）元素用于定义数据单元格。
-->
<table align = "center" broder = "1" cellpadding = "10" cellspacing = "0" width = "600">
    <thead>	<!-- 表格的头部分-->
     	<tr><th>1</th><th>2</th></tr><!--表头 剧中加粗-->
    </thead>
    <tbody>	<!-- 表格的身体部分-->
	     <tr><td>1</td><td>2</td></tr>
    </tbody>
</table>

rowspan = "&"<!-- 跨行合并单元格的个数数量-->
colspan = “&” <!-- 跨列合并单元格的个数数量-->

实例1

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<!-- 上面效果是图 --> 
<table align = "center" border = "1" width = "500" height = "249" cellpadding = "0" cellspacing = "0" >
  <tbody>
	<tr>
         <td> </td>
		 <td colspan = "2"> </td>
      <!-- 将2列和3列的合并那么第三列是多余的了可以删除-->
	</tr>
    
	<tr>
			<td rowspan = "2"></td>
			<td></td>
			<td></td>
	</tr>
	<tr>     
    <!-- 将2行和3行的合并那么第三行是多余的了可以删除-->
			<td></td>
			<td></td>
	</tr>
			
  </tbody>
</table>

通常情况下，咱的表格是按行进行绘制的，每个 tr 元素代表表格中的一行。但有的时候，我们可能会想要批量地设置表格中一列或多列的样式，那就头疼了……没事，还有两个元素是专门干这事儿的，就是 colgroup 元素和 col 元素。下面案例：

  <table>
        <!-- 将第 1 列的背景颜色设置为红色 -->
        <!-- 将第 2、3 列的背景颜色设置为绿色 -->
        <colgroup>
            <col style="background: red">
            <col span="2" style="background: green">
        </colgroup>
        <tr>
            <td>1</td>
            <td rowspan="3">2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>9</td>
        </tr>
    </table>

ul ol dl 列表标签

< ol reversed> 降序排列！ 倒转 </ol>
< ol start  = “2”> 可以设置开始的起始值 </ol>
<ol type = "1"> 阿拉伯数字开始！ </ol>
<ol type = "A"> 大写字母A开始！ </ol>
<ol type = "a"> 小写字母a开始！ </ol>
<ol type = "I"> 罗马数字开始！ </ol>
<ol type = "i"> 罗马数字开始！ </ol>

自定义列表

列表总结

ul 再整齐无排序的地方

ol 有顺序的

dl 一个标签带这一些内容的

定义列表使用 dl 元素来实现，该元素定义了一个包含术语定义以及描述的列表。其中，dt 元素用于定义列表中的项目部分内容，而 dd 元素则用于定义描述部分内容。

list-style-type 列表

list-style-type ： none 改变列表的标志设置为方的圆的圈的也可以删了

none 代表是没有标志

list-style-image:url(“img/listStyle.png”);

form表单标签 lable input select output

表单的主要作用 收集用户信息

表单的组成

表单域

##表单控件/元素

#input

time 时间 date 日期 month 年月 week 星期 datetime-loacl 获取本地的当前的时间直接设置时间值！

<!DOCTYPE html>
<html lang = "zh-CN">
	<head>
		<meta charset = "UTF-8">
		<title>19</title>
		<meta name = "author" content = "舆情">
		<meta name = "keywords" content = "练习wed">
	</head>
	<body
    <form action="welcome.php" method="get">
        <label>时间：<input type="time" name="time" value="18:30"></label>
        <br><br>
        <label>日期：<input type="date" name="date" value="2020-03-16"></label>
        <br><br>
        <label>年月：<input type="month" name="month" value="2020-03"></label>
        <br><br>
        <label>星期：<input type="week" name="week" value="2020-W12"></label>
        <br><br>
        <label>本地日期和时间：<input type="datetime-local" name="datetime-local" value="2020-03-16T18:30"></label>
        <br><br>
        <input type="submit" value="提交">
    </form>
	</body>
	
<html>

textarea 文本域

<!DOCTYPE html>
<html lang = "zh-CN">
	<head>
		<meta charset = "UTF-8">
		<title>24 </title>
	</head>
	<body>
		<form>
			<textarea rows = "5" cols = "30" wrap = "hrad">今天你又学会了什么？你知道了多少啊？开心吗？要睡够觉！</textarea> 
		</form>
	</body>
	
</html>

案例下面

action 上传到的地方 method = “post” 提交方式 enctype = multipart/form-data 传输方式

指定上传文件类型 accept

accept = “.jpg,.avi,.gif” ||要指定所有的音频文件 accept = “audio/*” || ||要指定所有的视频文件 accept = "video/* ||

||要指定所有的图片文件 accept = “image/*”||

一次转送多个文件加一个在input属性添加 multiple

< input type = “file” accept = “image/*” multiple> 所有的图片类型可多选

< input type = “email” multiple> 邮箱多选答：除了 type=“file” 类型，还可以跟 type=“email” 类型同时使用，达到一次性提交多个邮箱的效果（不同邮箱之间使用英文的逗号分隔）。

##代码实列总结

<!-- 
	 可以给所有的格添加 name 和 value 属性 方便给后台人员查看！

	 radio 实现多选1 必须在表单格里面添加 同样的元素属性 name！
	 checkbox 实现多选 也必须在表单格添加 name 元素属性

	 value 在 text 里面是提示用户输入
	 在 其它的值里面是给后台人员看的
	 如下面 radio 里面 用户选择 女 那 value 就会返回 里面的 女 	 给后台人员看

	 想要加载页面的同时选中 radio 单选或 checkbox 多选 被选中	   可以使用 checked 如加载页面完成同时选中 radio 单选 中的女	 性 和 checkbox 多选 中的 睡觉 代码见下面
 
	 maxlength 最大输入长度限制用户输入个数!
	
	 submit 提交数据到服务器 可以把表单域 form 里面的表单元素 里的值 提交		给后台服务器
	 reset 重置按钮 可以还原表单元素初始默认状态
	 button 普通按钮 button 后期结合js 搭配使用
	 file 文件域 使用场景 上传文件使用
	 get 会把信息夹在URL上面再转送给服务器
	 post 不会，它是随HTTP一起到服务器去的

	 <input type = "radio" id= "woman" name = "sec" value = "女" checked = "checked"> form 表单的自动选中

	 自动聚焦 autofocus	 <input type = "text" name = "sex" value = "女" autofocus> 

	 禁用元素 disabled	 <input type = "text" name = "sex" value = "女" disabled> 按钮也可以禁用button

	 隐藏元素 hidden <input type = "hidden" value = "看不到我" disabled> 要隐藏送数据可以去了disabled

	 禁止修改 readonly 	 <input type = "text" name = "sex" value = "女" readonly>

	 <form target = "_blank" name = "注册表" action = “URL”  autocomplete = "off"  ><!-- 规定是否启用表单的自	 动填充完成功能。默认on 开 有时候需要关着 off

	 <lable><input type = "text" value = "user"></lable> 隐式关联
	<label for = "lunch">吃饭</label> <input type = "checkbox" id = "lunch" nema = "hobby" value = "吃饭">		显示关联

 	fieldset 可以将表单的相关元素进行分组 浏览器会以特殊样式区分对待它们

	legend 对fielset说明元素 legend 必须作为fielset的第一个子元素存在

		网页弹窗 ：T love FishC.com 
		<input type = "button" value = "按钮" >	
		<script>
			function msg(){
				alert("T love FishC.com");
			}
		</script>

		search 搜索框元素 	<input type = "search" name = "search">		下面可搜索的案列
		form action = "http://www.baidu.com/baidu" target = "_blank" autocomplete = "off" method = 			"get">
			百度：<input type="text" name=word size=40>
			<input type = "submit" name = "shangzhuang" value = "百度搜索">
		</form>

		color 选择颜色<input type = "color" name = "color"> 
		iamge 图片按钮  <input type = "iamge" src = "URl" alt = "XX">、

		限制输入数字 number <input type = "number">
		限制数字输入范围： min 最小值 max 最大值 step 每一次步进调整的幅度 和number 搭配使用

		数值滚动条  <input type = "range" name = "zhi" value = "1" min = "1" max = "10000" step = "100">
		
		placeholder = “” 提示用户输入占位符
		required 必须输入
		size = “30”设置框框的长度

		<label>邮箱：<input type = "email" size = "30" placeholder = "请输入126或163邮箱" required name = "email" pattern = "\w[-\w.+]*@(126.com|163.com)"</label><br />		指定 匹配 126 和 163的邮箱其它的不可以
		
-->
	<body>
        <!--target 新标签也打开提示信息！ -->
		<form target = "_blank" name = "注册表" action = "URL" method = "post" enctype = "multipart/form-data" autocomplete = "off"  ><!-- 规定是否启用表单的自动填充完成功能。默认on 开 有时候需要关着 off -->
			<!--text 文本框 用户可以输入任何文字信息-->
            <label for = "user">用户名：</label>
            <input type = "text" name = "username"	id = "user"	value = "请输入用户名" maxlength = "6"> <br />
			<!--password 密码框 用户看不见输入的密码-->
            <label for = "pass">密码：</label>
			<input type = "password"id = "pass" name = “pwd”> <br />  
            
            <fielset>//表单form分组
                <legend>sex</legend>//分组后的标题
			<!-- radio 可以实现多选1 -->
            <!-- name 是表单元素名字 性别等单选按钮必须拥有相同的名字（name） 才可以实现多选1 -->
            性别：<label for = "man">男</label> <input type = "radio" name = "sec" id = "man" value = "男"> <label for = "woman">女</label> <input type = "radio" id= "woman" name = "sec" value = "女" checked = "checked"> <label for = "renyao">人妖</label><input type = "radio" id = "renyao" name = "sec" value = "人妖">	<br />
            </fielset>
            <fielset>
                <legend> hobby </legend>
             <!--checkbox 复选框 可以实现多选 -->
            爱好：<label for = "lunch">吃饭</label> <input type = "checkbox" id = "lunch" nema = "hobby" value = "吃饭"> 睡觉  <input type = "checkbox" name = "hobby" value = "睡觉" checked = "checked"> 打豆豆  <input type = "checkbox" name = "hobby" value = "打豆豆"> <br />
            </fielset>
            <!-- 点击免费注册 可以把form表单域里的表单格元素里面的值提交给后台服务器!-->
            <input type = "submit" value = "免费注册"><br />
            <!-- 重置按钮 可以还原表单元素初始默认状态 -->
            <input type = "reset" value = "重新填写"><br />
            <!-- 普通按钮 button 后期结合js 搭配使用-->
            <input type = "button" value = "获取短信验证码"><br />
            <!-- 文件域 使用场景 上传文件使用 -->
            <input type = "file" value = "文件上传"> <br />
            <!-- 文本域  -->
            今日反馈:
            <textarea cols = "50" rows  = "5" name = "fankui">今日反馈!pink老师,我知道这个反馈留言是textarea来做的</textarea         		</form>	
	</body>
</html>

select

##select 下拉列表

<!-- 
	籍贯:<select>
            <option selected = "selected">广东</option>
            <option>湖南</option>
            <option>北京</option>
            <option>山东</option>
	      </select>

	select 列表分组 optgroup
         <optgroup label = "year">//year是标题
             <option selected = "selected">广东</option> 下拉列表 select的自动选中
             <option>湖南</option>
             <option>北京</option>
             <option>山东</option>
        </optgroup> 

		datalist = "ID" 列表参数	
		list  = “ID” 列表参数引用
		
-->
	<body>
		<form action = "#" method = "get" enctype = "mulitpart/form-data">
			<label>邮箱：<input type = "email" name = "email" pattern = "\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}"></label><br />
			<label>电话: <input type = "tel" name = "tel" pattern = "(\(\d{3,4}\)|\d{3,4}-|\s)?\d{8}"></label><br />
			<label>网址：<input type = "url"list = "fishcurl"  name = "ulr" pattern = "^((https|http)?:\/\/)[^\s]+"></label><br />
			<input type = "submit" name = "tijiao ">
		</form>
		
		<datalist id = "fishcurl">
			<option value = "http://ilovefishc.com">鱼C主页</option>
			<option value = "http://fishc.com.cn">鱼C论坛</option>
			<option value = "http://fishc.taobao.com">鱼C淘宝店</option>
		</datalist>	
	</body>
</html>

正则表达式

pattern 指定匹配模式需要用正则表达式

<!--只要涉及到字符串匹配的操作，正则表达式就是最好的选择
	邮箱 电话 等等的匹配输入
-->
	<body>
		<form action = "#" method = "get" enctype = "mulitpart/form-data">
			<label>邮箱：<input type = "email" name = "email" pattern = "\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}"></label><br />	<!--匹配所有的邮箱！-->
            
            <label>邮箱：<input type = "email" name = "email" pattern = "\w[-\w.+]*@(126.com|163.com)">--></label><br />		<!--指定 匹配 126 和 163的邮箱其它的不可以-->
            
			<label>电话: <input type = "tel" name = "tel" pattern = "(\(\d{3,4}\)|\d{3,4}-|\s)?\d{8}"></label><br />
			<label>网址：<input type = "url" name = "ulr" pattern = "^((https|http)?:\/\/)[^\s]+"></label><br />
			<input type = "submit" name = "tijiao ">
		</form>
	</body>

邮箱/邮件地址（Email）:		 \w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}

手机（国内）:		 0?(13|14|15|17|18|19)[0-9]{9} 
	
电话（国内）: 	(\(\d{3,4}\)|\d{3,4}-|\s)?\d{8}

网址（URL）: 		^((https|http)?:\/\/)[^\s]+

邮政编码  :		^[1-9]\d{5}$

身份证号码（18 位）:		^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$

QQ 号码 :			[1-9][0-9]{4,}

IP 地址 (IPv4):	(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)

日期（yyyy-mm-dd）:		([0-9]{3}[1-9]|[0-9]{2}[1-9][0-9]{1}|[0-9]{1}[1-9][0-9]{2}|[1-9][0-9]{3})-(((0[13578]|1[02])-(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)-(0[1-9]|[12][0-9]|30))|(02-(0[1-9]|[1][0-9]|2[0-8])))

时间（hh:mm:ss）: 		([01]?\d|2[0-3]):[0-5]?\d:[0-5]?\d
	
空白行 :			 \n\s*\r

中文字符 	: 		[\u4e00-\u9fa5]

整数 	: 			^-?[1-9]\d*$

正整数 	:		 ^[1-9]\d*$

非负整数（0 和正整数） : 			^(0|[1-9][0-9]*)$

负整数  :			^-[1-9]\d*$

非正整数（0 和负整数） 	: 			^-[1-9]\d|0$

十进制整数 : 			^[0-9]*$

n 位的整数 : 			^\d{n}$

至少 n 位的整数	 : 			^\d{n,}$

m~n 位的整数 : 		^\d{m,n}$

正浮点数  :			 ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$

负浮点数 : 			^-[1-9]\d*\.\d*|-0\.\d*[1-9]\d*$

包含两位小数的实数 :		 ^-?[0-9]+(.[0-9]{2})?$

output 输出计算结果··

<!-- oninput = "x.value = parseInt(a.value)+parseInt(c.value)" -->
<!DOCTYPE html>
<html lang = "zh-CN">
	<head>
		<meta charset = "UTF-8">
		<title>26 </title>
	</head>
	<body>
		<form action = "wecome.php" method = "get" oninput = "x.value = parseInt(a.value)+parseInt(c.value)" >
			0<input type = "range" id = "a" value = "50" min = "0" max = "100"  >100 +
			 <input  id = "c" type = "number"  value = "50" > =
			 <output name = "x" for = "a c" >100</output>
			<!-- name 是提交值 for 值/结果 来自 a 和 c -->
		</form>
	</body>
	
</html>

#元素显示三模式转换display

行内元素转块级元素

display:block；

块级元素转行内元素

display:inline;

行内块元素

display:inline-block;

单行文字居中

让文字的行高等于盒子的高度

a {
   height: 40px; //盒子高度
   width: 230px;
   line-height: 40px;//行高的高度
   text-indent: 2em;
   display: block;
}

#style 元素

用于为 HTML 文档定制样式信息。一个网页，如果没有样式，那么它只能是苍白的。有了样式，它才能展现出 Web 应有的婀娜多姿。

不像 title 元素只能放在 head 中，style 可以出现在 HTML 文档中的各个部分，另外，一个文档也可以包含多个 style 元素。

< style> 标签有三个属性：

media —— 指定样式适用的媒体
scoped —— 指定样式的作用范围
type —— 指定样式的类型

更多有关 style 元素的用法及案例请参考鱼C速查手册 -> 传送门

media定义

通过 style 元素的 media 属性，可以用来表明文档在什么情况下应该使用该元素中定义的样式。

值	描述
all	将样式用于所有设备（默认）。
aural	将样式用于语音合成器。
braille	将样式用于盲文设备。
handheld	将样式用于手持设备（小屏幕、有限的带宽）。
projection	将样式用于投影机。
print	将样式用于打印预览或打印页面。
screen	将样式用于计算机屏幕。
tty	将样式用于电传打字机之类的等宽设备。
tv	将样式用于电视机（低分辨率、有限的屏幕翻滚能力）。

**注意：**设备的归类是由浏览器负责的，有些设备（比如 screen 和 print）在各种浏览器上的解释比较一致；但有一些设备（比如 handheld）的解释可能各家并不完全一致。因此，在实际开发中需要先核实一下为佳。

运算符

值	描述
and	逻辑与操作符。
not	逻辑非操作符。
,	逻辑或操作符。

除了可以为指定设备定制样式，media 还支持通过一些特性来设计更具体的条件，运算符就是用于组合设备和特性条件的。

4. media 属性还可以通过一些特性来设计更具体的条件

值	描述
width	规定目标显示区域的宽度。可使用 “min-” 和 “max-” 前缀。例子：media=“screen and (min-width:500px)”
height	规定目标显示区域的高度。可使用 “min-” 和 “max-” 前缀。例子：media=“screen and (max-height:700px)”
device-width	规定目标显示器/纸张的宽度。可使用 “min-” 和 “max-” 前缀。例子：media=“screen and (device-width:500px)”
device-height	规定目标显示器/纸张的高度。可使用 “min-” 和 “max-” 前缀。例子：media=“screen and (device-height:500px)”
orientation	规定目标显示器/纸张的方向。可能的值：“portrait” 或 “landscape” 例子：media=“all and (orientation: landscape)”
aspect-ratio	规定目标显示区域的宽度/高度比。可使用 “min-” 和 “max-” 前缀。例子：media=“screen and (aspect-ratio:16/9)”
device-aspect-ratio	规定目标显示器/纸张的 device-width/device-height 比率。可使用 “min-” 和 “max-” 前缀。例子：media=“screen and (aspect-ratio:16/9)”
color	规定目标显示器的 bits/color。可使用 “min-” 和 “max-” 前缀。例子：media=“screen and (color:3)”
color-index	规定目标显示器可以处理的颜色数。可使用 “min-” 和 “max-” 前缀。例子：media=“screen and (min-color-index:256)”
monochrome	规定单色帧缓冲中的 bits/pixel。可使用 “min-” 和 “max-” 前缀。例子：media=“screen and (monochrome:2)”
resolution	规定目标显示器/纸张的像素密度 (dpi 或 dpcm)。可使用 “min-” 和 “max-” 前缀。例子：media=“print and (resolution:300dpi)”
scan	规定 TV 显示器的扫描方式。可能的值：“progressive” 和 “interlace”。例子：media=“tv and (scan:interlace)”
grid	规定输出设备是否是网格或位图。可能的值：“1” 为网格，否则为 “0”。例子：media=“handheld and (grid:1)”

注意：“min-” 前缀表示 “不低于” 指定的像素值；“max-” 前缀表示 “不大于” 指定的像素值。

可以使用三种逻辑运算符来组合设备和特性条件。

举个例子，我们让网页在浏览器宽度为512像素到1024像素之间，显示另外一种样式，我们可以这么做：

 <style type="text/css" media="screen and (min-width:512px) and (max-width:1024px)">
body {

     background-image: url("../img/bc2.png");
}
</style>

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>鱼C-零基础入门学习Web（Html5+Css3）</title>
    <style type="text/css">
        h1 {color:#FF0000;}
        p {color:#0000FF;}
        body {background-color:#FFEFD6;}
    </style>

    <style type="text/css" media="print">
        h1 {color:#000000;}
        p {color:green;}
        body {background-color:#FFFFFF;}
    </style>
</head>

<body>
    <h1>style标签-media属性 例子</h1>
    <p>如果打印这个页面，或者预览这个页面，会看到 media="print" 的样式。这个  "print"样式包含了绿色文本和白色背景。</p>
</body>
</html>

scoped 定义

scoped 属性用于指定样式的作用范围。

**注意：**scoped 属性是 HTML5 中的新属性，目前只有 Firefox 支持。

scoped 属性是布尔属性。如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>鱼C-零基础入门学习Web（Html5+Css3）</title>
    <style type="text/css">
        h1 {color:green;}
        p {color:black;}
    </style>
</head>
<body>
    <div>
        <style type="text/css" scoped>
            h1 {color:red;}
            p {color:blue;}
        </style>
        <h1>这个标题是红色的</h1>
        <p>这个段落是蓝色的。</p>
    </div>

    <h1>这个标题是绿色的</h1>
    <p>这个段落是黑色的。</p>
    <p><b>注意:</b> 只有 Firefox 属性支持 scoped 属性 。</p>
</body>
</html>

type定义

type 属性指定 style 样式的类型。

**注意：**目前，浏览器支持的样式机制只有 CSS 一种，所以这个属性的值总是 text/css。

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>鱼C-零基础入门学习Web（Html5+Css3）</title>
    <style type="text/css">
        h1 {color:red;}
        p {color:blue;}
    </style>
</head>
<body>
    <h1>FishC.com</h1>
    <p>零基础入门学习Web开发（HTML5 & CSS3）</p>
</body>
</html>

##程序参考

<!DOCTYPE html>
<html>
	<head>
		<title>04</title>
		<meta charset = "UTF-8">
		<meta name = "author" content = "舆情">
		<style>
			body{
				background-image : url("img/1.jpg");
			}
			h1{
				color : black;
				text-align : center;
			}
			h3{
				color : black;
				margin-left : 60%; 
			}
			p{
				color : black;
				text-indent : 32px;
				font-size : 16px;
				line-height : 32px;
			}
			<!-- 段落字体默认缩进两个字符 可以设置缩进尺寸 32个px（像素）字体为16px（像素） 行高设32px（像素）-->
			<!-- 字体颜色 --><!-- margin-left 左外边距 -->
		</style>
		<!-- 打印值 -->
		<style media = "print">
			h1{
				color : black;
			}
			h3{
				color : black;
			}
			<!-- 打印时的设置 -->
		</style>
		<!-- media 指定某些值 如 screen 是屏幕值大小 (min-width：最小值) 并且 (max-width:最大值) 之间执行！ -->
		<style media = "screen and (min-width : 512px) and (max-width : 1024px)"> 
			h1{
				color : red;	
			}
			body{
				background-image : url("img/284981.jpg");
			}
		</style>
	</head>
	<body>
	<h1>第1783章 残灭南溟</h1>
		<h3>逆天邪神</h3>
		<p>东狱溟王和北狱溟王见状，几欲炸裂的眼瞳中陡闪过几抹异芒，死死支撑中的他们在同一个刹那做出了完全相同的举动，就连口中的吼叫也一模一样：“王上，退！！”</p>
	
	</body>

script元素延时异步

##延时执行脚本: defer

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "UTF-8">
		<meta  name = "kaywords" content = "学习wed开发">
		<title>06-script</title>
		<meta name = "author" content = "舆情">
		<meta name = "description" content = "练习wed开发">
		<script type = "text/javascript" src = "patch.js" defer></script>
	</head>
	<body>
		<p>我是谁</p>
		<p>我从哪里来？</p>
		<p>我要到哪里去？</p>
       <!-- <script type = "text/javascript" src = "patch.js" defer></script> -->
    </body>
</html>
<!-- 如没有defer，那么当程序从上到下执行到script是暂停HTML去执行解析patch.js的代码！解析完了再往下执行，但是到解析script的时候 p 标签还没出现 也就是说没有东西让script来进行替换！所以会显示的内容 p 没有被改变 但是把script语句放到 p 的后面就可以了!因为放到 p 后面再执行script，那么script就有东西可以替换了！
defer 延时执行脚本！浏览器会暂时忽略该脚本，等待HTML的DOM（标签元素）全部执行完了再去执行它（脚本）！-->
<!--下面是 defer 执行的过程 但注意！！ defer属性 它只能用于外部脚本 ！它对文档内嵌脚本根本不起作用-->
<!--下面是 defer 执行的过程 但注意！！ defer属性 它只能用于外部脚本 ！它对文档内嵌脚本根本不起作用-->

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RKKCRbdV-1614241281684)(…/HTML%E5%9B%BE%E7%89%87/defer%E5%BB%B6%E6%97%B6%E6%89%A7%E8%A1%8C%E8%84%9A%E6%9C%AC.png)]

异步执行脚本 async

对不支持JavaScript的浏览器提示

当浏览器不支持 JavaScript 的时候
尽管在 HTML5 的时代，JavaScript 已经被纳入标准，成为 Web 开发中最重要的一个环节，但是仍然有一些特殊用途的浏览器不支持它，或者有些用户出于安全考虑禁用它，那么我们至少应该告诉他们，需要启用 JavaScript 才能使用此网站的某些功能 —— noscript 就是专门干这件事的元素。

noscript 元素可以用来向不支持 JavaScript 的浏览器显示一些内容。
<noscript>
			<p>都什么年代了还不支持Javascript</p>。。。
</nocript>

#< link> 标签用于指定外部资源。

link 元素最常见的用途是链接样式表。

注意：link 元素定义了 6 个属性，其中 rel 属性是必选的，它说明了当前文档与被链接资源之间的关系。

属性

属性	值	描述
href	URL	指定被链接资源的 URL。
hreflang	language_code	指定被链接资源使用的语言。
sizes	HeightxWidth	指定图标的大小（比如 `sizes="16x16"`）。
`media`	media_query	指定被链接的资源将被显示到什么设备上。
`rel`	alternate、author、help、icon、licence、next、pingback、prefetch、prev、search、sidebar、stylesheet、tag	指定当前文档与被链接资源之间的关系。
`type`	MIME_type	规定被链接文档的 MIME 类型。

参考实例

<link rel = "stylesheet" type = "text/css" href = "04.css">链接css文件
<link rel = "stylesheet" type = "text/css" madia = “print” href = "04-print.css">打印设置
<link rel = "stylesheet" type = "text/css" href = "04-screen512to1024.css" media = "screen">屏幕大小设置
<link rel = "icon" type = "image/x-icon" href = "URL">
<!-- 在link里面 type 要与 href 共存亡 -->
<!-- rel 属性，它说明了当前文档与被链接资源之间的关系。换言之，没有 rel 属性，浏览器可能不知道如何处理 link 元素。 -->

rel 定义

rel 属性的值决定了浏览器对待 link 元素的方式。

属性

值	描述
alternate	链接到当前文档的替代版本（比如另一种语言的译本）。
author	链接到当前文档的作者。
help	链接到当前文档的帮助文档。
icon	当前文档的图标资源。
license	链接到当前文档的版权信息。
next	表示当前文档是集合中的一部分，且集合中的下一个文档是被链接的文档。
prefetch	预先获取的资源（先进性缓存）。
prev	表示当前文档是集合中的一部分，且集合中的上一个文档是被链接的文档。
search	针对当前文档的搜索工具。
stylesheet	载入外部链式表。

实例-rel-type

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鱼C-零基础入门学习Web（Html5+Css3）</title>
    <link rel="stylesheet" type="text/css" href="css/fishc.css" >
</head>
<body>
    <h1>我通过外部样式表进行格式化。</h1>
    <p>我也一样！</p>
</body>
</html>

放在同级目录css文件内的fishc.css:

body{
    color: green;
}

type定义

type 属性规定被链接文档/资源的 MIME 类型。

注意
只有当设置了 href 属性时，才能使用该属性。MIME_type 样式表的 MIME 类型。目前，唯一可能的值是 “text/css”。

可以看上面实例

media

media 属性指定被链接的资源将针对哪一种媒体/设备进行优化。

这个属性主要用于 CSS 样式表，为不同的媒体类型指定不同的样式。

设备

值	描述
all	将样式用于所有设备（默认）。
aural	（弃用！）将样式用于语音合成器。
braille	（弃用！）将样式用于盲文设备。
handheld	（弃用！）将样式用于手持设备（小屏幕、有限的带宽）。
projection	（弃用！）将样式用于投影机。
print	将样式用于打印预览或打印页面。
screen	将样式用于计算机屏幕。
tty	（弃用！）将样式用于电传打字机之类的等宽设备。
tv	（弃用！）将样式用于电视机（低分辨率、有限的屏幕翻滚能力）。

运算符

值	描述
and	逻辑与操作符。
not	逻辑非操作符。
,	逻辑或操作符。

除了可以为指定设备定制样式，media 还支持通过一些特性来设计更具体的条件，运算符就是用于组合设备和特性条件的。

特性

值	描述
width	规定目标显示区域的宽度。可使用 “min-” 和 “max-” 前缀。例子：media=“screen and (min-width:500px)”
height	规定目标显示区域的高度。可使用 “min-” 和 “max-” 前缀。例子：media=“screen and (max-height:700px)”
device-width	（弃用！）规定目标显示器/纸张的宽度。可使用 “min-” 和 “max-” 前缀。例子：media=“screen and (device-width:500px)”
device-height	（弃用！）规定目标显示器/纸张的高度。可使用 “min-” 和 “max-” 前缀。例子：media=“screen and (device-height:500px)”
orientation	规定目标显示器/纸张的方向。可能的值：“portrait” 或 “landscape” 例子：media=“all and (orientation: landscape)”
aspect-ratio	规定目标显示区域的宽度/高度比。可使用 “min-” 和 “max-” 前缀。例子：media=“screen and (aspect-ratio:16/9)”
device-aspect-ratio	（弃用！）规定目标显示器/纸张的 device-width/device-height 比率。可使用 “min-” 和 “max-” 前缀。例子：media=“screen and (aspect-ratio:16/9)”
color	规定目标显示器的 bits/color。可使用 “min-” 和 “max-” 前缀。例子：media=“screen and (color:3)”
color-index	规定目标显示器可以处理的颜色数。可使用 “min-” 和 “max-” 前缀。例子：media=“screen and (min-color-index:256)”
monochrome	规定单色帧缓冲中的 bits/pixel。可使用 “min-” 和 “max-” 前缀。例子：media=“screen and (monochrome:2)”
resolution	规定目标显示器/纸张的像素密度 (dpi 或 dpcm)。可使用 “min-” 和 “max-” 前缀。例子：media=“print and (resolution:300dpi)”
scan	规定 TV 显示器的扫描方式。可能的值：“progressive” 和 “interlace”。例子：media=“tv and (scan:interlace)”
grid	规定输出设备是否是网格或位图。可能的值：“1” 为网格，否则为 “0”。例子：media=“handheld and (grid:1)”

注意：“min-” 前缀表示 “不低于” 指定的像素值；“max-” 前缀表示 “不大于” 指定的像素值。

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>鱼C-零基础入门学习Web（Html5+Css3）</title>
    <style type="text/css">
        h1 {color:#FF0000;}
        p {color:#0000FF;}
        body {background-color:#FFEFD6;}
    </style>

    <style type="text/css" media="print">
        h1 {color:#000000;}
        p {color:green;}
        body {background-color:#FFFFFF;}
    </style>
</head>

<body>
<h1>link标签-media属性 例子</h1>	
<p>如果打印这个页面，或者预览这个页面，会看到 media="print" 的样式。这个  "print"样式包含了绿色文本和白色背景。  </p>
</body>
</html>

111

百分号编码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PxprgZ7f-1614241281685)(…/HTML%E5%9B%BE%E7%89%87/%E7%99%BE%E5%88%86%E5%8F%B7%E7%BC%96%E7%A0%81.png)]

百分号编码也叫url编码

答：这里其实涉及到一个叫做百分号编码（Percent-encoding）的知识点，百分号编码也叫 URL 编码（URL encoding），说白了就是因为 URL 中有些字符会引起歧义，所以需要定制一个规范。

字符实体

HTML块级和行内元素

HTML块级元素

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

块级元素的特点︰
1.比较霸道，自己独占一行。
2.高度，宽度、外边距以及内边距都可以控制。
3.宽度默认是容器（父级宽度)的100%。高度用自己的
4.是一个容器及盒子，里面可以放行内或者块级元素。

注意∶
文字类的元素内不能使用块级元素：

< p>标签主要用于存放文字，因此

里面不能放块级元素，特别是不能放

同理，

~

等都是文字类块级标签，里面也不能放其他块级元素

块级元素总是在新的行上开始，并尽可能地占据本行全部可用的宽度

答：块级元素和行内元素最显著的区别是是否换行，块级元素要求每个元素独占一行；行内元素不会另起一行，它也只占用必要的宽度。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EG5fxDTJ-1614241281686)(…/HTML%E5%9B%BE%E7%89%87/%E5%9D%97%E7%BA%A7%E5%85%83%E7%B4%A0.png)]

HTML行内元素

常见的行内元素有< a >、< strong>、 < b>、< em>、< i>、< del>、< s>、< ins>、< U>、< span>等，其中< span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素的特点∶

相邻行内元素在一行上，一行可以显示多个。
高、宽直接设置是无效的。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或其他行内元素。
注意∶
链接里面不能再放链接
特殊情况链接里面可以放块级元素，但是给转换一下块级模式最安全

行内元素不会另起一行，它也只占用必要的宽度

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-85XsFSuY-1614241281686)(…/HTML%E5%9B%BE%E7%89%87/%E8%A1%8C%E5%86%85%E5%85%83%E7%B4%A0.png)]

块级元素讲究排场，行内元素勤俭节约

总结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nZroFziY-1614241281688)(…/HTML%E5%9B%BE%E7%89%87/%E8%A1%8C%E4%B8%8E%E5%9D%97%E7%9A%84%E5%85%83%E7%B4%A0%E6%80%BB%E7%BB%93.png)]

pre 保留文本原样

需要用标准的HTML来进行换行和空格/或用css等来处理

因为这样可以把 HTML 文档的布局和文档内容自身的布局给区别开来。相当于你文档中使用空格换行来达到所谓的美观需求的布局，HTML 是不予理会的，如果你想要内容在网页上以美美哒的形式展现出来，那么请使用 HTML 的语法来实现

 标签用于定义预格式化的文本。 pre 元素	pre 元素用于定义预格式化的文本。
pre 元素会保留空格和换行符，而文本自身也会呈现为等宽字体
**3 什么是“预格式化”？**

预格式化就是保留文本在源代码中的格式，使得页面中显示的和源代码中的效果完全一致。也就是说，浏览器在显示其中的内容时，会完全按照其真正的文本格式来显示，原封不动地保留文档中的空白，如空格、制表符、换行符等。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XOWHsF3l-1614241281689)(../HTML%E5%9B%BE%E7%89%87/%E7%A9%BA%E6%A0%BC%E9%97%AE%E9%A2%98.png)]

```html

 
 



    
    鱼C-零基础入门学习Web（Html5+Css3）


        pre 元素中的文本通常会保留空格   和

		换行符，而文本自身也会呈现为等宽字体。

```

语义化注释自我修养

语义化

在 Web 前端前端开发里面的一个专用术语叫做：语义化，简而言之就是使用正确的元素去做正确的事情。

在随后的学习中我们会发现很多元素，事实上在页面实现的效果是一样的，但语义化就要求你使用恰当语义的 HTML 元素，让页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容

在一个段落需要引用一些代码相关的文本就需要使用code元素

答：语义化就是要求程序员使用恰当语义的 HTML 元素，让页面具有良好的结构与含义，从而让人和机器都能够快速理解网页内容。

##注释

2. HTML 的注释语法

3. CSS 的注释语法 /* 在此处写注释 */

4. JavaScript 的注释语法 // 单行的注释或 /* 多行注释*/

5. 真正的编程高手善于通过注释锦上添花

真正的编程高手不光代码写的漂亮，注释也写得相当漂亮，很多时候寥寥几笔注释就能够起到画龙点睛的作用。

总而言之，写注释应该遵循奥卡姆剃刀原理：如无必要，勿增实体。

< p>HTML中注释的语法是：< code>&#60;!--这里面填的是注释--&#62;< code>< /p>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nq329mta-1614241281689)(…/HTML%E5%9B%BE%E7%89%87/HTML5%E8%AF%AD%E4%B9%89%E5%85%83%E7%B4%A0.png)]

在网页上表示程序变量是用var把它包含起来要表示用户输入的内容是用kbd包含起来表示程序或者计算机的输出时用samp包含起来

引用 q blockquote

较短的引用： < p>孔子有云：学而不思则罔，思而不学则殆< /p>

引用一大段文本通常使用 blockquote 元素，浏览器通常会使用缩进的方式来显示该段文本，另外可以通过 cite 属性指定该引用的来源 URL。

注意：q 元素在本质上与 blockquote 是一样的。不同之处在于它们的显示和应用。q 元素通常用于简短的行内引用，浏览器的默认样式是为其加上双引号；而对于内容比较长的引用，建议使用 blockquote 元素。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-apLvljfj-1614241281690)(…/HTML%E5%9B%BE%E7%89%87/blockquote%E5%BC%95%E7%94%A8%E5%85%83%E7%B4%A0.png)]

語義與呈現的分離

CSS負責美化 HTML負責結構

注音引用

ruby rt 标记注音符号 rp 标记当浏览器不支持ruby时所显示的内容

<!DOCTYPE html>
<html lang ="zh-CN">
	<head>
		<title>11引用</title>
		<meta charset = "UTF-8">
		<meta name = "author" content = "舆情">
	</head>
	<body>	
		<bdo dir = "rtl">
		<ruby>魑<rp> (</rp><rt>chi</rt><rp>) </rp><ruby>
		<ruby>魅<rp> (</rp><rt>mei</rt><rp>) </rp><ruby>
		<ruby>魍<rp> (</rp><rt>wang</rt><rp>) </rp><ruby>
		<ruby>魉<rp> (</rp><rt>laing</rt><rp>) </rp><ruby>
		</bdo>
	</body>
</html>

video 视频属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Irwn5w3H-1614241281690)(…/HTML%E5%9B%BE%E7%89%87/video.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gHRT363O-1614241281691)(…/HTML%E5%9B%BE%E7%89%87/%E6%94%AF%E6%8C%81%E6%A0%BC%E5%BC%8F%E8%AF%B4%E6%98%8E.png)]

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>鱼C-零基础入门学习Web（Html5+Css3）</title>
</head>
<body>
    <video width="640" height="360" controls>
        <source src="http://fishc.oss-cn-hangzhou.aliyuncs.com/Web/video_tag.mp4"  type="video/mp4">
        您的浏览器不支持 HTML5 video 标签。
    </video>
</body>
</html>

source

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>添加几个备胎</title>
</head>
<body>
    <video width="640" controls>
    <source src="ayok.mp4" type="video/mp4">
    <source src="ayok.ogv" type="video/ogg">
    <source src="ayok.webm" type="video/webm">
    非常抱歉，本视频可能已经不在这个星球上了……
    </video>
</body>
</html>

定义

<source> 标签为 picture , audio 或者 video 元素指定多个媒体资源。

source 元素是一个空元素。它通常用于以不同浏览器支持的多种格式提供相同的媒体内容。

属性

属性	值	描述
src	url	规定媒体文件的 URL。
srcset	url	仅当source元素是picture元素的直接子元素时，srcset属性才有效。
media	media query	规定媒体资源的类型。
sizes		表示源大小的列表，用于描述源代表的图像的最终渲染宽度。
type	numeric value	规定媒体资源的 MIME 类型。

实例

<!DOCTYPE html>
<html>
    <meta charset="UTF-8">
    <title>鱼C-零基础入门学习Web（Html5+Css3）</title>
<body>
    <audio controls>
        <source src="http://fishc.oss-cn-hangzhou.aliyuncs.com/Web/audio_tag.mp3" >
        您的浏览器不支持 audio 元素。
    </audio>
</body>
</html>

audio 音频

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P5ENVVJw-1614241281692)(…/HTML%E5%9B%BE%E7%89%87/audio%E9%9F%B3%E9%A2%91.png)]

#track 字幕

track 字幕需要配合 wedvtt文件创建一个后缀为.vtt的文本

<!-- 
		wEBVTT  必须的
			oo:oo:09.250 -->oo: 00: 11.270互联网的广大朋友们大家好  //从9秒250毫秒有字幕 依次类推
			00 :00: 11.270 --> oo:00 : 13.010我是小甲鱼
			00: 00:13.010 --> oo :00 : 14.030欢迎大家和我继续学习
			oo: oo: 14.030..--> 00:0Q317.030i《零基础入门学习web开发》
-->

<!DOCTYPE html>
<html lang = "zh-CN">
	<head>												<!-- 还可以看上面的其它元素设置！！！！ -->
		<meta charset = "UTF-8">						<!-- 还可以看上面的其它元素设置！！！！ -->
		<title>图片坐标 </title>						 <!-- 还可以看上面的其它元素设置！！！！ -->
	</head>										
	<body>
		<!--将test_video.mp4视频文件嵌入到网页中-->
		<video src="test_video .mp4" width="640" height="352" controls autoplay>
		非常抱歉，本视频由于不可抗拒因素，导致无法播放......</video>
		
		<!--使用audio元素将ayok.mp3音频文件嵌入到网页中-->
		<audio src="ayok.mp3" controls> 非常抱歉,本音频可能已经不再这个星球上了......	</audio>
		
		<!-- track 字幕需要配合 wedvtt文件 创建一个后缀为.vtt的文本  -->
		<video src="video.mp4" width="1280" controls>
			<track src="track .vtt" srclang = "zh" label="中文字幕" kind="subtitles" default>
			<!-- seclang 指定语言 label 指定字幕让用户选择  kind 指定字幕类型 subtitles（普通字幕）  default 默认				中文-->
			非常抱歉，本视频可能已经不在这个星球上了......</video>
		
		<video width="640" controls>
			<!--添加几个备怡-->
			<source src="ayok.mp4" type="video/mp4">
			<source src="ayok.ogv" type="video/ogg">
			<source src="ayok.webm" type="video/webm">非常抱歉,本视频可能已经不在这个星球上了.......
		</video>
		
	</body>
</html>

iframe 在网页中嵌入网页

用于创建包含一个网页的内联框架·

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K1Vbdq6b-1614241281693)(…/HTML%E5%9B%BE%E7%89%87/iframe.png)]

<!--	sandbox置为下面任意选项组合:
        allow-forms		 —允许进行提交表单
        allow-script		—允许运行执行脚本
        allow-same-origin		 —允许同域请求
        allow-top-navigation 		一允许iframe能够主导window.top进行页面跳转
        allow-popups 		—允许iframe中弹出新窗口
        allow-pointer-lock		—允许在iframe中可以锁定鼠标		-->
<!DOCTYPE html>
<html lang = "zh-CN">
	<head>
		<meta charset = "UTF-8">
		<title>图片坐标 </title>
	</head>
	<body>		
		<p>小姐姐，我住在这个城市，你呢? </p>
		<!--嵌入百度地图，坐标: 912989872.35,2658432.29,12z -->
		<iframe src= "https://map.baidu.,com/12989372.35,2658432.29,12z2" width = "1024px " height= "800px" sandbox = "alliw-popups">抑歉，您的浏览器不支持ifrane.</iframe>
        <iframe src= "https://ilovefishc.com" width = "1024px " height= "800px" >抑歉，您的浏览器不支持ifrane.</iframe>
		
	</body>
</html>

meter 范围内的值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aB5axpbP-1614241281693)(…/HTML%E5%9B%BE%E7%89%87/meter.png)]

<body>
<p>又到月底了，您的零花钱还剩下:</p><!--使用meter元素显示一个范围内的值-->
<meter id="money" high=0.8" low="0.2" optimum= 0.6" value="0.2" min="O"max="1"></meter>
 <p><button type="button" value="0.1">%10</button>
    <button type="button" value="0.6">%60</button>
     <button type="button" value="o.9">%90</button></p>
<script>
var buttons = document.getElementsByTagName ("BUTTON");var meter = document.getElementById ("money ");
	for (var i = 0; i <buttons.length; i++){
		buttons[i].onelick = function(e){
		meter.value = e.target.value;};
    }    </script>		</body>

progress进度条

max value 属性

< p>《零基础入门学习web开发》(HTML5&CSS3）出到哪儿啦?

课后作业总结

##<!DOCTYPE>

< !DOCTYPE html> 标签可以告诉浏览器你的 HTML 文档是基于哪一个标准进行开发的（在这里，表示该文档是基于 HTML5 的标准进行开发）。通过使用 DOCTYPE，浏览器就能够更准确地选择用什么方式来解释和展现你的网页。另外要记住，DOCTYPE 定义需要放在 HTML 文档的最开头位置！

##utf8

0. 什么是 UTF-8？
答：UTF-8 是一个字符编码，能够用最少的字节数表示所有 Unicode 字符。
Unicode 是为了解决传统的字符编码方案的局限而产生的，它为每种语言中的每个字符设定了统一并且唯一的二进制编码，以满足跨语言、跨平台进行文本转换、处理的要求。
所以，在网络全球化的现在，UTF-8 已经被推选为新的统一标准。

4. 请问 http://www.fishc.com/image 跟 http://www.fishc.com/image/ 有什么区别？
答：通常来说，URL 的末尾带斜杠（/）的话，比如：http://www.fishc.com/image/，服务器会认为你要访问的是目录，然后就去该目录下寻找 index.html 之类的默认页面；如果不带 ‘/’ 的话，比如：http://www.example.com/file，服务器会认为你要访问的是文件。

字符实体

1. 为什么会有 HTML 字符实体（Character Entities）？
答：这是为了避免浏览器解析网页的时候产生歧义。
因为某些符号代表了一些特殊的含义，比如我们在HTML中不能使用小于号（<）和大于号（>），这是因为浏览器会误将它们作为标签来对待。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体

2. 字符实体有“实体编号”和“实体名称”，它们有什么区别？
答：同一个字符实体，可以用“实体名称”和“实体编号”两种方式引用。
“实体名称”的优势在于便于记忆，但不能保证所有的浏览器都能顺利识别它；而“实体编号”则没有这种担忧，但它实在不方便记忆。

神奈川___

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML笔记

HTML开头字符集基本标签结构标签关系：分两类包含 / 父子关系并列 / 兄弟关系文本标签语义标题标签 ==< h1 >==六个标签==< h6 >==段落标签 < p> < /p>换行标签 < br />文本格式化标签HTML5meta属性base 虚元素空元素< div> < span> 盒子标签img 图像标签路径父目录/子目录锚点table 表格标签表示数据实例1ul ol dl 列表标签自定义列表列表总结l
复制链接

扫一扫