HTML基础知识总结

缘奋發表於 2021-8-31 15:15:20

<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li><a href="#_label0">标签分类</a></li><li><a href="#_label1">常用标签</a></li><li><a href="#_label2">表单</a></li><li><a href="#_label3">框架 </a></li><li><a href="#_label4">常用的布局组合标签</a></li><li><a href="#_label5">HTML4和HTML5的区别：</a></li><ul class="second_class_ul"><li><a href="#_lab2_5_0">HTML5 中新增的语义标签 - 了解</a></li><li><a href="#_lab2_5_1">HTML5 新的表单属性 </a></li><ul class="third_class_ul"><li><a href="#_label3_5_1_0">form 新属性</a></li><li><a href="#_label3_5_1_1">input 新属性</a></li></ul><li><a href="#_lab2_5_2">HTML5 新的表单元素 -- 了解 </a></li><ul class="third_class_ul"></ul><li><a href="#_lab2_5_3">HTML5 中新的 input 类型 </a></li><ul class="third_class_ul"></ul><li><a href="#_lab2_5_4">HTML5 中新增的音频 </a></li><ul class="third_class_ul"></ul><li><a href="#_lab2_5_5">HTML5 中新增的视频</a></li><ul class="third_class_ul"></ul><li><a href="#_lab2_5_6">HTML5 中已经移除的元素</a></li><ul class="third_class_ul"></ul></ul><li><a href="#_label6">转义符号</a></li><ul class="second_class_ul"></ul></ul></div> 标签的属性：多个属性中间用空格
< 标签名称属性名 1 = " 属性值 " 属性名 2 = " 属性值 " ></ 标签名称 >


<a name="_label0"></a><h2>标签分类</h2>
标签分类：块状元素、行级元素
块状元素：一般都是新起一行，可以容纳行内元素和其他块级元素；
行级元素 ：一般都是语义级别的基本元素，一般只能容纳文本或者其他行内元素。
块状元素和行内元素的区别：  
<ul>
<li>1 、块级元素会独占一行，其宽度自动填满其父元素宽度；行内元素会排列到同一行里，其宽度随元素的内容变化而变化。</li>
<li>2 、块级元素可以设置宽高；行内元素设置宽高无效。</li>
<li>3 、块级元素可以设置 margin ， padding 属性；行内元素的水平方向的 padding会有边距效果，但是竖直方向的 padding没有效果。（此处的属性稍后介绍）</li>
</ul>
属于块状元素的： 
标题标签                        h1-h6,
段落标签                        p ,
水平线标签                    hr,
有序列表标签                 ol--li，
无序列表标签                 ul--li，
定义描述标签                 dl-dt-dd，
容器标签                        div：
属于行级元素的： 
范围标签：                    span
图像标签：                     img
基本结构： 
<img alt="" width="654" height="473" src="https://img.jbzj.com/file_images/article/202108/20210831144604133.png" />
<a name="_label1"></a><h2>常用标签</h2>
文本标签<h1></h1>
<img alt="" width="684" height="340" src="https://img.jbzj.com/file_images/article/202108/20210831144604134.png" />
段落标签 
<img alt="" width="666" height="150" src="https://img.jbzj.com/file_images/article/202108/20210831144605135.png" />
换行标签 
<img alt="" width="667" height="181" src="https://img.jbzj.com/file_images/article/202108/20210831144605136.png" />
水平线标签 <hr/>
 <img alt="" width="661" height="373" src="https://img.jbzj.com/file_images/article/202108/20210831144605137.png" />
范围标签
<img alt="" width="662" height="200" src="https://img.jbzj.com/file_images/article/202108/20210831144605138.png" />
 图片标签<img  属性  />
<img alt="" width="1200" height="363" src="https://img.jbzj.com/file_images/article/202108/20210831144606139.png" />
图片标签的热点区域<map name="?" /> <atea 形状 范围 链接 标题 / >
<img alt="" width="1200" height="450" src="https://img.jbzj.com/file_images/article/202108/20210831144606140.png" /> 
 列表标签：无序<ul> <li> <li/> <ul/>    有序<ol> <li> <li/> <ol/>
<img alt="" width="1092" height="385" src="https://img.jbzj.com/file_images/article/202108/20210831144606141.png" />
描述标签：图文混编 <dl> <dt>(文字或图片)<dt/><dd>(文字说明多个)<dd/> <dl/>
<img alt="" width="1200" height="369" src="https://img.jbzj.com/file_images/article/202108/20210831144606142.png" />
布局标签：<div>中间放其他标签的容器<div/>  
<img alt="" width="1200" height="329" src="https://img.jbzj.com/file_images/article/202108/20210831144606143.png" />
 <img alt="" src="https://img.jbzj.com/file_images/article/202108/20210831144606144.png" />
 超链接和锚链接：<a><a/>
属性      name：锚点     herf：目标（网页#锚点）
<img alt="" width="1200" height="434" src="https://img.jbzj.com/file_images/article/202108/20210831144606145.png" />
规则表格：<table> <tr > <td><td/> <td><td/> <tr/> <table/>    <th>标题行<th/>
align 左右对齐  valign 上下对齐
<img alt="" width="397" height="101" src="https://img.jbzj.com/file_images/article/202108/20210831144606146.png" />
<img alt="" width="833" height="309" src="https://img.jbzj.com/file_images/article/202108/20210831144606147.png" />
不规则表格：
 属性 colspan="列数"  rowspan="行数"   然后把被占的格删掉
<img alt="" width="883" height="655" src="https://img.jbzj.com/file_images/article/202108/20210831144606148.png" />
 高级标签：标题和逻辑分区标签
 表格标题：<caption>标题文字<caption/>
 表格逻辑分区：thead tbody tfoot
<a name="_label2"></a><h2>表单</h2>
<img alt="" width="843" height="459" src="https://img.jbzj.com/file_images/article/202108/20210831144607149.png" />
id:·                    元素的唯一表示，不重复
name:                表单项元素的名称，服务器获取数据通过该名称
value:                表单项元素的值，服务器获取数据通过name 获取到的就是 value
type:                 表示表单项元素的呈现形式
class:                表示样式名称
readonly:          表示只读，用户只能看不能改
disabled：        表示禁用，该元素不能改而且背景是灰色
文本框： 
<img alt="" width="859" height="179" src="https://img.jbzj.com/file_images/article/202108/20210831144607150.png" />
密码框：
<img alt="" width="747" height="116" src="https://img.jbzj.com/file_images/article/202108/20210831144607151.png" />
单选按钮：
<img alt="" width="776" height="251" src="https://img.jbzj.com/file_images/article/202108/20210831144607152.png" />
复选框：
<img alt="" width="814" height="224" src="https://img.jbzj.com/file_images/article/202108/20210831144607153.png" />
文件域： 
<img alt="" width="681" height="135" src="https://img.jbzj.com/file_images/article/202108/20210831144607154.png" />
日期-h5中的新特性 ：
<img alt="" width="608" height="138" src="https://img.jbzj.com/file_images/article/202108/20210831144607155.png" />
隐藏域：
<img alt="" width="681" height="113" src="https://img.jbzj.com/file_images/article/202108/20210831144607156.png" />
下拉列表框：
<img alt="" width="753" height="261" src="https://img.jbzj.com/file_images/article/202108/20210831144607157.png" />
 文本域：
<img alt="" width="818" height="271" src="https://img.jbzj.com/file_images/article/202108/20210831144607158.png" />
按钮： 
 提交按钮、图片按钮、重置按钮、普通按钮
<img alt="" width="842" height="301" src="https://img.jbzj.com/file_images/article/202108/20210831144607159.png" />
最终效果：
 <img alt="" width="543" height="711" src="https://img.jbzj.com/file_images/article/202108/20210831144608160.png" />
地址栏内容： 
dest.html?
userId=1001&
userName=lina&
password=12312&
gender= 女 &
statu=1&
hobby=swim&hobby=movie&
headImg=a.png&
birthday=2020-10-24T20%3A19&
month=3&x=25&y=46
<a name="_label3"></a><h2>框架 </h2>
在一个页面引入其他页面  iframe
<img alt="" width="899" height="334" src="https://img.jbzj.com/file_images/article/202108/20210831144608161.png" />
 框架集：HTML5已经取消
<img alt="" width="830" height="754" src="https://img.jbzj.com/file_images/article/202108/20210831144608162.png" />
<a name="_label4"></a><h2>常用的布局组合标签</h2>
div-ul-li/div-ol-li ：常用于导航布局
div-dl-dt-dd: 常用于图文混编布局
div-form: 常用于表单布局
div-table: 常用于局部规则数据展示布局
<a name="_label5"></a><h2>HTML4和HTML5的区别：</h2>
<a name="_lab2_5_0"></a><h3>HTML5 中新增的语义标签 - 了解</h3>
标签             描述 
article         定义页面独立的内容区域。
aside         定义页面的侧边栏内容。
bdi         允许您设置一段文本，使其脱离其父元素的文本方向设置。
details         用于描述文档或文档某个部分的细节
dialog         定义对话框，比如提示框
summary         标签包含 details 元素的标题
header         定义了文档的头部区域
footer         定义 section 或 document 的页脚。
nav         定义导航链接的部分。
progress         定义任何类型的任务的进度。
section         定义文档中的节（section 、区段）。
time         定义日期或时间。
wbr         规定在文本中的何处适合添加换行符。
<a name="_lab2_5_1"></a><h3>HTML5 新的表单属性 </h3>
<a name="_label3_5_1_0"></a><h4>form 新属性</h4>
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。
提示 : autocomplete 属性有可能在 form 元素中是开启的，而在 input 元素中是关闭的。
注意 : autocomplete 适用于 <input> 标签，以及以下类型的 <input> 标签： text, search, url, telephone, email, password, datepickers, range 以及 color 。
<div class="jb51code">
<pre class="brush:xhtml;">
<form action = "" autocomplete = "on" >
 姓名: <input type = "text" name = "name" > 
 电话: <input type = "text" name = "phone" > 
 邮箱: <input type = "email" name = "email" autocomplete = "off" > 
 <input type = "submit" >
</form>
测试的时候需要先输入一遍，然后再刷新页面再次输入看到效果。
有些浏览器可能不自动支持，需要自己启用。</pre>
</div>
<a name="_label3_5_1_1"></a><h4>input 新属性</h4>
list 属性规定输入域的 datalist 。 datalist 是输入域的选项列表。
<div class="jb51code">
<pre class="brush:xhtml;">
<input list = "companys" >
<datalist id = "companys" >
 <option value = "alibaba" >
 <option value = "baidu" >
 <option value = "tencent" >
 <option value = "zijie" >
 <option value = "didi" >
</datalist>
</pre>
</div>
multiple 属性是一个 boolean 属性 .
multiple 属性规定 <input> 元素中可选择多个值。
注意 : multiple 属性适用于以下类型的 <input> 标签： email 和 fifile
<blockquote>上传多个文件 : <input type="file" name="img" multiple> </blockquote>
placeholder 属性提供一种提示（ hint ），描述输入域所期待的值。
简短的提示在用户输入值前会显示在输入域上。
注意 : placeholder 属性适用于以下类型的 <input> 标签： text, search, url, telephone, email 以及 password 。
<blockquote><input type = "text" name = "userName" placeholder = " 请输入用户名 " > </blockquote>
required 属性是一个 boolean 属性 .
required 属性规定必须在提交之前填写输入域（不能为空）。
注意 : required 属性适用于以下类型的 <input> 标签： text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 fifile 。
<blockquote>用户名 : <input type = "text" name = "username" required > </blockquote>
<a name="_lab2_5_2"></a><h3>HTML5 新的表单元素 -- 了解 </h3>
<blockquote>
 标签                 描述 
datalist            input标签定义选项列表。与 input 元素配合使用，来定义 input 可能的值。 
keygen            规定用于表单的密钥对生成器字段。 
output             标签定义不同类型的输出，比如脚本的输出。 

</blockquote>
<a name="_lab2_5_3"></a><h3>HTML5 中新的 input 类型 </h3>
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
注意 : 并不是所有的主流浏览器都支持新的 input类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。
<a name="_lab2_5_4"></a><h3>HTML5 中新增的音频 </h3>
直到现在，仍然不存在一项旨在网页上播放音频的标准。大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。 HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素。
<div class="jb51code">
<pre class="brush:xhtml;">
<audio controls >
 <source src = "horse.ogg" type = "audio/ogg" >
 <source src = "horse.mp3" type = "audio/mpeg" >
您的浏览器不支持 audio 元素。
</audio></pre>
</div>
<blockquote>
PS ： control 属性供添加播放、暂停和音量控件。 
在 <audio> 与 </audio> 之间你需要插入浏览器不支持的 <audio> 元素的提示文本。 
<audio> 元素允许使用多个 <source> 元素 . <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件 

</blockquote>
目前 , <audio> 元素支持三种音频格式文件 : MP3, Wav, 和 Ogg:
音频格式的 MIME 类型
<blockquote>
Format       MIME-type 
MP3           audio/mpeg 
Ogg           audio/ogg 
Wav           audio/wav 

</blockquote>
<a name="_lab2_5_5"></a><h3>HTML5 中新增的视频</h3>
<div class="jb51code">
<pre class="brush:xhtml;">
<video width = "320" height = "240" controls >
<source src = "movie.mp4" type = "video/mp4" >
<source src = "movie.ogg" type = "video/ogg" >
您的浏览器不支持 Video 标签。
</video>
</pre>
</div>
<video> 元素提供了播放、暂停和音量控件来控制视频。 
同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸 . 如果设置的高度和宽度，所需的 
视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时 
保留特定的空间，页面就会根据原始视频的大小而改变。 
<video> 与 </video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。 

当前， <video> 元素支持三种视频格式： MP4, WebM, 和 Ogg:
<blockquote>
Format     MIME-type 
MP4         video/mp4 
Ogg          audio/ogg 
WebM       video/webm 

</blockquote>
<div class="jb51code">
<pre class="brush:xhtml;">
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8" >
<title> 视频音频 </title>
</head>
<body>
<h1> 音频 </h1>
<audio controls >
<source src = "audio/wgs.ogg" type = "audio/ogg" >
<source src = "audio/zjl.mp3" type = "audio/mpeg" >
您的浏览器不支持 audio 元素。
</audio>
<h1> 视频 </h1>
<video width = "1320" height = "640" controls >
<source src = "audio/ruhai.mp4" type = "video/mp4" >
<source src = "audio/wgs.ogg" type = "video/ogg" >
您的浏览器不支持Video标签。
</video>
</body>
</html></pre>
</div>
<a name="_lab2_5_6"></a><h3>HTML5 中已经移除的元素</h3>
frame
frameset
noframes
<a name="_label6"></a><h2>转义符号</h2>
<img alt="" width="670" height="279" src="https://img.jbzj.com/file_images/article/202108/20210831144609163.png" />

頁: [1]

琼殿技术论坛's Archiver

HTML基础知识总结