html5与web前端区别（web前端HTML与HTML5知识点总结）

蒸馏酒

收藏 赞 分享

网页页面常用标签有：标题标签h1~h4、段落标签p、超链接标签a、图片标签img、列表标签ul / li、表单标签from相关、无语义布局标签div/span、H5新增语义布局标签header、article、nav、footer、main、aside、section。用的最多就是div标签，页面的样式统统用css编写，尽管浏览器给一些默认样式不喜欢也照样修改。

一、HTML文档结构

<!DOCTYPE html> <!-- 文档声明，告诉浏览器当前使用的HTML标准是HTML5,一定在第一行 --> <html lang="en"> <!-- <html></html>：根标签，告诉浏览器自己是HTML文档，所有的标签都写在它的里面 lang="en"：lang属性，表示该元素使用的文字是哪一种语言，en英文，zh-CN中文 --> <head> <!-- <head></head>:文档头，在它里面的内容一般设置网页相关信息，不会被渲染在网页页面上--> <meta charset="UTF-8" /> <!-- <meta/>：元属性描述，文档的原数据(附加信息),单标签 charset="UTF-8"：字符编码，制定网页内容编码为UTF-8 --> <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> <!-- http-equiv="X-UA-Compatible" ：文档兼容模式的定义 Edge模式告诉IE以最高级 模式渲染文档，也就是任何IE版本都以当前版本所支持的最高级标准模式渲染，避免版本升级造成的影响。 --> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- 手机端适配，不写手机端页面不用 viewport：用于指定用户是否可以缩放Web页面，并对相关的选项进行设定 width或height:指定视区的逻辑宽度和高度，取值可以是以像素单位的数字，也可以是特殊的标记符号（device-width：视区宽度应为设备的屏幕宽度，device-width同理） initial-scale：设置Web页面的初始缩放比例，值设为1.0则显示未经缩放的Web页面 --> <title>Document</title> <!-- <title></title>:网页标题--> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="stylesheet" href="style.css"> <script type="text/javascript" src="index.js"></script> <!-- 页面图标、加载外部的css/js文件......--> </head> <body> <!-- <body></body>:写网页的主体，里面放内容标签，如a、p、img、h1~h6等 --> </body> </html>

简单文档结构：如下

<!DOCtype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body></body> </html>

保存以上，文件格式为.html就是一个html文件了。

二、注释、标签、元素、属性

注释：快捷键 ctrl / ,注释的内容不会被浏览器渲染在页面上，给开发者自己看的

1.1标签

标签概念：由尖括号“< >”包围的关键词，一般是成对出现的，标签对中第一个标签是开始标签如<body>，第二个标签是结束标签如</body>

标签格式：

  • 双标签：<开始标签> </结束标签>
  • 单（空）标签：<标签名/> (没有结束标签)

标签内容：

  • 双标签，其内容在两个标签中间

<h1>标题</h1>

  • 单标签，则在标签属性中赋值

<input type="text" value="标签内容"/>

1.2元素

HTML 元素：指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

元素的内容：是开始标签与结束标签之间的内容

  • 某些 HTML 元素具有空内容 如：</br>

元素格式：<开始标签 属性名="属性值">元素内容</结束标签>

元素 = 开始标签 结束标签 元素内容 属性

1.3标签属性

键值对的格式，属性名不用加双引号，属性值必须加双引号

属性分为局部属性和全局属性：

  • 局部属性：某些标签特有的属性，如（a标签的href）
  • 全局属性：所有元素通用，如：( title lang )

<a href="#" title="超链接说明">超链接</a> <p title="段落">段落</p>

总结：

  • 一个标签可以拥有多个属性，必须写在开始标签中，位于标签名后面；
  • 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开；
  • 任何标签都有默认属性，省略该属性则取默认值；
三、内容标签

学习标签就是学习标签的语义，而不是样式，一些标签浏览器自带的样式都可以通过css自己修改

3.1标题系列标签：h1~h6

语义：标题，描述文本的重要程度，表示该文本比较重要，重要性从1到6递减

语法格式：双标签

<!-- vscode编辑器书写快捷方式：h1*6{我是标题$}，按住tab键一次生成6个标签和内容--> <h1>我是标题1</h1> <h2>我是标题2</h2> <h3>我是标题3</h3> <h4>我是标题4</h4> <h5>我是标题5</h5> <h6>我是标题6</h6>

3.2段落标签 p

语义：表示描述的内容是一个段落

语法格式：双标签

<!-- lorem，乱数假文，没有任何实际含义的文字 用法：lorem tab键 随机生成一些英文文字 lerom100 tab键 ：随机生成100个文字--> <p>段落内容</p>

3.3 实体字符

作用：实体字符通常用于在页面中显示一些特殊符号

常用实体字符：

大于号 >

>

小于号 <

<

空格符号

和号 &

&

引号 “

"

元 ￥

¥

注册商标 ®

®

3.4 图片标签 img

语义：在对应位置, 加载指定路径的图片。图片格式有：.jpg、.png、.gif ......

语法格式：单标签

<img src="图片路径" alt="路径不存在提示信息" title=“图片”>

属性：

  • src：文件的路径
  • alt：当图片加载不出来时的替代文本
  • title：鼠标悬停时显示的内容
  • height：图片的高度。单位可为Px
  • width：图片的宽度度。单位可为Px 或 %
3.5 相对路径和绝对路径

路径分类：相对路径、绝对路径

1）相对路径：（站内资源：当前网站的资源）

1.1书写格式：

  • ./ 表示当前资源所在的目录,可省略
  • ../ 表示上一级目录

1.2举例：

2.1、图像文件和HTML文件位于同一文件夹

只需输入图像文件的名称即可，如

<img src="img.png">

2.2、图像文件位于HTML文件的下一级文件夹

输入文件夹名和图像文件名，之间用“/”隔开，如

<img src="images/img.png">

2.3、图像文件位于HTML文件的上一级文件夹

在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如

<img src="../img.png">

<img src="../../img.png">

2）绝对路径：（站外资源：非当前网站的资源）

2.1 本地绝对路径

  • c:\images/image.jpg d:\images/image.jpg

2.2 网络绝对路径：url地址

协议名://主机名：端口号/路径 schema://host:port/path 如：baidu/img/flexible/logo/pc/result.png

3.6 超链接标签 a

语义：定义超链接，点击后跳转到另一个链接

语法格式：双标签

<a href="超链接URL">超链接内容</a>

常用属性： href target

1）href：规定链接指向的页面的 URL地址

  • 普通链接（跳转地址:站内站外）
  • 锚链接定位（跳转到同一个页面内的不同位置）

<a href="#id标记名">链接文本</a> <p id="标记名">跳转的目标位置</p> <!-- 锚链接定位--> <a href="#"></a> <!-- 回到顶部、空链接-->

  • 功能链接（点击后，执行某个功能）
  • <!-- 1、执行js代码 ： 语法：javascript:js代码; --> <a href="javascript:alert('你好啊');">执行js代码弹出你好啊</a> <!-- 执行js代码--> <a href="javascript:;">执行js代码弹出你好啊</a> <!-- javascript:; 一个空链接--> <!-- 2、发送邮件 ： 语法：mailto: 邮箱地址 --> <a href="mailto:123456789@qq">点击给我发送邮件</a> <!-- 要求：用户计算机上安装有邮件发送软件 exchange --> ​ <!-- 3、拨打电话： 语法; tel: 电话号码 --> <a href="tel:12345678911">点击给谁拨打电话</a> <!-- 要求：用户计算机上安装有拨号软件，或使用的是移动端访问 -->

2）target ：用于指定链接页面的打开方式

2个属性值：

  • _self 原窗口 （默认值，如果不写target 属性就默认这个值）
  • _blank 新窗口

注意：不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接

3.7 列表标签 ul ol dl

语义：描述一组相关的数据，数据的关联性 (有序或无序)

分类：无序列表 、有序列表、自定义列表

1）无序列表：无序列表的各个列表项之间没有顺序级别之分，是并列的 （无先后之分）

<!-- ul（定义无序列表） li（定义列表项目） --> <ul> <li>列表的项目1</li> <li>列表的项目2</li> <li>列表的项目3</li> </ul>

2）有序列表：有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义 （有先后之分）

<!-- ol（定义有序列表） li（定义有序列表项目） --> <ol> <li>列表的项目1</li> <li>列表的项目2</li> <li>列表的项目3</li> </ol>

3）自定义列表：列表的同时,进行简单的分组

<!-- dl（定义 自定义列表） dt（定义 列表项目） dd（定义 项目内容） --> <dl> <dt>名词</dt> <dd>名词解释1</dd> <dd>名词解释2</dd> ... <dt>名词</dt> <dd>名词解释1</dd> <dd>名词解释2</dd> ... </dl>

注意：

  • ul 和 li 成对出现 ，ul中只能嵌套l，直接在ul标签中输入其他标签或者文字的做法是不规范的写法，虽然显示上没有错误
  • li里面可以包括其他元素
  • 多级列表可以嵌套（列表里嵌套列表）
3.8 表格标签table（了解就行）

语义：定义一个类似于excel的表格

  • 简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
  • 先指定行, 在行内部指定列

完整复杂表格：(带有 thead、tbody 以及 tfoot 元素的 HTML 表格)

<caption>表格标题</caption> <!-- 表格标题:caption 显示在表格的正上方、居中、位置, 紧跟在table标签里面第一个 --> ​ <thead>表格表头，组合表格的表头内容</thead> <!-- 表格的表头 thead： 应该与 tbody 和 tfoot 元素结合起来使用,用于对 HTML 表格中的内容进行分组 --> ​ <tbody>表格内容主体</tbody> <!-- 表格的内容主体 tbody：存放真正的数据 --> ​ <tfoot>表格页脚</tfoot> <!-- 表格的页脚 tfoot：如果放在tbody前面, 是为了更快的加载，渲染出来会自动放在表格身体后面 --> ​ <!-- table ：定义一个表格，所有表格相关元素都写在table标签中 --> <!-- border属性 ：表框宽度 （一定要加不然很丑） --> <!-- tr: 行 --> <!-- th: 表头 ，效果文本会自动加粗居中 （ 一个表头也是一个单元格，但是我们使用th使用的是语义，表格第一行用的是表格，解释每列的含义）--> <!-- td : 单元格 一个td代表一个单元格，也就是一列--> <!-- 表格宽度：在不设置的情况下由单元格内容决定 --> ​ <table border="1"> <caption>表格标题</caption> <thead> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> </tr> </thead> <tfoot> <tr> <td>表尾1</td> <td>表尾2</td> </tr> </tfoot> <tbody> <tr> <td>值1</td> <td>值2</td> <td>值3</td> </tr> <tr> <td>值1</td> <td>值2</td> <td>值3</td> </tr> <tr> <td>值1</td> <td>值2</td> <td>值3</td> </tr> </tbody> </table>

注意：

  • 表格的格式, 如果是复杂版的, 一定要写完整
  • 单元格内, 可以存放其他元素（如：input）
  • 样式都用css写，border-collapse:collapse （合并边框）写在table标签上
3.9 表单标签 form

概念：表单用于搜集不同类型的用户输入，如用户注册、用户登录等

书写方式：

<form action="提交服务端的url地址" method="提交方式（get/post）" name="表单名称" target=“_blank”> 各种表单控件和提示信息 </form>

  • get：表单数据在页面地址栏中是可见的
  • post：安全性更好，在页面地址栏中被提交的数据是不可见的
  • target属性值：_blank（新窗口打开） _self（默认，当前窗口打开） _parent（显示在父框架中） _top(显示在窗口的整个 body 中) framename(显示在命名的 iframe )

1）表单控件 input系列

概念：单标签，通过type属性来指定不同的控件类型

  • 快捷输入 : input:type值 -----> 按下tab键

1/常用属性

1.1收集信息类

  • text：普通文本框
  • password：密码框 （输入是密文效果）
  • radio：单选按钮（name值一样，设置value值区分是哪个按钮）
  • checkbox：复选框（name值一样，设置value值区分是哪个按钮）
  • file：文件 （选择一些文件提交）

1.2 按钮类

  • reset：重置（把所有输入的或选择的控件内容一键清空）
  • submit：提交（把收集的信息提交给后台服务器）
  • button：按钮（普通按钮，关联js代可自定义行为）

2/必填信息

name: 表单提交时，有name的字段才会背提交，name名就是参数名

value：在单选按钮或复选框上，value属性是必填属性，其他控件类型的控件不是必填的

  • input控件中默认的文本值（输入的文本框中文本内容就是value值）
  • value以此来区分提交的是什么值，提交的value是给后台看的

<!-- 收集信息类 --> <form action="" method="get"> 文本框：<input type="text" name="text"><br/> 密码框：<input type="password" name="paw"><br/> 单选按钮： <input type="radio" name="sex" value="nan">男 <input type="radio" name="sex" value="nv">女 <br/> 多选按钮： <input type="checkbox" name="move" value="zzx">蜘蛛侠 <input type="checkbox" name="move" value="gtx">钢铁侠 <input type="checkbox" name="move" value="ljr">绿巨人 <input type="checkbox" name="move" value="fczlm">复仇者联盟 <br/> 文件：<input type="file" name="file"> </form> ​ <!-- 按钮类 reset submit button--> <form action="" method="get"> 用户名：<input id="username" type="text" name="username" placeholder="请输入用户名"><br/> 重置：<input type="reset" value="一键清空"><br/> 提交：<input type="submit" value="保存提交"> 普通按钮：<input type="button" value="点击一键清空" onclick="clearAll()"><br/> </form> ​ <!-- 结合普通按钮js代码 onclick:点击事件 clearAll()函数 ----》 点击按钮执行函数，函数最终是清空有id名为username的文本框内容 --> <script> function clearAll(){ var name = document.getElementById('username'); //获取id为名username的元素 name.value = ''; } </script>

3/ 部分可选属性

  • maxlength：控件允许输入的最多字符
  • disabled：禁用此元素，一旦设置后此字段不会被提交，布尔属性， 值为disabled
  • checked：定义选择控件默认被选中的项，布尔属性，值为checked
  • accept：上传文件时类型筛选
  • autofocus：当页面加载时自动获得焦点，布尔属性，值为autofocus
  • placeholder：文本框里显示的提示信息
  • readonly：只读，布尔属性，值为readonly
  • 注意：但凡是布尔属性，属性值和属性名是一样的，写一个就行

<!--type属性输入字段、以及可选属性和新增属性演示说明--> 文本框：<input type="text" name="text" value="默认的文本框内容" autofocus> 密码框：<input type="password" name="pwd"> 性别： <label> <input type="radio" name="sex" value="nan">男 </label> <label> <input type="radio" name="sex" value="nv">女 </label> 喜欢的漫威电影： <input type="checkbox" name="move" value="zzx">蜘蛛侠 <input type="checkbox" name="move" value="gtx" checked>钢铁侠 <input type="checkbox" name="move" value="ljr">绿巨人 <input type="checkbox" name="move" value="fczlm">复仇者联盟 文件： <input type="file" name="file" accept="image/jpeg,image/png"> <input type="submit" value="提交测试">

4/ label标签

概念：用于绑定一个表单元素, 当点击label标签内容的时候, 被绑定的表单元素就会获得输入焦点

  • for 属性规定 label 与哪个表单元素绑定。
  • <label for="username">用户名：</label>
  • id ：与label标签绑定 id = for属性的属性值

方式一： <label for="username1">用户名：</label> <input type="text" id="username1" name="username2" value="username2"> ​ 方式二： <label for="username2">用户名：<input type="text" id="username2" name="username2" value="username2"></label>

5/注意：

  • 表单元素必须要有name属性， 因为要用name属性把数据传到服务器
  • 其实， 表单中提交的是value值 ，而value值和文本值是对应的
  • 提交到后台的书写方式是 name=value&name=value&name=value

2）表单控件textarea（多行文本输入框）

定义：定义多行输入字段（文本域） （如果需要输入大量的信息，就需要用到，如文章简介之类的）

书写格式：双标签

<textarea> 大量文本内容 </textarea>

属性：

  • cols：文本区内的可见宽度
  • rows：文本区内的可见行数
  • 注意：最好用css的width和height来规定文本框的宽和高

很多属性都适用，如readonly 、disabled、autofocus、placeholder..........

右下角自由拖动输入框大小：

默认可随意拖动，利用css可设置不能拖动——> resize ：none

3）表单控件select option（下拉菜单）

定义：下拉框选项 （地址选择、分类选择等场景）

书写格式：select双标签 、 至少包含一对option标签

select可包含的标签：

  • option标签：可用选项
  • optgroup标签：选项组 （不加选项组也行）

<select> <optgroup> <option>选项1</option> <option>选项2</option> <option>选项3</option> </select>

属性：

1、select标签：

  • name：下拉列表的名称
  • multiple：是否允许多选 (按住ctrl或shift多选)
  • size：下拉列表可见的条目 （数字值）

2、option标签

  • value：默认的文本值
  • selected：默认选中项，布尔属性

3、optgroup 标签

  • label：分组项名字 <!--提交的是下拉列表的名字 name的值=option的value的值 address=gl --> <form action="" methed="get" > <label for="dizhi">地址：</label> <select name="address" id="dizhi"> <optgroup label="南京市"> <option value="gl">鼓楼区</option> <option value="pk">浦口区</option> <option value="yht">雨花台区</option> </optgroup> <optgroup label="合肥市"> <option value="yh">瑶海区</option> <option value="bh">包河区</option> <option value="ly">庐阳区</option> </optgroup> </select> <input type="submit"> </form>

4）数据列表 datalist

子元素：option ------》有value属性

注意：name属性一定要有

  • 该元素本身不会显示到页面，与 input 元素配合使用，来定义 input 可能的值 -------》 利用list 和 id 来关联
  • input框列表里， option标签里的value值和文本都会显示出来

<form action="" methed="get" > <input type="text" list="url_list" name="link"> <datalist id="url_list"> <option value="百度">baidu</option> <option value="网易">163</option> </datalist> <input type="submit"> </form>

5）button标签

定义：元素定义可点击的按钮

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

6）其他input系列：（HTML5新增）

type属性：一般都有兼容性问题

  • url： URL类型
  • date：日期类型
  • time：时间类型
  • month：月类型
  • week：周类型
  • number：数字类型
  • tel：手机号码
  • search：搜索框
  • color：会显示一个取色板，可以选择颜色
  • email：邮件类型
3.10 媒体标签 video audio（HTML5新增）

1）video（视频）标签：

  • src ： 要播放的视频的URL
  • controls ：（控件） —— 如果出现该属性，则向用户显示控件，比如播放按钮。 布尔属性 controls
  • autoplay ：（自动播放） —— 如果出现该属性，则视频在就绪后马上播放。布尔属性 autoplay
  • loop ：（循环播放）—— 如果出现该属性，则当媒介文件完成播放后再次开始播放。 布尔属性 loop
  • muted ：（静音）——规定视频的音频输出应该被静音。 布尔属性 muted
  • preload ：（预加载） —— 如果出现该属性，则视频在页面加载时进行加载，并预备播放。 布尔属性 preload (如果使用 "autoplay"，则忽略该属性)
  • poster ：（视频封面）—— URL规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
  • width ：设置视频播放器的宽度
  • height：设置视频播放器的高度。

<video src="视频地址" controls></video>

解决视频格式适配问题

source标签：如果存在兼容性问题，可以将多个视频格式的数据源放到source标签中

<video width="320" height="240" controls="controls" src=""> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> <source src="movie.mvbm" type="video/mvbm"> <p>你的浏览器不支持video标签 </p> </video>

注意：不同的浏览器支持的音视频格式可能不一致

2）audio（音频）标签

和视频几乎一样，只是没有宽高、视频封面

<audio src="音频地址" controls loop></audio>

四、语义化容器布局标签(html5新增)

新特性都有兼容性问题，基本都是IE9以上版本才支持，如果不考虑兼容性问题，才可以使用这些新特性

  • header：通常用于表示网页页头，也可以用于表示文章的头部
  • footer：通常用于表示网页页脚，也可以用于表示文章的尾部

页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。

在一个网页页面中可以使用多个 <footer>元素

  • main：代表页面的主要部分

main元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。

在一个文档中，不能出现一个以上的 <main>元素 。<main> 元素不能是以下元素的后代：<article>、<aside>、<footer>、<header>或 <nav>。

  • article：<article>标签中的内容是独立的、完整的、摘自外部的内容。通常用于表示整篇文章

可以是：博客文章、新闻文章、论坛帖子、网友评论等独立的内容

标签中的内容通常有它自己的标题，甚至有时候还有自己的脚注。

可以嵌套使用，但是一般需要外部内容和内部内容有关系。比如：一篇博客文章，它的评论就可以使用嵌套的形式，将评论内容嵌套在整体内容中。

  • section: 定义文档某个区域的标签。比如章节、页眉、页脚或文档中的其他部分
  • aside：<aside>元素的内容应该与附近的内容相关，用于添加与主要内容相关的内容。通常用于表示侧边栏
  • nav：定义导航链接的部分，通常，向其中添加一个ul或ol列表
五、布局常用无语义标签 div span1）div

无实际语义，代表一个块区域，内部用于放置其他标签。通用容器元素，什么标签都可以放在里面，包括它本身

结合CSS，对网页结构进行划分布局

2）span

无实际语义， 一般是结合CSS， 控制同一行内的某一小段样式

六、元素包含关系

以前： 块级元素独占一行，行级元素不换行，块级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外

现在： 元素的包含关系由元素的内容类别决定

查找元素包含关系：

百度： h1 mdn，查看允许内容（去mdn查看）

总结：

  • 容器元素中可以包含任何元素
  • a元素几乎可以包含任何元素
  • 某些元素有固定的子元素（ul>li,ol>li,dl>dt dd.........)
  • 标题元素和段落元素不能相互嵌套，并且不能包含容器元素
七、常见的文本格式化标签

<b>粗体</b> （bold） <strong>粗体</strong> 语气更强的强调内容 粗体，推荐使用strong ​ <i>斜体</i> <em>斜体</em> 强调的内容 斜体，推荐使用em ​ <s>加删除线的文本</s> 加删除线的文本 <del>已被删除的文本</del> 已被删除的文本 加删除线，推荐使用del ​ <u>下划线</u> <ins>下划线</ins> 下划线，推荐使用ins ​ </sup>上标</sup> 上标 <sub>下标</sub> 下标 ​ <small>小号字</small> 小号字

html5与web前端区别（web前端HTML与HTML5知识点总结）(1)

b i s u 只有使用， 没有强调的意思

strong em del ins 语义更强

HTML相关可以查看官方文档网站：W3school 或 网站：MDN。

​分享网站：《Python自学网》wakey/

基础入门到逐步深入 | 适合新手入门到精通 | 体系课程：Web开发、爬虫、图形界面化、自动化（运维、测试）、云计算

,
展开全文

免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com

猜您喜欢

    热门推荐

    Copyright © 2013-2024 秒懂生活 站务投诉邮箱：anhduc.ph@yahoo.com

    分享
    投诉
    首页