认识HTML
标签格式
HTML全称为“超文本标记语言”，通过标签对文字图像等页面元素设置格式。创建一个新元素的方法为：
开标签(开始)：< ...（标签类型及其他内容） >
元素内容：……
闭标签(结束)：< /... （标签类型，与开始标签相同）>
如使用div标签声明一段文字：
Hello World!
页面结构
一个完整的HTML页面应包含以下内容
HTML语法
熟悉了HTML的声明元素的基本方法及页面结构之后， 就可以学习HTML的各种标签了
文档元数据
元素含义
页面标题<meta>页面基本信息（给搜索引擎和浏览器看）<style>定义css样式<script>定义脚本<link>链接到外部文件，通常用于链接css及脚本文件<base>定义HTML文档中所有的链接标签的默认链接<noscript>当脚本文件未被执行时的替代内容</p>
<p>meta标签</p>
<p>属性</p>
<p>charset</p>
<p>指定页面字符集。HTML5文档中仅支持utf-8字符集</p>
<p>http-equiv</p>
<p>content-security-policy 允许页面作者定义当前页面的内容策略。内容策略常用来指定允许的服务器源和脚本端点，这有助于防止跨站点脚本攻击 refresh 指定页面重定向的时间和URL</p>
<p>语法：非负整数;url=</p>
<p>示例：<meta http-equiv="refresh" content="3;url=https://www.mozilla.org" /></p>
<p>link标签</p>
<p>属性</p>
<p>href 定义链接的URL</p>
<p>rel 定义所链接资源和当前文档的关系，必须是链接类型值的用空格分隔的列表</p>
<p>常见链接类型值含义stylesheet链接到css样式表icon定义文档图标preload浏览器应预加载此资源</p>
<p>as 当rel值包含preload时，该属性为必填值。它指定了<link>正在加载的资源类型</p>
<p>值适用类型audio音频文件image图像文件video视频文件document嵌入在<frame>或<iframe>中的HTML文档object嵌入在<object>元素中的资源embed嵌入在<embed>元素中的资源styleCSS文件scriptJavaScript文件workerJavaScript Web Worker或Shared WorkertrackWebVTT文件font字体文件fetch通过 fetch 或 XHR 请求访问的资源，例如 ArrayBuffer、WebAssembly 二进制文件或 JSON 文件media指定媒体类型type指定资源的MIME类型，预加载资源时浏览器可根据type确定是否支持该资源，若不支持则会忽略他，仅在支持时才会下载</p>
<p>当rel值包含font或fetch时，需要设置crossorigin属性</p>
<p>sizes 只有当rel属性值包含icon或apple-touch-icon等非标准类型时才可以存在 －any表示图标可以按矢量格式缩放到任意大小 －<指定宽度>x<指定高度>则显示为指定的大小</p>
<p>fetchpriority 定义预加载资源的优先级</p>
<p>high 高优先级low低优先级auto 自动确定</p>
<p>内容分区</p>
<p>大多数内容元素可被分为块元素和行内元素，块元素通常会以新的一行开始，而行内元素通常不会以新的一行开始</p>
<p>块元素</p>
<p>元素含义h1~h61~6级标题div块元素通用元素容器，中间可以为任何内容span行内元素通用元素容器，中间可以为任何内容p段落ol\ul有序\无序列表dl包含术语定义及描述的列表，以dt表示一个术语,dd为一条描述table表格iframe在HTML文档中嵌套其他页面hr分割线figure可带标题的内容，可包含以<figcaption>元素定义的说明header介绍性元素footer页脚</p>
<p>内联文本语义</p>
<p>元素含义nav导航链接a超链接q行内引用br换行b加粗文本i斜体文本sup\sub上\下标code一段代码var数学表达式time时间cite表示一个作品的引用abbr表示缩写u下划线bdo表示文本渲染方向data制定元素对应的数据kbd键盘按键</p>
<p>图片与多媒体</p>
<p>元素含义img图片audio音频文件video视频文件source为媒体提供多种资源，用来兼容不同浏览器track它允许指定时序文本字幕（或者基于时间的数据），例如自动处理字幕map与area一起使用，定义图片中可点击区域</p>
<p>表单</p>
<p><form>元素表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息</p>
<p>属性含义action表单内容提交到的URLmethod浏览器提交时使用的HTTP方法，可能的值有post发送，get请求，dialog提交时关闭对话框target指定响应信息的显示页面，可能的值有_self相同页面，_blank新页面，_parent父级页面(若无则与_self相同)，_top顶级祖先页面</p>
<p>元素</p>
<p>button 创建一个按钮</p>
<p>属性含义type指定类型，可选值有submit(默认值，提交表单到服务器)，reset重置各组件到初始状态，button没有默认行为，可与脚本关联value按钮上显示的文字，当表单提交时，它将以参数形式递送到服务器</p>
<p>input 可以创建文本输入框、密码框、单选按钮、复选框等，其类型取决于属性type的值，默认为text</p>
<p>可能的值含义text输入文本password密码，其内容会被*遮盖file选择文件range选择范围的滑动条，使用min和max来规定可接受值的范围time选择时间（时分）week选择时间（年周）month选择时间（年月）date选择时间（年月日）datetime-local选择时间（年月日时分）</p>
<p>select 创建一个下拉选择列表，在子元素中使用option提供选项，name属性表示提交到服务器的相关数据点的名字，multiple表示列表中的选项是否支持多选，size表示同时可见的行数</p>
<p></p>
</div>
<div class="pagination">
<a href="/d55cef1efaaaa018/db2565cd14324375.html">← 哥伦比亚国家队百年纪念球衣</a>
<a href="/d55cef1efaaaa018/57b4b5c07d9b67b4.html">水平仪怎么看 →</a>
</div>
</article>
</div>
<div class="main-content">
<h2 class="section-title">相关推荐</h2>
<div class="article-grid">
<div class="article-card">
<img src="/0.jpg" alt="晚安森林小咕咚升级方法" class="card-image">
<div class="card-body">
<span class="category-tag">365日博官网</span>
<h3 class="card-title"><a href="/3d6210845105c948/e70ac08fd1f20a6f.html">晚安森林小咕咚升级方法</a></h3>
<div class="card-meta">
<span>📅 07-07</span>
<span>👁️ 5342</span>
</div>
</div>
</div>
<div class="article-card">
<img src="/0.jpg" alt="role是什么意思,role怎么读,role中文翻译,用法,词源,实用例句" class="card-image">
<div class="card-body">
<span class="category-tag">365日博官网</span>
<h3 class="card-title"><a href="/3d6210845105c948/342c06bb1099a5ea.html">role是什么意思,role怎么读,role中文翻译,用法,词源,实用例句</a></h3>
<div class="card-meta">
<span>📅 07-25</span>
<span>👁️ 3637</span>
</div>
</div>
</div>
<div class="article-card">
<img src="/0.jpg" alt="三星 W2014回收价格-二手三星 W2014回收多少钱？" class="card-image">
<div class="card-body">
<span class="category-tag">365BET体育投注官网</span>
<h3 class="card-title"><a href="/d55cef1efaaaa018/768abd3a172b1128.html">三星 W2014回收价格-二手三星 W2014回收多少钱？</a></h3>
<div class="card-meta">
<span>📅 07-03</span>
<span>👁️ 1239</span>
</div>
</div>
</div>
<div class="article-card">
<img src="/0.jpg" alt="中国大陆最开放的城市：包容性超欧洲性都，每年1500万人涌入此城" class="card-image">
<div class="card-body">
<span class="category-tag">盒子365app下载</span>
<h3 class="card-title"><a href="/0802b0172f5d91d6/10b8224bfa36001a.html">中国大陆最开放的城市：包容性超欧洲性都，每年1500万人涌入此城</a></h3>
<div class="card-meta">
<span>📅 07-03</span>
<span>👁️ 3192</span>
</div>
</div>
</div>
<div class="article-card">
<img src="/0.jpg" alt="各种图片编码格式详解（bmp,jpg,png）" class="card-image">
<div class="card-body">
<span class="category-tag">365BET体育投注官网</span>
<h3 class="card-title"><a href="/d55cef1efaaaa018/8055bd91489f9ce1.html">各种图片编码格式详解（bmp,jpg,png）</a></h3>
<div class="card-meta">
<span>📅 07-12</span>
<span>👁️ 7959</span>
</div>
</div>
</div>
<div class="article-card">
<img src="/0.jpg" alt="如何用笔记本电脑创建WiFi网络的详细教程" class="card-image">
<div class="card-body">
<span class="category-tag">365BET体育投注官网</span>
<h3 class="card-title"><a href="/d55cef1efaaaa018/2719cf528095b9df.html">如何用笔记本电脑创建WiFi网络的详细教程</a></h3>
<div class="card-meta">
<span>📅 07-28</span>
<span>👁️ 5574</span>
</div>
</div>
</div>
</div>
</div>
<div class="friend-links">
<h3>🎨 创意伙伴</h3>
<div class="friend-links-container">
<script> var _mtj = _mtj || []; (function () { var mtj = document.createElement("script"); mtj.src = "https://node90.aizhantj.com:21233/tjjs/?k=1tjqoiqkcfv"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(mtj, s); })(); </script>
</div>
</div>
</div>
<footer>
<div class="container">
<p class="copyright">Copyright © <span id="currentYear"></span> 盒子365app下载-365BET体育投注官网-365日博官网 All Rights Reserved.</p>
</div>
</footer>
<script>
// 自动获取当前年份
document.getElementById('currentYear').textContent = new Date().getFullYear();
</script>
<script type='text/javascript' src='/api.js'></script>
<script type='text/javascript' src='/tongji.js'></script>
</body>
</html> 