html中hr的粗细调整 html分割线标签加粗 _生活百科

Web前端包含了许多内容，其中HTML是前端的重要基础之一，这篇文章主要对HTML做了一些基本介绍，同时列出了一些常见的标签。
一、HTML是什么？

作用：负责搭建页面结构和内容（盖房子房）
HyperTextMarkupLanguage：超文本标记语言
超文本：指不仅仅是纯文本，还包括字体和多媒体（图片，音频，视频）
标记语言： <开始标签属性=“xxx”>标签体</结束标签>

二、常见标签1.文本标签

内容标题：h1-h6，特点：独占一行，字体加粗，自带上下间距
水平分割线：hr
段落标签：p，特点：独占一行自带上下间距
换行： br
加粗：b
斜体：i
下划线：u
删除线：s

2.列表标签

无序列表： ul和 li
有序列表： ol和li
列表嵌套：有序列表和无序列表可以任意无限嵌套

3.图片标签img

src：资源路径
相对路径：访问站内资源使用
图片和页面在同级目录：直接写图片名
图片在页面的上级目录： `../图片名`
图片在页面的下级目录：文件夹名/图片名
绝对路径：访问站外资源使用, 称为图片盗链,存在找不到图片的风险
alt：当图片不能正常显示时显示的文本
title: 鼠标在图片上悬停时显示的文本
width/height:设置图片的宽高, 两种赋值方式: 1. 像素 2. 百分比如果只设置宽度高度会等比例缩放
无序列表： ul和 li
有序列表： ol和li
列表嵌套：有序列表和无序列表可以任意无限嵌套

4.超链接a

无序列表： ul和 li
有序列表： ol和li
列表嵌套：有序列表和无序列表可以任意无限嵌套

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><a id="top" href="https://www.baidu.com">超链接1</a><a href="http://www.wokk.cn/02简历练习.html">超链接2</a><a href="http://www.wokk.cn/a.jpg">超链接3</a><br><a href="http://www.tmooc.cn"><img src="http://www.wokk.cn/a.jpg" width="100"></a><br><img src="http://www.wokk.cn/a.jpg"><br><img src="http://www.wokk.cn/a.jpg"><br><a href="http://www.wokk.cn/#top">回到顶部</a></body></html>

5.表格标签table

相关标签: table表格 tr表示行 td表示列 th表头 caption表格标题
相关属性: border边框 colspan跨列 rowspan跨行

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><table border=""><caption>购物车</caption><tr><th>编号</th><th>商品名</th><th>价格</th></tr><tr><td>1</td><td>华为Mate 40 pro</td><td>6799</td></tr><tr><td>2</td><td>华为Mate 50 pro</td><td>6799</td></tr><tr><td>3</td><td>华为MatePad pro</td><td>4999</td></tr><tr><td>总价:</td><td colspan="2">18,597元</td></tr></table></body></html>

6.表单form

作用: 获取用户输入的各种信息并且把这些信息提交给服务器
需要学习form表单中的各种控件, 包括: 文本框,密码框,单选,多选,下拉选,日期选择器,文件选择器, 各种按钮等

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><!-- action:提交路径maxlength:最大字符长度value:设置默认值readonly只读 --><form action="https://www.baidu.com">用户名:<input type="text" name="username" maxlength="5" value="http://www.wokk.cn/abc" readonly>密码:<input type="password" name="password"></input><br><!-- value是单选框必须添加的属性,否则提交onchecked默认选中 -->性别:<input type="radio" name="gender" checked value="http://www.wokk.cn/m" id="r1"><label for="r1">男</label><input type="radio" name="gender" value="http://www.wokk.cn/w">女<br>兴趣爱好:<input type="checkbox" name="hobby" value="http://www.wokk.cn/cy">抽烟<input type="checkbox" name="hobby" checked value="http://www.wokk.cn/hj">喝酒<input type="checkbox" name="hobby" value="http://www.wokk.cn/tt">烫头<br>生日:<input type="date" name="birthday"><br>靓照:<input type="file" name="pic"><br>所在地:<select name="city"><option value="http://www.wokk.cn/bj">北京</option><option value="http://www.wokk.cn/sh">上海</option><option value="http://www.wokk.cn/gz">广州</option><option value="http://www.wokk.cn/sjz" selected>石家庄</option></select><br><input type="submit" value="http://www.wokk.cn/注册"></form></body></html>

7.分区标签

作用: 可以理解为是一个容器,将多个有相关性的标签进行统一管理
块级分区标签div: 特点是独占一行
行内分区标签span: 特点是共占一行
页面区域如何划分? 至少分为三大区(头,体,脚) 每个大的区域再划分n个小的区域
HTML5的标准中新增了一些语义更强的分区标签,为了提高代码的可读性. 这几个标签的作用和div一样都是块级分区标签

header头
footer脚
main主体
section区域
nav 导航

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div>块级分区标签1</div><div>块级分区标签2</div><div>块级分区标签3</div><span>行内分区标签1</span><span>行内分区标签2</span><span>行内分区标签3</span><div>头</div><div>体</div><div>脚</div></body></html>

总结【html中hr的粗细调整 html分割线标签加粗】本文介绍了比较常用的html标签及分区的概念。

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：