HTML讲解（HTML结构及标签）

Youcan.

已于 2022-04-20 18:17:56 修改

阅读量7.1k

点赞数 13

于 2022-04-20 16:45:58 首次发布

本文链接：https://blog.csdn.net/m0_48273471/article/details/124264611

版权

Java 同时被 2 个专栏收录

76 篇文章 3 订阅

订阅专栏

JavaEE

41 篇文章 2 订阅

订阅专栏

1. HTML结构

1.1 HTML 基本结构

<html>

         <head>

                 <title>第⼀个⻚⾯</title>

         </head>

         <body>

                 hello world

         </body>

</html>

html 标签是整个 html ⽂件的根标签(最顶层标签)

head 标签中写⻚⾯的属性.

body 标签中写的是⻚⾯上显示的内容

title 标签中写的是⻚⾯的标题.

⼤部分标签成对出现， <body> 为开始标签, </body> 为结束标签，少数标签只有开始标签, 称为 "单标签".

1.2 标签层次结构

● ⽗⼦关系

● 兄弟关系

head 和 body 是 html 的⼦标签 ( html 就是 head 和 body 的⽗标签)

title 是 head 的⼦标签. head 是 title 的⽗标签.

head 和 body 之间是兄弟关系.

标签之间的结构关系, 构成了⼀个 DOM 树：

在 IDEA 中创建⽂件 xxx.html , 直接输⼊ ! , 按 tab 键, 此时能⾃动⽣成代码的主体框架.

2. HTML常见标签

2.1 注释标签

< !-- 注释 -- >

ctrl + / 快捷键可以快速进⾏注释/取消注释.

2.2 标题标签

有六个, 从 h 1 - h 6 . 数字越⼤, 则字体越⼩.

<h1>hello</h1>

<h2>hello</h2>

<h3>hello</h3>

<h4>hello</h4>

<h5>hello</h5>

<h6>hello</h6>

2.3 段落标签

<p>这是⼀个段落</p>

p 标签描述的段落, 前⾯还没有缩进

2.4 换⾏标签: br

br 是 break 的缩写. 表示换⾏。

br 是⼀个单标签 (不需要结束标签 ) 。

<br/> 是规范写法 . 不建议写成 <br> 。

2.5 格式化标签

加粗: strong 标签和 b 标签

倾斜: em 标签和 i 标签

删除线: del 标签和 s 标签

下划线: ins 标签和 u 标签

<strong>strong 加粗</strong> <b>b 加粗</b>

<em>倾斜</em> <i>倾斜</i>

<del>删除线</del> <s>删除线</s>

<ins>下划线</ins> <u>下划线</u>

2.6 图⽚标签: img

img 标签必须带有 src 属性. 表示图⽚的路径.

当这个rose.jpg 和 html 在一个目录下，可以直接表示为 <img src="rose.jpg">

对于⼀个复杂的⽹站, ⻚⾯资源很多, 这种情况可以使⽤⽬录把这些⽂件整理好：

        1. 相对路径: 以 html 所在位置为基准, 找到图⽚的位置.

             同级路径: 直接写⽂件名即可 (或者 ./)

下⼀级路径: image/1.jpg

上⼀级路径: ../image/1.jpg

        2. 绝对路径: ⼀个完整的磁盘路径, 或者⽹络路径。例如

磁盘路径 D:\rose.jpg

            ⽹络路径 https://images0.cnblogs.com/blog/130623/201407/300958470402077.p

ng

img 标签的其他属性：

        alt: 替换⽂本. 当⽂本不能正确显示的时候, 会显示⼀个替换的⽂字.

         title : 提示⽂本. ⿏标放到图⽚上, 就会有提示.

         width/height: 控制宽度⾼度. ⾼度和宽度⼀般改⼀个就⾏, 另外⼀个会等⽐例缩放. 否则就会图⽚失衡.

         border: 边框, 参数是宽度的像素. 但是⼀般使⽤ CSS 来设定.

代码示例：

1. 使⽤相对路径: 创建⼀个 image ⽬录和 html 同级, 并放⼊⼀个 rose 2 .jpg

         <img src="image/rose2.jpg" alt="">

2. 使⽤相对路径 2 : 在 image ⽬录中创建⼀个 html, 并访问上级⽬录的 rose.jpg

         <img src="../rose.jpg" alt="">

3. 使⽤绝对路径 1 : 最好使⽤ / , 不要使⽤ \

         <img src="D:/rose.jpg" alt="">

4. 使⽤绝对路径 2 : 使⽤⽹络路径



         <img src = "https:// images0.cnblogs.com/blog/130623/201407/300958475557219.png"

alt="">

5. 设置宽度和高度，边框

  <img src = "https:// images0.cnblogs.com/blog/130623/201407/300958475557219.png"

alt="" width = "300px" heigth = "300px" border = "1px" >

或者

  <img src = "https:// images0.cnblogs.com/blog/130623/201407/300958475557219.png"

alt="" width = "30%" heigth = "300%" border = "1px" >

注意：

        1. 属性可以有多个, 不能写到标签之前

        2. 属性之间⽤空格分割, 可以是多个空格, 也可以是换⾏.

        3. 属性之间不分先后顺序

        4. 属性使⽤ "键值对" 的格式来表示

2.7 超链接标签: a

href: 必须具备, 表示点击后会跳转到哪个⻚⾯.

target: 打开⽅式. 默认是 self. （当前页面打开此链接）如果是 blank 则⽤新的标签⻚打开.（新页面打开此链接）

链接的⼏种形式:

外部链接: href 引⽤其他⽹站的地址

<a href="http://www.baidu.com">百度</a>

内部链接: ⽹站内部⻚⾯之间的链接. 写相对路径即可

先创建⼀个 1 .html <a href="2.html">点我跳转到 2.html</a>

空链接: 使⽤ # 在 href 中占位.

<a href="#">空链接</a>

下载链接: href 对应的路径是⼀个⽂件. (可以使⽤ zip ⽂件)

<a href="test.zip">下载⽂件</a>

⽹⻚元素链接: 可以给图⽚等任何元素添加链接(把元素放到 a 标签中)

<a href="http://www.sogou.com">

<img src="rose.jpg" alt="">

</a>

锚点链接: 可以快速定位到⻚⾯中的某个位置.

<a href="#one">第⼀集</a>

<a href="#two">第⼆集</a>

<a href="#three">第三集</a>

<p id="one">

第⼀集剧情 <br>

第⼀集剧情 <br>

...

</p>

<p id="two">

第⼆集剧情 <br>

第⼆集剧情 <br>

...

</p>

<p id="three">

第三集剧情 <br>

第三集剧情 <br>

...

</p>

禁⽌ a 标签跳转: <a href="javascript:void(0);"> 或者 <a href="javascript:;">

2.8 表格标签

基本使用：

table 标签 : 表示整个表格。 table 包含 tr , tr 包含 td 或者 th.

tr: 表示表格的⼀⾏

td: 表示⼀个单元格

th: 表示表头单元格. 会居中加粗

thead: 表格的头部区域(注意和 th 区分, 范围是⽐ th 要⼤的)

tbody: 表格得到主体区域.

设置⼤⼩边框等. 但是⼀般使⽤ CSS ⽅式来设置。

这些属性都要放到 table 标签中.

align：是表格相对于周围元素的对⻬⽅式. align="center" (不是内部元素的对⻬⽅式)

border： 表示边框. 1 表示有边框(数字越⼤, 边框越粗), "" 表示没边框.

cellpadding: 内容距离边框的距离, 默认 1 像素

cellspacing: 单元格之间的距离. 默认为 2 像素

width / height: 设置尺⼨.

合并单元格：

跨⾏合并: rowspan="n"

跨列合并: colspan="n"

步骤：

1. 先确定跨⾏还是跨列

2. 找好⽬标单元格(跨列合并, 左侧是⽬标单元格; 跨⾏合并, 上⽅是⽬标单元格)

3. 删除的多余的单元格

2.9 列表标签

主要使⽤来布局的. 整⻬好看

⽆序列表 [重要] ul li , . （ol : unorder list）

有序列表 [⽤的不多] ol li （ol : order list）

⾃定义列表 [重要] dl (总标签) dt (⼩标题) dd (围绕标题来说明) 上⾯有个⼩标题, 下⾯有几个

围绕着标题来展开的。

注意：

元素之间是并列关系

ul / ol 中只能放 li 不能放其他标签, dl 中只能放 dt 和 dd

li 中可以放其他标签.

列表带有⾃⼰的样式, 可以使⽤ CSS 来修改. (例如前⾯的⼩圆点都会去掉)

2.10 表单标签

表单是让⽤户输⼊信息的重要途径。

分成两个部分:

        表单域: 包含表单元素的区域. 重点是 form 标签.

        表单控件: 输⼊框, 提交按钮等. 重点是 input 标签.

        <form action="test.html">

          ... [form 的内容]

        </form>

a. input 标签：各种输⼊控件, 单⾏⽂本框,密码框，按钮, 单选框, 复选框.

         type： (必须有), 取值种类很多, button, checkbox, text, file, image, password, radio 等.

        name: 给 input 起了个名字. 尤其是对于单选按钮, 具有相同的 name 才能多选⼀.

         value: input 中的默认值.

         checked: 默认被选中. (⽤于单选按钮和多选按钮)

        maxlength: 设定最⼤⻓度.

1. ⽂本框

<input type="text">

2. 密码框

<input type="password">

3. 单选框

性别 :

<input type="radio" name="sex">男

<input type="radio" name="sex" checked="checked">⼥

注意: 单选框之间必须具备相同的 name 属性, 才能实现多选⼀效果.

4. 复选框

爱好 :

<input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input

type="checkbox"> 打游戏

5. 普通按钮

<input type="button" value="我是个按钮">

6. 提交按钮

<form action="test.html">

<input type="text" name="username">

<input type="submit" value="提交">

</form>

提交按钮必须放到 form 标签内. 点击后就会尝试给服务器发送

7. 清空按钮

<form action="test.html">

<input type="text" name="username">

<input type="submit" value="提交">

<input type="reset" value="清空">

</form>

清空按钮必须放在 form 中. 点击后会将 form 内所有的⽤户输⼊内容重置.

8. 选择⽂件

<input type="file">

b. label 标签

搭配 input 使⽤. 点击 label 也能选中对应的单选/复选框, 能够提升⽤户体验.

for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应. (此时点击才是有⽤的)

<label for="male">男</label> <input id="male" type="radio" name="sex">

c. select 标签

下拉菜单

option 中定义 selected="selected" 表示默认选中

<select>

<option>北京</option>

<option selected="selected">上海</option>

</select>

d. textarea 标签

<textarea rows="3" cols="50">

</textarea>

e. ⽆语义标签: div & span

div 标签, division 的缩写, 含义是分割 span 标签, 含义是跨度

就是两个盒⼦. ⽤于⽹⻚布局

div 是独占⼀⾏的, 是⼀个⼤盒⼦.

span 不独占⼀⾏, 是⼀个⼩盒⼦.

<div>

<span>咬⼈猫</span>

<span>咬⼈猫</span>

<span>咬⼈猫</span>

</div>

<div>

<span>兔总裁</span>

<span>兔总裁</span>

<span>兔总裁</span>

</div>

HTML 特殊字符

有些特殊的字符在 html ⽂件中是不能直接表示的, 例如:

空格:  

⼩于号: <

⼤于号: >

按位与:&

Youcan.

关注

13
点赞
踩
106

收藏

觉得还不错? 一键收藏
3
评论
HTML讲解（HTML结构及标签）

HTML的使用及HTML常见标签目录1. HTML结构1.1HTML 基本结构1.2标签层次结构2. HTML常见标签2.1 注释标签2.2 标题标签2.3 段落标签2.4 换⾏标签: br2.5 格式化标签 2.6 图⽚标签: img 2.7 超链接标签: a2.8 表格标签2.9 列表标签2.10 表单标签1. HTML结构1.1HTML 基本结构 <html> <head> ...
复制链接

扫一扫