一、常见的 DOCTYPE 声明
HTML 5
<!DOCTYPE html>
HTML 4.01 Strict
这个 DTD 包含所有 HTML 元素和属性，但不包括表象或过时的元素（如 font ）。框架集是不允许的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
这个 DTD 包含所有 HTML 元素和属性，包括表象或过时的元素（如 font ）。框架集是不允许的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
这个 DTD 与 HTML 4.01 Transitional 相同，但是允许使用框架集内容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
二、html具体内容
1.格式化
- 这是
<sub>下标 和<sup>上标
2.块级元素 与 行内元素
- 块级元素 中能写 行内元素 和 块级元素（简单记：块级元素中几乎什么都能写）。
主体结构标签：<html> <body> 排版标签：<h1> ~ <h6> 、 <hr> 、 <p> 、 <pre> 、 <div>（常用） 文本标签：<blockquote>、<address> 表格标签：<table> 、 <tbody> 、 <thead> 、 <tfoot> 、 <tr> 、<caption> 列表标签：<ul> 、 <ol> 、 <li> 、 <dl> 、 <dt> 、 <dd> 分割标签：<hr> 滚动元素：<marquee> <form> 与 <option> - 行内元素 中能写 行内元素，但不能写 块级元素。行内元素包含如下：
文本标签（常用的标签）：em、strong、span、br 文本标签（不常用的标签）：cite、dfn、del 与 ins、sub 与 sup、code、samp、kbd、abbr、bdo、var、small、b、i、u、q 行内块元素：image a标签： a 元素可以包裹除它自身外的任何元素！ <label> - 行内块元素:
图片： <img> 单元格： <td> 、 <th> 表单控件： <input> 、 <textarea> 、 <select> 、 <button> 框架标签： <iframe> - 一些特殊的规则：
h1~h6 不能互相嵌套。
p 中不要写块级元素。
3.a链接
- 具有 href 属性的 a 标签是超链接，具有 name 属性的 a 标签是锚点。
- name 和 id 都是区分大小写的，且 id 最好别是数字开头。
<a href="./b.html" id="product" target="_blank">跳转到页面</a> <a href="../../resource/video4.mp4" download="video4.mp4">跳转到文件-下载电影</a> <a href="#test1" >去test1锚点</a> .... <a name="test1"></a> <a href="#test2" >去test2锚点</a> .... <p id="test2"></p> <a href="#">回到顶部</a> <a href="">刷新页面</a> <!-- 执行一段js,如果还不知道执行什么，可以留空，javascript:; --> <a href="javascript:alert(1);">点我弹窗</a> <!-- 唤起指定应用 --> <!-- 唤起设备拨号 --> <a href="tel:10010">电话联系</a> <!-- 唤起设备发送邮件 --> <a href="mailto:10010@qq.com">邮件联系</a> <!-- 唤起设备发送短信 --> <a href="sms:10086">短信联系</a>
4.列表
- 有序列表：
<ol><li></li></ol> - 无序列表：
<ul><li></li></ul> - 自定义列表：
<dl><dt>术语名称</dt><dd>术语描述</dd></dl> - 列表可以嵌套，互相嵌套
5.表格
- 一个完整的表格由：表格标题(caption)、表格头部(thead)、表格主体(tbody)、表格脚注(tfoot)，四部分组成。
- rowspan ：指定要跨的行数。
- colspan ：指定要跨的列数。
<table width="200" height="300" border="1" cellspacing="0"> <caption></caption> <thead height="50" align="center" valign="middle"> <th> <td></td> </th> </thead> <tbody height="200" align="center" valign="middle"> <tr> <td></td> </tr> <!-- 跨两行 --> <tr rowspan="2"> <td></td> </tr> <tr> <!-- 跨两列 --> <td rolspan="2"></td> </tr> </tbody> <tfoot height="50" align="center" valign="middle"> <tr> <td></td> </tr> </tfoot> </table>
6.表单
- 禁用表单控件：
给表单控件的标签设置disabled既可禁用表单控件。
input 、 textarea 、 button 、 select 、 option都可以设置disabled属性 input表单中，type类型包含：text、password、radio、checkbox、hidden、button、submit、resetbutton表单中，type类型包含：reset、submit、buttontextarea：文本域，可以设置行和列数，<textarea name="" rows="22" cols="3"> 默认值或者提示值</textarea>- 下拉框
select：默认选中属性：selected，且option中写value属性，提交的值为value值，如果option不写value属性，提交的值为option标签包含的 - 单选
(radio)和多选框(checkbox)：默认选中属性：checked - label 标签：label 标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。
两种与label关联方式如下：- 让
label标签的for属性的值等于表单控件的id。<lable for="account"></lable> <input id="accout" type="text" name="account" value="" maxlength="20" minlength="4" /> - 把表单控件套在 label 标签的里面。
<lable"> <input type="text" name="account" value="" maxlength="20" minlength="4" /> </lable>
- 让
- fieldset 与 legend 的使用：
fieldset 可以为表单控件分组、 legend 标签是分组的标题<fieldset> <legend> 主要信息</legend> 账户：<input type="text" name="account" value="zhangsan" maxlength="20" minlength="4" /><br> 密码：<input type="password" name="password" value="123" /><br> </fieldset>
7.iframe 标签的实际应用：
- 在网页中嵌入广告。
- 与超链接或表单的 target 配合，展示不同的内容
- frameborder：是否显示边框，值：0或者1
<!-- 嵌入普通网页 --> <iframe src="https://www.taobao.com" frameborder="0" width="400" height="300"></iframe> <!-- 嵌入广告页 --> <iframe src="https://pos.baidu.com/hclm?conwid=300&conhei=250&rdid=6404216&dc=3&di=u6404216&s1=161034290&s2=2369418761&dri=1&dis=0&dai=12&ps=1469x758&enu=encoding&exps=110279,110275,110261,110252,110011&ant=0&psi=37bf65c5f07eb5e4&dcb=___adblockplus_&dtm=HTML_POST&dvi=0.0&dci=-1&dpt=none&tpr=1715335758377&ti=%E7%BD%91%E6%98%93&ari=2&ver=0830&vc=%E5%85%8D%E8%B4%B9%E5%85%AC%E5%BC%80%E8%AF%BE&dbv=2&drs=4&pcs=1156x692&pss=1156x9470&cfv=0&cpl=5&chi=1&cce=true&cec=UTF-8&tlm=1715335758&prot=2&rw=692&ltu=https%3A%2F%2Fblue-sea-697d.quartiers047.workers.dev%3A443%2Fhttps%2Fwww.163.com%2F&ltr=https%3A%2F%2Fblue-sea-697d.quartiers047.workers.dev%3A443%2Fhttps%2Fwww.baidu.com%2Flink%3Furl%3D4SnbVqBFEQbGPDyMgS6l7Hh4ldDe7BA4fGx5JPdfQ8S%26wd%3D%26eqid%3D9fcd929e002b642b00000002663df21b&lcr=https%3A%2F%2Fblue-sea-697d.quartiers047.workers.dev%3A443%2Fhttps%2Fwww.baidu.com%2Flink%3Furl%3D4SnbVqBFEQbGPDyMgS6l7Hh4ldDe7BA4fGx5JPdfQ8S%26wd%3D%26eqid%3D9fcd929e002b642b00000002663df21b&eqid=9fcd929e002b642b00000002663df21b&ecd=1&dft=2&uc=1200x1880&pis=-1x-1&sr=1200x1920&tcn=1715335759&qn=8244086f56f9b8ac&ft=1" width="300" height="250" scrolling="no" frameborder="0"></iframe> <!-- 嵌入其他内容 --> <iframe src="../../resource/20000041.png" scrolling="no" width="140"></iframe> <iframe src="../../resource/video4.mp4" scrolling="no" width="140"></iframe> <!-- 与超链接的target属性配合使用 --> <a href="https://www.taobao.com" target="tt">点我看新闻</a><br> <iframe name="tt" frameborder="0" width="900" height="300"></iframe> <!-- 与表单的target属性配合使用 --> <form action="https://so.toutiao.com/search" target="container"> <input type="text" name="keyword" /> <input type="submit" value="搜索" /> </form> <iframe name="container" frameborder="0" width="900" height="300"></iframe>
8. HTML实体
- 字符实体由三部分组成：一个 & 和 一个实体名称（或者一个 # 和 一个实体编号），最后加上一个分号 ; 。
- 常用的： < > 等等
9. HTML全局属性
全局属性 - HTML（超文本标记语言） | MDN (mozilla.org)
- id: 不能再 以下HTML元素中使用：
<head>、<html>、<meta>、<script>、<style>、<title> - dir: 内容方向：值：ltr、rtl， 且不能在以下 HTML 元素中使用
<head>、<html>、<meta>、<script>、<style>、<title> - title: 给标签设置一个文字提示，一般超链接和图片用得比较多。
- lang: 给标签指定语言
W3School 上的说明：《语言代码参考手册》、《国家/地区代码参考手册》
W3C官网上的说明：《Language tags in HTML》
10. meta 元信息
完整的网页元信息，请参考：档级元数据元素 | MDN
当一个
<meta>标签中，有name、http-equiv或者charset三者中任何一个属性时，itemprop属性不能被使用。
<meta> 元素定义的元数据的类型包括以下几种：
- 如果设置了 name 属性，
<meta>元素提供的是文档级别（document-level）的元数据，应用于整个页面。 - 如果设置了
http-equiv属性，<meta>元素则是编译指令，提供的信息与类似命名的HTTP头部相同。 - 如果设置了
charset属性，<meta>元素是一个字符集声明，告诉文档使用哪种字符编码。 - 如果设置了
itemprop属性，<meta>元素提供用户定义的元数据。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
