1-html基本知识

TML基础知识

学习目标

能够知道html的作用
能够写出html的基本结构
能够知道单标签和双标签的区别
知道相对路径和绝对路径的区别
掌握标签的种类
了解表格的边线合并
了解表单中常用的表单元素标签
了解表单的提交方式
了解表单中action属性的作用

一、HTML的介绍

1. 网页效果图 -- 百度

2. html的定义

HTML 的全称为：HyperText Mark-up Language, 指的是超文本标记语言。

标记：就是标签, <标签名称> </标签名称>, 比如: <html></html>、<h1></h1>等，标签大多数都是成对出现的。

所谓超文本，有两层含义:

因为网页中还可以图片、视频、音频等内容(超越文本限制)
它还可以在网页中跳转到另一个网页，与世界各地主机的网页链接(超链接文本)

3. html的作用

html是用来开发网页的，它是开发网页的语言。

二、html 的基本结构

1. 结构代码

<!DOCTYPE html>
<html>
    <head>            
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
          网页显示内容
    </body>
</html>

第一行<!DOCTYPE html>是文档声明, 用来指定页面所使用的html的版本, 这里声明的是一个html5的文档。
<html>...</html>标签是开发人员在告诉浏览器，整个网页是从<html>这里开始的，到</html>结束,也就是html文档的开始和结束标签。
<head>...</head>标签用于定义文档的头部,是负责对网页进行设置标题、编码格式以及引入css和js文件的。
<body>...</body>标签是编写网页上显示的内容。

2. 浏览网页文件

网页文件的后缀是.html或者.htm, 一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页。

3. 小结

三、初始常用的 html 标签

1. 常用的 html 标签

<!-- 1、成对出现的标签：-->

<h1>h1标题</h1>
<div>这是一个div标签</div>
<p>这个一个段落标签</p>


<!-- 2、单个出现的标签： -->
<br>
<img src="images/pic.jpg" alt="图片">
<hr>

<!-- 3、带属性的标签，如src、alt 和 href等都是属性 -->
<img src="images/pic.jpg" alt="图片">
<a href="http://www.baidu.com">百度网</a>

<!-- 4、标签的嵌套 -->
<div>
    <img src="images/pic.jpg" alt="图片">
    <a href="http://www.baidu.com">百度网</a>
</div>

提示:

标签不区分大小写，但是推荐使用小写。
根据标签的书写形式，标签分为双标签(闭合标签)和单标签(空标签) 2.1 双标签是指由开始标签和结束标签组成的一对标签，这种标签允许嵌套和承载内容，比如: div标签 2.2 单标签是一个标签组成，没有标签内容，比如: img标签

2.标签列表

标签	描述
<!--...-->	定义注释
<!DOCTYPE>	定义文档类型
<a>	定义超文本链接
<abbr>	定义缩写
<acronym>	定义只取首字母的缩写，不支持HTML5
<address>	定义文档作者或拥有者的联系信息
<applet>	HTML5中不赞成使用。定义嵌入的 applet。
<area>	定义图像映射内部的区域
<article>	定义一个文章区域
<aside>	定义页面的侧边栏内容
<audio>	定义音频内容
<b>	定义文本粗体
<base>	定义页面中所有链接的默认地址或默认目标。
<basefont>	HTML5不支持，不赞成使用。定义页面中文本的默认字体、颜色或尺寸。
<bdi>	允许您设置一段文本，使其脱离其父元素的文本方向设置。
<bdo>	定义文字方向
<big>	定义大号文本，HTML5不支持
<blockquote>	定义长的引用
<body>	定义文档的主体
<br>	定义换行
<button>	定义一个点击按钮
<canvas>	定义图形，比如图表和其他图像,标签只是图形容器，您必须使用脚本来绘制图形
<caption>	定义表格标题
<center>	HTML5不支持，不赞成使用。定义居中文本。
<cite>	定义引用(citation)
<code>	定义计算机代码文本
<col>	定义表格中一个或多个列的属性值
<colgroup>	定义表格中供格式化的列组
<command>	定义命令按钮，比如单选按钮、复选框或按钮
<datalist>	定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<dd>	定义定义列表中项目的描述
<del>	定义被删除文本
<details>	用于描述文档或文档某个部分的细节
<dfn>	定义定义项目
<dialog>	定义对话框，比如提示框
<dir>	HTML5不支持，不赞成使用。定义目录列表。
<div>	定义文档中的节
<dl>	定义列表详情
<dt>	定义列表中的项目
<em>	定义强调文本
<embed>	定义嵌入的内容，比如插件。
<fieldset>	定义围绕表单中元素的边框
<figcaption>	定义<figure> 元素的标题
<figure>	规定独立的流内容（图像、图表、照片、代码等等）。
<font>	HTML5不支持，不赞成使用。定义文字的字体、尺寸和颜色。
<footer>	定义 section 或 document 的页脚。
<form>	定义了HTML文档的表单
<frame>	定义框架集的窗口或框架
<frameset>	定义框架集
<h1> to <h6>	定义 HTML 标题
<head>	定义关于文档的信息
<header>	定义了文档的头部区域
<hr>	定义水平线
<html>	定义 HTML 文档
<i>	定义斜体字
<iframe>	定义内联框架
<img>	定义图像
<input>	定义输入控件
<ins>	定义被插入文本
<kbd>	定义键盘文本
<keygen>	规定用于表单的密钥对生成器字段。
<label>	定义 input 元素的标注
<legend>	定义 fieldset 元素的标题。
<li>	定义列表的项目
<link>	定义文档与外部资源的关系
<main>	定义文档的主体部分。
<map>	定义图像映射
<mark>	定义带有记号的文本。请在需要突出显示文本时使用 <em> 标签。
<menu>	不赞成使用。定义菜单列表。
<meta>	定义关于 HTML 文档的元信息。
<meter>	定义度量衡。仅用于已知最大和最小值的度量。
<nav>	定义导航链接的部分
<noframes>	定义针对不支持框架的用户的替代内容。HTML5不支持
<noscript>	定义针对不支持客户端脚本的用户的替代内容。
<object>	定义内嵌对象
<ol>	定义有序列表。
<optgroup>	定义选择列表中相关选项的组合。
<option>	定义选择列表中的选项。
<output>	定义不同类型的输出，比如脚本的输出。
<p>	定义段落。
<param>	定义对象的参数。
<pre>	定义预格式文本。
<progress>	定义运行中的进度（进程）。
<q>	定义短的引用。
<rp>	<rp> 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。
<rt>	<rt> 标签定义字符（中文注音或字符）的解释或发音。
<ruby>	<ruby> 标签定义 ruby 注释（中文注音或字符）。
<s>	不赞成使用。定义加删除线的文本。
<samp>	定义计算机代码样本。
<script>	定义客户端脚本。
<section>	<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<select>	定义选择列表（下拉列表）。
<small>	定义小号文本。
<source>	<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
<span>	定义文档中的节。
<strike>	HTML5不支持，不赞成使用。定义加删除线文本。
<strong>	定义强调文本。
<style>	定义文档的样式信息。
<sub>	定义下标文本。
<summary>	<summary> 标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息。
<sup>	定义上标文本。
<table>	定义表格。
<tbody>	定义表格中的主体内容。
<td>	定义表格中的单元。
<textarea>	定义多行的文本输入控件。
<tfoot>	定义表格中的表注内容（脚注）。
<th>	定义表格中的表头单元格。
<thead>	定义表格中的表头内容。
<time>	定义日期或时间，或者两者。
<template>	定义在页面加载时隐藏的一些内容。
<title>	定义文档的标题。
<tr>	定义表格中的行。
<track>	<track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。
<tt>	定义打字机文本。
<u>	不赞成使用。定义下划线文本。
<ul>	定义无序列表。
<var>	定义文本的变量部分。
<video>	<video> 标签定义视频，比如电影片段或其他视频流。
<wbr>	规定在文本中的何处适合添加换行符。

3.HTML 属性

属性	描述
accesskey	设置访问元素的键盘快捷键。
class	规定元素的类名（classname）
contenteditable	规定是否可编辑元素的内容。
contextmenu	指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单
data-*	用于存储页面的自定义数据
dir	设置元素中内容的文本方向。
draggable	指定某个元素是否可以拖动
dropzone	指定是否将数据复制，移动，或链接，或删除
hidden	hidden 属性规定对元素进行隐藏。
id	规定元素的唯一 id
lang	设置元素中内容的语言代码。
spellcheck	检测元素是否拼写错误
style	规定元素的行内样式（inline style）
tabindex	设置元素的 Tab 键控制次序。
title	规定元素的额外信息（可在工具提示中显示）
translate	指定是否一个元素的值在页面载入时是否需要翻译

4.小结

学习 html 语言就是学习标签的用法，常用的标签有20多个。
编写 html 标签建议使用小写
根据书写形式，html 标签分为双标签和单标签
单标签没有标签内容，双标签可以嵌套其它标签和承载文本内容

四、资源路径

当我们使用img标签显示图片的时候，需要指定图片的资源路径，比如:

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

这里的src属性就是设置图片的资源路径的，资源路径可以分为相对路径和绝对路径。

1. 相对路径

从当前操作 html 的文档所在目录算起的路径叫做相对路径

示例代码:

<!-- 相对路径方式1 -->
<img src="./images/logo.png">
<!-- 相对路径方式2 -->
<img src="images/logo.png">

2. 绝对路径

从根目录算起的路径叫做绝对路径，Windows 的根目录是指定的盘符，mac OS 和Linux 是/

示例代码:

<!-- 绝对路径 -->
<img src="/Users/apple/Desktop/demo/hello/images/logo.png">
<img src="C:\demo\images\001.jpg">

提示:

一般都会使用相对路径，绝对路径的操作在其它电脑上打开会有可能出现资源文件找不到的问题

五、列表标签

1. 列表标签的种类

无序列表标签(ul标签)
有序列表标签(ol标签)

2. 无序列表

<!-- ul标签定义无序列表 -->
<ul>
    <!-- li标签定义列表项目 -->
    <li>列表标题一</li>
    <li>列表标题二</li>
    <li>列表标题三</li>
</ul>

3. 有序列表

<!-- ol标签定义有序列表 -->
<ol>
    <!-- li标签定义列表项目 -->
    <li><a href="#">列表标题一</a></li>
    <li><a href="#">列表标题二</a></li>
    <li><a href="#">列表标题三</a></li>
</ol>

六、表格标签

1. 表格的结构

表格是由行和列组成，好比一个excel文件

2. 表格标签

<table>标签：表示一个表格

<tr>标签：表示表格中的一行

<td>标签：表示表格中的列
<th>标签：表示表格中的表头

示例代码:

<table border="1" cellspacing="3">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>18</td> 
    </tr>
</table>

表格边线合并:

border-collapse 设置表格的边线合并，如：border-collapse:collapse;

七、表单标签

1. 表单的介绍

表单用于搜集不同类型的用户输入(用户输入的数据)，然后可以把用户数据提交到web服务器。

2. 表单相关标签的使用

<form>标签表示表单标签，定义整体的表单区域
<label>标签表示表单元素的文字标注标签，定义文字标注
<input>标签表示表单元素的用户输入标签，定义不同类型的用户输入数据方式
type属性
type="text" 定义单行文本输入框
type="password" 定义密码输入框
type="radio" 定义单选框
type="checkbox" 定义复选框
type="file" 定义上传文件
type="submit" 定义提交按钮
type="reset" 定义重置按钮
type="button" 定义一个普通按钮
<textarea>标签表示表单元素的多行文本输入框标签定义多行文本输入框
<select>标签表示表单元素的下拉列表标签定义下拉列表
<option>标签与<select>标签配合，定义下拉列表中的选项

示例代码:

<form>
    <p>
        <label>姓名：</label><input type="text">
    </p>
    <p>
        <label>密码：</label><input type="password">
    </p>
    <p>
        <label>性别：</label>
        <input type="radio"> 男
        <input type="radio"> 女
    </p>
    <p>
        <label>爱好：</label>
        <input type="checkbox"> 唱歌
        <input type="checkbox"> 跑步
        <input type="checkbox"> 游泳
    </p>
    <p>
        <label>照片：</label>
        <input type="file">
    </p>
    <p>
        <label>个人描述：</label>
        <textarea></textarea>
    </p>
    <p>
        <label>籍贯：</label>
        <select>
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
            <option>深圳</option>
        </select>
    </p>
    <p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </p>
</form>

3. 小结

表单标签是<form>标签
常用的表单元素标签有: <label>、<input>、<textarea> 、 <select>等标签

八、表单提交

1. 表单属性设置

<form>标签表示表单标签，定义整体的表单区域

action属性设置表单数据提交地址
method属性设置表单提交的方式，一般有“GET”方式和“POST”方式, 不区分大小写

2. 表单元素属性设置

name属性设置表单元素的名称，该名称是提交数据时的参数名
value属性设置表单元素的值，该值是提交数据时参数名所对应的值

3. 示例代码

 <form action="https://www.baidu.com" method="GET">
    <p>
        <label>姓名：</label><input type="text" name="username" value="11" />
    </p>
    <p>
        <label>密码：</label><input type="password" name="password" />
    </p>
    <p>
        <label>性别：</label>
        <input type="radio" name="gender" value="0" /> 男
        <input type="radio" name="gender" value="1" /> 女
    </p>
    <p>
        <label>爱好：</label>
        <input type="checkbox" name="like" value="sing" /> 唱歌
        <input type="checkbox" name="like" value="run" /> 跑步
        <input type="checkbox" name="like" value="swiming" /> 游泳
    </p>
    <p>
        <label>照片：</label>
        <input type="file" name="person_pic">
    </p>
    <p>
        <label>个人描述：</label>
        <textarea name="about"></textarea>
    </p>
    <p>
        <label>籍贯：</label>
        <select name="site">
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">广州</option>
            <option value="3">深圳</option>
        </select>
    </p>
    <p>
        <input type="submit" name="" value="提交">
        <input type="reset" name="" value="重置">
    </p>
</form>

4.小结

表单标签的作用就是可以把用户输入数据一起提交到web服务器。
表单属性设置

action: 是设置表单数据提交地址
method: 是表单提交方式，提交方式有GET和POST

表单元素属性设置

name: 表单元素的名称，用于作为提交表单数据时的参数名
value: 表单元素的值，用于作为提交表单数据时参数名所对应的值

TML5是HTML的最新版本，HTML又称为超文本语言。如今几乎所有的智能手机和平板电脑都能支持HTML5。HTML5培训认为它的主要目的是用来开发更优秀、更高效的Web应用，它是在开放Web标准下开发的API和规范的。对于iOS和Android设备，都能很好的支持HTML5，因为它们运行的浏览器Safari、Chrome都基于WebKit，WebKit对HTML5有相当出色的支持。

Web应用

Web应用是指与桌面应用相似的web应用（Word、IE、Web浏览器），简而言之，Web应用就是不直接在计算机上打开，而是通过Web浏览器来运行。使用HTML5为iOS和Android设计Web页面的好处是在未来的设备上可以继续使用。

HTML5中的新标签

<article>-文档或站点的一个独立部分

<aside>-页面或站点主题之外的内容

<figcaption>-figure元素的标题

<figure>-独立于文本流之外的一段流内容（图形、图表）

<footer>-文档或章节的页脚

<header>-文档或标题的页眉

<hgroup>-标题组

<nav>-导航

<section>-章节部分

以下是一小段代码：

在许多Web设计中，<div id = "header">，在HTML5中将写成<header>，还有一些其他不同变化。

HTML5新的多媒体标签

<audio>-内嵌音频文件

<canvas>-内嵌动态图形

<source>-内嵌音频及视频的源文件

<track>-内嵌音频及视频的辅助多媒体轨道

<video>-内嵌视频文件

HTML5 的新属性

onabort-操作终止时触发

onbeforeonload、onbeforeonunload、onunload-在某一元素记载或卸载之前或同时触发

oncontextmenu-打开菜单时触发

ondrag、ondragend、ondragenter、ongragleave、ongragstart、ongrop-发生拖拽时触发

onerror及onmessage-错误或弹出信息时触发

onscroll-用户滚动浏览器滚动条时触发

onresize-调整元素大小时触发

HTML5拥有与视频、音频、Web应用程序、编辑页面内容、拖拽以及展示浏览器历史等功能相关的API，另外H5开放Web还提供于地理定位、Web存储及离线Web应用程序的API，这些都非常适合在移动设备上使用。

用CSS3设计移动页面样式

CSS（层叠样式表），是移动Web开发中的一个重要组成部分，CSS用于定义HTML文档的外观，Web页面显示或特定移动设备来定制HTML样式。创建CSS样式表，CSS由附加了样式属性的一个或者多个选择器组成。例如在更改段落的文本颜色时，可以写为：

p {

color：red；

}

p为选择器，样式属性为color：red。如果要加入第二个选择器，需要逗号隔开

p， .redText }

color: red

}

样式表附加到Web页面的方法：

1、内联在标签中

2、内嵌于HTML开头

3、放在一个独立文档作为样式表

内联：

将单一段落的文本颜色定位为红色

内联的缺点是只能定义所在标签的样式，如果要讲所有段落都定义为红色时，需要就爱那个样式属性添加在每个段落。

内嵌：

内嵌样式表位于文档的<head>标签中，使用<style>标签，下面是讲所有段落文本设置为红色

效果如下：

内嵌样式与内联样式一样，只能影响所处页面的样式。如果我们需要将同一样式作用于其他Web页面，需要将它们分别粘贴到每个页面，这个时候独立的样式表的好处就体现出来了。

外联样式表

创建外联样式表的步骤：

1.打开一个新文档

2.编写样式表，但是要去掉<style>标签

3. 讲该文件保存为扩展名为.css的样式表文件,例如：style.css

下面的代码是将段落定义为红色并包含其他样式的样式表

ps：完成样式表，要记得讲它附加到Web页面中，在文档开头加一个指向样式表的<link>标签。代码如下：

ps:外联样式表可以提高网站加载速度，如果将所有样式放在同一个文档中的外联样式表

学习无止境，郑州HTML5培训哪里好，快来蓝鸥HTML5培训看看吧，督促自己不断前进！

JavaScript、CSS 相比，HTML 经过三十多年的发展，似乎逐渐走进无人问津的角落，如何才能让 HTML 再次回到人们视野的中心。

作者 | Yaser Adel Mehraban

译者 | 谭开朗，责编 | 屠敏

出品 | CSDN（ID：CSDNnews）

以下为译文：

有多少次，身为开发者的你编写了一个HTML块而没有意识到可能编码得并不理想?

为什么

HTML一直处于无人问津的角落，因为JavaScript和CSS总是吸引人们的注意力。

请在脑海里先保留这种印象，因为我要用一些简单的技巧来发挥作用，让HTML再次回到人们视野的中心。

以下是创建一目了然、可维护和可扩展的代码的一些方法，其很好的应用了HTML5的语义标记元素，并将在支持的浏览器中正确呈现。

其缘由就不赘述了，让我们来看看具体是什么吧。

文档类型

在index.html的顶部位置，请确保声明了DOCTYPE。这将在所有浏览器中激活标准模式，并告知浏览器该如何编译文档。请记住DOCTYPE不是HTML元素。

HTML5是这样的：

<!DOCTYPE html>

注意:如果应用了框架，这已预先写好。如果没有，我强烈建议使用像Emmet这样的代码片段，它在VS代码中可用。

想了解更多关于其他文档类型的信息吗?点击这里查看参考文件：https://html.com/tags/doctype/。

可选标签

有些标签在HTML5中是可选的，主要是因为元素是隐式呈现的。信不信由你，你可以省略<html>标签，而页面呈现得也很好。

<!DOCTYPE HTML>

<head>
<title>Hello</title>
</head>
<body>
<p>Welcome to this example.</p>
</body>
</html>

上面是一个有效的HTML，但在某些情况下就不能这样做了。例如标签后面跟着注释：

<!DOCTYPE HTML>
<!-- where is this comment in the DOM? -->

<head>
<title>Hello</title>
</head>
<body>
<p>Welcome to this example.</p>
</body>
</html>

上面是无效的，因为注释位于<thml>标签之外，解析树发生了更改。

结束标签

应始终记得结束标签，否则某些浏览器在呈现页面时会出现问题。出于可读性和其他原因，建议保留这些内容，稍后我会详细介绍。

<div id="example">
<img src="example.jpg" alt="example" />
<a href="#" title="test">example</a>
<p>example</p>
</div>

以上都是有效的标签，但也有一些特例，如下。

自闭合标签是有效的，但不是必需的。这些元素包括:

<br>, <hr>, <img>, <input>, <link>, <meta>,
<area>, <base>, <col>, <command>, <embed>, <keygen>, <param>, <source>, <track>, <wbr>

注意:普通元素永远不能有自闭合标签。

<title />

上面显然是无效的。

字符集

预先定义字符集。最好是将它放在顶部元素中。

<head>
<title>This is a super duper cool title, right ?</title>
<meta charset="utf-8">
</head>

上面是无效的，标题无法正确呈现。正确写法是将字符集移到顶部位置。

<head>
<meta charset="utf-8">
<title>This is a super duper cool title, right ?</title>
</head>

语言

不忽略可选标签的另一个原因是在使用属性时。在这种情况下，我们应该定义web页面的语言，这对于可访问性和搜索非常重要。

<html lang="fr-CA">
...
</html>

标题

永远不要忽略标题标签，否则可访问性太差了。我个人就永远不会使用这样的网站,因为我刚打开它即刻在20多个页面后就找不到了(浏览器选项卡不会有任何显示)。

base标签

这是一个非常有用的标签，应该谨慎使用。它将设置应用程序的基本URL。一旦设置好，所有链接都将相对于这个基本URL，这可能会导致一些不必要的行为:

<base href="http://www.example.com/" />

通过以上设置，href="#internal"将被编译为href=http://www.example.com/#internal。或者href="example.org"将被编译为href="http://www.example.com/example.org"。

描述

这个meta标签非常有用，尽管严格来说它不是最佳写法。但在搜索引擎时，这是超级有用的。

<meta name="description" content="HTML best practices">

这有一个帖子“搜索引擎优化正盛行”：https://yashints.dev/blog/2019/06/11/seo-tips。

语义标签

虽然可以使用div创建UX工程师的线框，但这并不意味着必须这样做。语义HTML为页面提供了意义，而不单纯是内容显示。像p、section、h{1-6}、main、nav等标签都是语义标签。如果使用p标签，用户将知道这表示一段文本，浏览器也知道如何展示它们。

语义HTML超出了本文的范围。但是我们应该进行检查，就好比写作所用的笔，而我们有鼠标。

hr不应该用于格式化

<hr>不是格式化元素，所以不要用它来格式化内容。在HTML5中，这个标签代表了内容的主题分离。正确的用法是这样的:

<p>Paragraph about puppies</p>
<p>Paragraph about puppies' favourite foods</p>
<p>Paragraph about puppies' breeds</p>
<hr>
<p>Paragraph about why I am shaving my head </p>

使用title属性时要小心

title属性是一个功能强大的工具，它可以帮助阐明页面上元素的操作或目的，比如工具提示。但是，它不能与图像上的alt等其他属性互换。

HTML 5 规范道:

目前不鼓励依赖title属性，因为很多用户代理不按照规范的访问方式来暴露该属性（例如，使用鼠标等设备来唤出提示框，而不包括只用键盘或触控键盘的用户，或者现代手机或平板电脑）。

请阅读有关如何正确使用此属性的更多信息：https://html.spec.whatwg.org/multipage/dom.html#the-title-attribute。

单引号或双引号

我见过的许多代码库，他们的标记中混合了这两种形式。这并不好，特别是当你使用一个依赖于单引号的框架时，比如php，当你在一个句子中使用单引号时，就像我现在做的一样。另一个原因是保持一致，这总是好的。不要这样写:

<img alt="super funny meme" src='/img/meme.jpg'>

而写为：

<img alt="super funny meme" src="/img/meme.jpg">

省略布尔值

当涉及到属性的布尔值时，建议省略，因为它们不添加任何值，还会增加标记的权重。

public class MyActivity extends AppCompatActivity {
<audio autoplay="autoplay" src="podcast.mp3">

<!-- instead  -->

<audio autoplay src="podcast.mp3">

省略类型属性

不需要向scriptand样式标签添加type属性。某些服务(如W3C的标记验证工具)还会出现验证错误。

验证标记

可以使用W3C的标记验证等服务以确保有效的标记。

拒绝内联样式

HTML中写的是内容，其如何展示取决于样式。将展示形式留给CSS吧，不要使用内联样式，这将有利于开发人员和浏览器理解你的标记。

总结

这些只是编写标签时要记住的冰山一角。还有很多很好的资源可以让你深入了解，强烈建议你重复阅读。

《GitHub HTML最佳实践》：https://github.com/hail2u/html-best-practices
《W3C School HTML样式指南》：https://www.w3schools.com/html/html5_syntax.asp

希望你喜欢本文，并能写出优雅的标签。

原文：https://dev.to/yashints/let-s-write-html-like-a-pro-28h5

本文为 CSDN 翻译，转载请注明来源出处。

【END】

在线咨询

上一篇：云安全日报200902：谷歌Android系统发现重要漏洞可窃取敏感数据需要尽快升级
下一篇：七小时带你入门HTML+CSS网页设计，知识准备与开发工具（一）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

1-html基本知识

TML基础知识

一、HTML的介绍

1. 网页效果图 -- 百度

2. html的定义

3. html的作用

二、html 的基本结构

1. 结构代码

2. 浏览网页文件

3. 小结

三、初始常用的 html 标签

1. 常用的 html 标签

2.标签列表

3.HTML 属性

4.小结

四、资源路径

1. 相对路径

2. 绝对路径

五、列表标签

1. 列表标签的种类

2. 无序列表

3. 有序列表

六、表格标签

1. 表格的结构

2. 表格标签

七、表单标签

1. 表单的介绍

2. 表单相关标签的使用

3. 小结

八、表单提交

1. 表单属性设置

2. 表单元素属性设置

3. 示例代码

4.小结

您的项目需求