HTML
HTML5的基本结构
网页标题
主体内容
起始标签<元素名> 终止标签
标签是否大小写无所谓。
元素
常见元素：块级元素（block）和内联元素（inline）
空元素：没有内容的html,空元素是在起始标签里面被关闭的，
- 文档类型声明
- 根标签
首部标签
可包含
</code>和<code><meta></code>等标签，用于声明页面标题、字符集和关键词等</p> </blockquote> <h2 id="1网页标题标签title">1、网页标题标签<code><title></code></h2> <p>可以省略，但尽量就不要省略了，否则网页标题就会显示为“无网页标题”<br> 2、基础地址标签<code><base></code><br> 这个标签用于为页面上所有的链接设置默认URL地址或目标target。当HTML5文档使用了相对路径时，浏览器会用<code><base></code>标签指定的URL进行补全。</p> <pre><code class="language-html"><head> <base herf="http://localhost/images/"/> </head> <body> <img src="sunflower.jap"/> </body> </code></pre> <ul> <li>元数据标签<code><meta></code><br> 定义网页上的字符集、关键词、描述、作者等信息。<br> 1）字符集声明<br> 2）关键词声明<br> 格式： <code><meta name="description" content="HTML5,CSS3,jQuery"/></code><br> 3）页面描述声明</li> </ul> <pre><code class="language-html"> <meta name="description"content="内容，CSS3，jQuery"/> </code></pre> <ul> <li>样式标签<code><style></code><br> 这个呢就是可以定义文档中指定区域的字体风格、背景颜色、对齐方式等各类的样式信息。<br> eg.</li> </ul> <pre><code class="language-html"><head> <style> p {color: red} </style> </head> <body> <p>这是一个段落。</p> </body> </code></pre> <p>先举个例子，以后再说哈</p> <ul> <li> <p>链接标签<code><link></code><br> 它只出现在首部标签和中，通常用于连接外部样式表。</p> </li> <li> <p>脚本标签<code><script></code></p> </li> <li> <p>主体标签<code><body></code></p> </li> </ul> <h2 id="--html5文档注释">- HTML5文档注释</h2> <blockquote> <p>格式： <code><!--你要注释的内容--></code></p> </blockquote> html中的多行注释语法，标记内可转行。与c语言里面的/* */,Java里面的/** */， /* */作用一样。类比html中的双标签。 //在c，java等中属于单行注释。不能够在标记内转行。类比html中的单标签。 <h2 id="文档规范">文档规范</h2> <h2 id="1文件类型">1.文件类型</h2> <p>文件后缀名：.html 或者 .htm (兼容）<br> 2.元素标签格式<br> 除了 DOCTYPE大写 以外都要小写<br> 标签一般都是成双存在，但是换行标签<code><br></code>和水平线标签<code><hr></code><br> 是可以成单存在的。<br> 3.字符实体的使用<br> 有些字符在HTML中不可以使用比如>，<，连续空格，等；这些被称为字符实体<br> 格式 ： <code>&实体名称； &#实体数字；</code><br> 以&开头 ；结尾 <br> 具体可以看看下面哈<br> <img src="https://img.yipin100.com/p.php?img=https://img-blog.csdnimg.cn/20210114144459627.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NoZXJyeTEwMTRtaXNz,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" loading="lazy"></p> <h2 id="4图像文件的使用">4.图像文件的使用</h2> <p>JPEG，GIF，PNG,图像格式一般有这些<br> 1）JPEG格式<br> 后缀 .jap .JPG</p> <ul> <li>支持高级压缩</li> <li>弹性压缩比</li> <li>广泛支持互联网标准<br> 2）GIF 格式<br> 后缀 .gif .GIF<br> 3）PNG格式<br> 后缀 .png .PNG</li> <li>文件体积小</li> <li>最后一点呢就是将4.01转换为5.0</li> </ul> <h2 id="html5保留的常用标签">HTML5保留的常用标签</h2> <h2 id="基础标签">基础标签</h2> <h2 id="1段落标签p">1.段落标签<code><p></code></h2> <p><code><p></code>和<code></p></code>用于形成一个新的段落</p> <h2 id="2标题标签h1h6">2.标题标签<code><h1></code>~<code><h6></code></h2> <blockquote> <p>HTML5<br> 使用<code><hn></code>和<code></hn></code>来标记文本中的标题，其中n需要替换成数字。从1~6共有6级。数字越小，<hn>标签所标记的字体越大。</hn></p> </blockquote> <p>标签标题的默认状态为左对齐显示的黑体字。</p> <h2 id="3-水平线标签hr">3. 水平线标签<code><hr></code></h2> <blockquote> <p>水平线标签<code><hr></code>用于在网页上画一条水平线，从而在视觉上将文本分段。<code><hr></code>标签没有结束标签！！！！</p> </blockquote> <p>默认情况下是一条宽度为1像素的黑色水平线</p> <h2 id="4换行标签br">4.换行标签<code><br></code></h2> <blockquote> <p>这个标签呢是用于在当前位置产生一个换行，相当于一次回车键所产生的效果。该标签单独使用</p> </blockquote> <p>（提示 <code><hr></code>也是）</p> <blockquote> <p>建议使用该标签代替回车键，因为回车键所产生的多个连续换行会被浏览器自动忽略。<br> <br>每次只能换一行，如果需要多次换行，必须写多个<br>标签<br> tips：若需要保留换行，tab，空格等格式，可以将p标签改为pre标签。（换行 - hr标签，空格 - ）</p> </blockquote> <h2 id="文本格式标签">文本格式标签</h2> <h2 id="1斜体字标签i">1.斜体字标签<code><i></code></h2> <blockquote> <p><i>用于将其首尾标签之间的文本内容显示为斜体字型效果。</i></p><i> </i></blockquote><i> <h2 id="2粗体字标签b和strong">2.粗体字标签<code><b></code>和<code><strong></code></h2> <blockquote> <p>粗体字标签<code><b></code>和<code><strong></code>均可以将首尾标签之间的文本内容显示为粗体字型效果。区别在于使用<code><strong></code>标签的文本内容被认为是重要的内容</p> </blockquote> <h2 id="3上标标签sup和下标标签sub">3.上标标签<code><sup></code>和下标标签<code><sub></code></h2> <blockquote> <p><code><sup></code>和<code></sup></code>之间显示的是上标的样式； <code><sub></code>和<code></sub></code>之间显示的是下标的样式。</p> </blockquote> <h2 id="4修订标签del和ins的简单应用">4.修订标签<code><del></code>和<code><ins></code>的简单应用</h2> <p>del删除线<br> ins下划线</p> <h2 id="5预格式化标签pre">5.预格式化标签<code><pre></code></h2> <blockquote> <p>预格式化标签<code><pre></code>和<code></pre></code>可以将所标记的文本内容在显示时<br> 保留换行与空格的排版效果。在没有使用标签的普通情况下，浏览器将多次使用回车键形成的换行默认为一次换行，并且把多次空格键形成的连续空格默认为单个空格，在段落开头的连续空格甚至会被忽略。当需要多次使用<code><br></code>和<code> </code>符号分别进行换行和空格时，可以考虑使用此标签提高效率。</p> </blockquote> <pre><code class="language-html"><DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>预格式化的简单应用 预格式化标签的用法
## 文本格式标签 ## 1.斜体字标签`` > 用于将其首尾标签之间的文本内容显示为斜体字型效果。 ```html斜体字体的简单应用 斜体字标签的简单用法
我是非斜体字
我是斜体字2.粗体字标签
和粗体字标签
和均可以将首尾标签之间的文本内容显示为粗体字型效果。区别在于使用标签的文本内容被认为是重要的内容粗体字标签的简单应用 粗体字标签的用法
我是非粗体字
我是粗体字（使用了b标签）
使用了strong标签3.上标标签
和下标标签
和之间显示的是上标的样式；和之间显示的是下标的样式。上标与下标标签的简单应用 上标标签与下标标签的简单应用
上标标签的用法；210=1024
下标标签的用法；二氧化碳的缩写为CO24.修订标签
和的简单应用del删除线
ins下划线5.预格式化标签
预格式化标签
和可以将所标记的文本内容在显示时
保留换行与空格的排版效果。在没有使用标签的普通情况下，浏览器将多次使用回车键形成的换行默认为一次换行，并且把多次空格键形成的连续空格默认为单个空格，在段落开头的连续空格甚至会被忽略。当需要多次使用和符号分别进行换行和空格时，可以考虑使用此标签提高效率。列表标签
1.有序列表标签
ordered list
有序列表标签
和用来定义带有编号的有序列表，需要和列表项目标签配合使用。
列表项目标签标记在每个表项的开头，默认为缩进显示效果。通俗来说，就是
标签要和标签一起使用有序列表默认的起始数值是1
- 可用start属性重新定义编号起始值，格式为：
其中n需要替换为指定的编号数值，写成几就代表从几开始编号。
默认的编号样式是阿拉伯数字，如果需要使用其他的，需要用type属性进行声明。
2.无序列表标签
和用于定义不带编号的无序列表,也需要和 li 标签配合使用。
3.定义列表标签
用于进行词条定义的特殊列表，每条表项需要结合下面两个标签一起使用
词条标签
，需要标记在每个词条的开头
定义标签，需要标记在每个定义部分的开头，默认为全文缩进显示图像标签
用于在网页中嵌入图片，该标签不需要结束标签，可单独使用。（hr,br）也一样不需要结束标签。
标签有两个常用属性：src属性和alt属性。src(source)用于指明图像的存储路径，通常是URL形式。alt(alternative)用于无法找到图像时显示替代文本，该属性可省略不写。
基本格式
其中“图像文件 URL"替换为图片储存的路径，例如，图片文件为111.jap,并存放在本地的222文件夹中，则可以写为
如果图片和网页文件在同一个目录中，则直接写图片名称即可。
