1-HTML5语法与基础标签、列表、多媒体与语义化、表单、表格

发布于 2022年 05月 03日 05:10

一、HTML5语法与基础标签

1、快捷键

快捷键功能
ctrl+shift+d复制当前行
ctrl+shift+↑上移当前行
ctrl+shift+↓下移当前行
按住鼠标滚轮，然后下拉多行编辑
输入!（英文），按下tab键自动生成HTML的骨架
ctrl+shift+p键选择"open with Live server”，即可自动刷新网页
ctrl+/注释符号

2、HTML5骨架

<!DOCTYPE html> 文档类型声明DTD

HTML文件第一行必须是DTD ( Document Type Definition，文档类型声明)

SEO (Search Engine optimization，搜索引擎优化)利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名，让网站在搜索引擎的结果中内占据领先地位，获得品牌收益

3、标签

HTML叫做“超文本标记语言”，超文本标记就是标签；标签通常成对儿出现。

p标签：段落。

任何段落都要放到p标签中，因为HTML中即使代码换行了，页面显示效果也不会换行，必须写到p标签中不能嵌套h系列标签和其他p标签。

h1-h6：标题。h1为一级标题；h6位六级标题。

h1一般只能放置一个，否则会被搜索引擎视为作弊。

div:盒子。“division”。

div是英语division“分割”的缩写，顾名思义，'div标签对用来将相关的内容组合到一起，以和其他内容分割，使文档结构更清晰。'

4、转义字符

转移字符意义
&lt(后面还有个分号;)小于号
&gt大于号
&nbsp空格（不会被折叠）
&copy版权符号©

5、重点内容

HTML是什么?如何创建网页?如何浏览网页?

HTML5骨架是什么结构?什么是DTD ?

标题和段落标签、div标签要如何使用?

6、难点内容

网页的字符集有什么区别?

常见的SEo配置项和应该遵守的规则有哪些?

HTTP是什么?我们做好的网页如何被用户看见?

二、列表标签

1、3种列表

标签语义
ul无序列表
ol有序列表
dl定义列表

2、无序列表

使用ul标签，每个列表项都是li标签。

无序列表（unordered list），父标签。 列表项（list item），子标签。

注：

li标签不能单独使用，它必须放到ul或者ol中使用。

HTML规定，ul的子标签只能是li，绝对不能出现其它任何标签。

li中可以放任何标签。li标签是容器，内部可以放任何其他标签。

无序列表的type属性:

无序列表有type属性，可以定义前导符号的样式，但是在HTML5中已经被废弃，建议使用CSS替代。

值描述
disc默认值，实心圆
circle空心圆
square实心方块

3、有序列表

ol的子标签只能是li标签 li标签中可以放任何东西。

ol标签可以设置type属性，用来设置编号的类型

type属性值意义
a表示小写英文字母编号
A表示大写英文字母编号
i表示小写罗马数字编号
I表示大写罗马数字编号
1表示数字编号（默认)

ol标签的start属性

start属性值必须是一个整数，指定了列表编号的起始值。此属性的值应为阿拉伯数字，尽管列表条目的编号类型type属性可能指定为了罗马数字编号等其他类型的编号。

ol标签的reversed属性

reversed属性指定列表中的条目是否是倒序排列的。reversed属性不需要值，只需要写reversed单词即可，这是HTML5的全新特性。

<ol reversed>

</ol>

4、定义列表

<dl>
  <dt>HTML</dt>  
  <dd>超文本标记语言</dd>
</dl>

definition list定义列表。data term数据项。data definition数据定义。

使用什么标签，不应该看样式，应该看语义。只要语义上有“解释说明”含义的文字，且为列表形态，应该使用定义列表。

5、重点内容

ul、ol和dl分别要在什么场合下使用?

ul和li标签的嵌套使用规则是什么?

ul和ol的常见属性有哪些?

三、多媒体与语义化标签

1、img图片标签

img标签用来在网页中插入图片。

例：

<img src="images/gugong.jpg">

img是image(图片)的缩写，src是source(来源)的缩写，images/gugong.jpg是图片的存储目录和完整文件名。

一定注意,图片必须要复制到项目文件夹中，一般将图片保存到项目文件夹中的images子文件夹中。

alt属性：alt属性是alternate“替代品”的缩写，它是对图像的文本描述，不是强制性的。如果由于某种原因无法加载图像，浏览器会在页面上显示alt属性中的备用文本。

width、height属性：width、 height属性分别设置宽度和高度，单位是像素，但是不需要写单位，width="300"

网页上支持的图片格式

格式说明
.bmpwindows画图软件默认保存的格式，位图
.gif支持动画(比如表情包)
.jpeg(.jpg)有损压缩图片，用于照片
.png便携式网络图像，用于1ogo、背景图形等，支持透明和半透明
.svg矢量图片
.webp最新的压缩算法非常优秀的图片格式

相对路径：描述从网页出发，如何找到图片。比如“前面路口左转，直走100米后右转就到了”。如果需要回退层级，使用“../”这样的写法。

绝对路径:描述图片精准地址。比如“北京市海淀区西三环北路甲2号院中关村国防科技园2号楼”。不管网页在哪里，绝对路径不需要改变。

2、超级链接

<a>:超级链接是将网页和网页连结到一起的方法，是互联网成的原因。
<a href="2.html">去第二个网页</ a>

a是anchor(锚)的首字母,hypertext reference是超文本引用。

href属性：支持相对路径和绝对路径。

title属性：用于设置鼠标的悬停文本。（停在超链接时的提示符）。

target属性：设置为blank，即可在新标签页中打开网页。

图片也可以设置超级链接，只需要用a标签包裹img标签即可。

页面内锚点：较长的页面，可以适当的给h系列标签添加id属性，它将成为页面的“锚点”。

当网址后面添加#时,页面将自动滚动到锚点所在位置。

<h2 id="wuxi">无锡旅游照片</h2>

当网址后面添加#时，页面将自动滚动到锚点所在位置.(#表示锚点)

<a href="lvyou.html#wuxi">看无锡美景</ a>

下载链接：指向exe、zip、rar等文件格式的链接，将自动成为下载链接。

<a href="1.zip">下载</ a>

邮件链接：有mailto:前缀的链接是邮件链接，系统将自动打开Email相关软件。

<a href="mailto:me@test.com">给小编发邮件 </a>

电话链接:有tel:前缀的链接是电话连接，系统将自动打开拨号盘

<a href="tel : 12306">打电话买火车票</a>

3、区块标签

div标签实现文档区块分隔。

HTML5区块标签：

区块标签说明
<section>文档的区域，语义比div大
<article>文档的核心文章内容，会被搜索引擎主要抓取
<aside> 文档的非必要相关内容，比如广告等
<nav> 导航条
<header> 页头
<main>网页核心部分
<footer>页脚

4、语义化标签

<span>标签：文本中的“区块”标签，本身没有任何特殊的显示效果，可以结合CSS来丰富样式。

<b>、<u>、<i>标签充满浓浓的“样式”意味，已经被CSS替代，但是在网页中也可以表示需要强调的文本。

标签说明
<b> 被加粗的文字，cSS已经替代了它的功能
<u> 加下划线的文字，css已经替代了它的功能
<i> 倾斜的文字，cSS已经替代了它的功能

<strong>、<em>、<mark>标签均表示强调语义。

标签说明
<strong> 代表特别重要文字
<em> 代表强调文字
<mark>代表一段需要被高亮的文字

<figure>元素代表一段独立的内容，与说明<figcaption>配合使用,它是一个独立的引用单元，比如建议读者拓展视野的图片等，当这部分转移到附录中或者其他页面时不会影响到主体。

5、音频

<audio>标签，兼容到IE9。常用格式：mp3和ogg。

<audio src="music/wellspring.mp3" controls autoplay loop>请升级游览器</audio>

controls ：显示播放控件。src：音频地址。请升级游览器：标签对中是对不兼容audio标签的浏览器的显示文字。autoplay ：自动播放。

声明autoplay属性，音频会自动播放。常用的浏览器为了不打扰用户，可能会不允许自动播放音乐，必须让用户手动点击之后才能播放。

声明loop属性，将循环播放音频。

6、视频

<video>标签,兼容到IE9。常用格式是mp4、ogv、webm等。属性与音频类似。

7、重点内容

如何正确地在网页中插入图片，它有哪些常见属性?

如何使用a标签插入超级链接，它有哪些常见属性?

如何在网页上插入音频和视频?

常见大纲标签和语义化标签有哪些?

8、难点内容

相对路径和绝对路径是什么意思?

正确拼写、背诵每种标签和它们的属性，不要张冠李戴

正确理解每个标签的语义，要在合适的地方使用它们

四、表单标签

1、表单是什么

表单用来收集信息，比如注册、登录、发送评论反馈、购买商品等等。

2、创建

所有HTML表单都以一个

元素开始。

<form action="save.php" method="post"></ form>

action属性表示表单要提交到的后台程序的网址。method属性表示表单提交的方式,有get或post。

3、基本控件

单行文本框：

使用type属性值被设置为text的元素可以创建单行文本框，它是一个单标签。

value属性表示已经填写好的值。

placeholder属性表示提示文本，将以浅色文字写在文本框中，并不是文本框中的值。

disabled属性表示用户不能与元素交互，即“锁死”。

<input type="text" value="123" placeholder="请输入姓名" disabled>

单选按钮： 使用type属性值被设置为radio的<input>元素可以创建单选按钮。

互斥的单选按钮应该设置它们的name为相同值。

单选按钮要有value属性值，向服务器提交的就是value值。

单选按钮如果加上了checked属性，表示默认被选中。

<input type="radio" name="sex" value="男" checked>

label标签：

用来将文字和单选按钮进行绑定，用户单击文字的时候也视为点击了单选按钮。

<label>
    <input type="radio" name="sex" value="女">女
</label>

复选框：

使用type属性值被设置为checkbox的<input>元素可以创建复选框。

同组复选框应该设置它们的name为相同值。

复选框要有value属性值，向服务器提交的就是value值。

<input type="checkbox">

密码框：

使用type属性值被设置为password的元素可以创建密码框。

<input type="password">

下拉菜单：

<select>标签表示下拉菜单，<option>是它内部的选项。

<select>
​    <option value="JavaScript">JavaScript</option>
​    <option value="Java">Java</option>
​    <option value="C++">C++</option>
​    <option value="PHP">PHP</option>
</select>

多行文本框<textarea></textarea>

rows和cols属性，用于定义多行文本框的行数和列数

三种按钮：

表单中常见三种按钮，它们也都是input标签，type属性值不同。

type属性值按钮种类
button普通按钮，可以简写为
submit提交按钮
reset重置按钮

input类型总结：

type属性值控件
text单行文本框
radio单选按钮
checkbox多选按钮
password密码框
button普通按钮
reset重置按钮
submit提交按钮

4、HTML5中新增的表单控件

更丰富的input种类

type属性值控件
color颜色选择控件
data、time日期、时间选择控件
email电子邮件输入控件
file文件选择控件
number数字输入控件
range拖拽条
search搜索框
url网址输入控件

<datalist>控件

<datalist>控件可以为输入框提供一些备选项,当用户输入的内容与备选项文字相同时，将会显示智能感应

<input type="text" list="prvince-lis">

   <datalist id="prvince-lis">

​    <option value="山西">

​    <option value="山东">

​    <option value="广西">

​    <option value="广东">

​    <option value="湖南">

​    <option value="湖北">

​    <option value="河南">

​    <option value="河北">

​    <option value="福建">

​    <option value="安徽">

   </datalist>

5、重点内容

表单如何创建? 常用的表单元素有哪些? 单选按钮、复选框使用时要注意什么?

6、难点内容

熟背每种表单元素的type属性，不要弄混

五、表格标签

1、<table>、<tr>和<td>标签

table：表格的意思，table row：表格行，table data：表格数据。

border属性：显示边框

<table border="1">

caption属性：表格的标题，它常常作为

的第一个子元素出现。

<th>：“标题小格”，可以替代<td>的作用，表示标题小格。

colspan属性用来设置td或者th的列跨度。

rowspan属性用来设置td或者th的行跨度。

可以同时有rowspan、colspan属性。

2、表格的其他特性

<thead>标签定义表头。 <tbody>标签定义表核心内容。 <tfoot>标签定义表脚，通常是汇总行。

3、重点内容

table、tr、 td和th标签的正确使用 实现单元格的合并 caption、thead、tbody和tfoot标签的正确使用

4、难点内容

要多多练习表格的单元格合并，分析出每个小格属于哪行，每行有几个小格，养成自己拆分表格的方法

推荐文章