HTML入门标签整理，入门有它就够了

电玩女神 2023-07-10 05:25 8阅读 0赞

最近学习完了Java的基础部分。按照自己的学习路线应该学习Java wab了。

相对于Java来说，HTML学习想多简单很多。 那么总结一下最近学习的简单标签，和HTML初始代码解读

## HTML初始代码解读： ##

每一个html 文件都需要添加的初始代码，无论什么样的网页，这些代码都是要有的,要符合html文件的规范写法  
!+tab键 : 快速的创建html的初始代码

<!DOCTYPE html>  //文档声明：告诉浏览器这个是一个html文件
    <html lang="en"> //html文件最外层标签，包裹着所有html标签代码，lang=en 表示英文的网址；lang="zh-CN"表示中文文件
    <head>
        <meta charset="UTF-8">  //原信息，UTF-8是编写网页中的辅助信息，让每个国家的语言都可以在页面中展现，不会出现乱码
        <title>Document</title> // 例如淘宝网的最上面，淘我喜欢
    </head>
    //headt头部 输入网址的部分
    
    //正常的网页是body
    <body>
        显示网页内容的区域
    </body>
    </html>

1.HTML 注释？  
写法：  
快捷键：1.ctrl +/  
2.shift+alt+a

2.html语义化：  
所谓html语义化是，根据网页中的内容的结构，选择合适的html标签进行编写

好处：  
1.在没有CSS的情况下，页面也能呈现出很好的结构。  
2.有利于SEO,让搜索引擎爬虫更好的理解网页  
3.方便其他设备解析（如屏幕阅读器，盲人阅读器等）  
4.便于团队开发和维护

3.标题与段落  
标题->双标签：`<h1></h1> ...... <h6></h6>`  
在一个网页中，h1标题最重要，并且一个。html文件中只能出现一次h1标签  
h标签：实现标题  
h5,h6标签在网页中不经常使用  
段落->双标签：`<p></p>`  
p标签：实现段落

4.文本修饰标签  
强调-> 双标签：`<strong></strong>`:加粗  
`<em></em>`:斜体  
上标：`<sup></sup>` 如x的平方 `<p>x<sup>2</sup></p>`  
下标：`<sub></sub>` 如水分子 `<p>H<sub>2</sub>O</p>`

删除文本：`<del></del>`  
插入文本：`<ins></ins>`  
注意：一般情况下删除和插入文本配合使用 如：原价300打折后200

原价`<del>300</del>现价<ins>200</ins></p>`

5.图片标签？  
img—> 单标签  
src：引入图片的地址  
alt:当图片出现问题的时候，可以显示一段友好的提示文字  
title:提示信息  
width：宽度  
height：高度

6.引入文件的地址路径  
相对路径：相对于当前路径用来引用  
`. /`在路径中表示当前路径  
`../`在路径中表示上一级路径  
绝对路径：就是文件的地址  
可以是电脑中的地址（可以不用写盘）  
也开业是网络中文件的链接

7.跳转链接标签

href属性：链接的地址  
target属性：可以改变链接打开的方式，默认情况下：在当前页面打开\_self 新窗口打开\_blank  
`base->单标签`：作用是改变链接的默认行为的

8.跳转锚点  
是方便在页面内进行跳转：如点击文字的大纲，调转到对应的标题

实现方法一  
\#号+id属性 (常用) 例：`<a href="#html">HTML</a>` 则跳转部分为：`<h2 id="html">HTML超文本标记性语言</h2>`  
实现方法二  
\#号+name

16.特殊符号  
编写一些文本时，经常会遇见输入法无法输入的字符，如注册商标，版权符等，还有往一段文字中加入多个空格时，页面并不会解析出多个空格。这些无法输入和空格符都是特殊字符，在HTML中，为这些特殊字符准备了专门的代码

特殊字符的一般格式：\#+字符；  
为了解决多个空格无法显示的问题，以及大于小于符号与< >的区分

空格符  &nbsp；
    版权    &copy；
    注册商标 &reg；
    小于号  &lt；   
    大于号  &gt；
    &和号   &amp；
    人命币  &yen；
    摄氏度  &deg；

17.列表标签：  
1.无序列表  
`<ul>,<li>:`列表的最外层容器，列表项  
注：ul和li必须是组合出现的，他们之间是不能有其他标签的`<li>`之间可以出现其他标签  
type属性：改变前面标记的样式（一般都是用CSS去控制）  
（w3school见标签的属性）  
例如：

*  **一季度财政收入同步增长6.2%；中国经济开局平稳**
 *  *一季度财政收入同步增长6.2%；中国经济开局平稳*>

2.有序列表  
`<ol>,<li>:`列表的最外层容器，列表项  
注：ol和li必须是组合出现的，他们之间是不能有其他标签的

*  之间可以出现其他标签一般用的比较少，可以用无序列表来实现  
    type属性：改变前面标记的样式（一般都是用CSS去控制） 所以一般都会把前面的序号删除掉再用CSS编写  
    （w3school见标签的属性）  
    例如：
 *      <ol>
            <li>第一项</li>
            <li>第二项</li>
            <li>第三项</li>
            </ol>
    
    3.定义列表（列表项需要添加标题和对标题进行描述的内容）  
    `<dl>` ：定义列表  
    `<dt>` ：定义专业术语或名字（列表第一项）  
    `<dd>` : 对名字进行解释和描述（列表第二项）
    
    例如：
    
        <dl>
            <dt>HTML</dt>
            <dd>超文本标记语言</dd>
            <dt>CSS</dt>
            <dd>层叠样式表</dd>
            <dt>JavaScript</dt>
            <dd>网页脚本语言</dd>
        </dl>