[Web 前端] 001 html 常用块级标签
1. html “总体框架”
- 注释写法
<!-- -->
↑
箭头指向处写注释
- “框架”写法
<!DOCTYPE html> <!-- 声明文档，告诉浏览器解析 html 代码的版本 -->
<html> <!-- html 是网页当中最大的标签，与闭合标签配对 -->
<head> <!-- head 头，一般是对网页进行设置 -->
<meta charset="utf-8"> <!-- 设置网页的编码格式 -->
<title>网页的标题</title>
</head>
<body> <!-- body 体，主要用于写显示在页面中的内容 -->
hello html
</body>
</html>
- 效果
网页的标题
hello html
2. 常用的 HTML 块级标签(块元素)
2.1 知识点
<!DOCTYPE html> <!-- html 可以大写，但一般都小写 -->
<html lang="en"> <!-- 将此页面定义为英文网页；lang = "zh": 中文页面 -->
<head>
<meta charset="UTF-8"> <!-- utf-8 大小写均可 -->
<title>常用的 HTML 块级标签</title>
</head>
<body>
<!-- 常用的、有语义的块级元素有默认样式 独占一行 -->
</body>
<html>
2.2 以下 code 均写在 body 体中
2.2.1 标题标签，只有 h1-h6 这 6 级
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
- 效果
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
2.2.2 段落标签
<p>和风熏柳，花香醉人，正是南国春光漫烂季节。</p>
- 效果
和风熏柳，花香醉人，正是南国春光漫烂季节。
2.2.3 列表
2.2.3.1 无序列表 ul + li
<!-- 注意：ul 标签中只能写 li 标签 -->
<ul>
<li>无序列表一</li>
<li>无序列表二</li>
<li>无序列表三</li>
</ul>
- 效果
- 无序列表一
- 无序列表二
- 无序列表三
2.2.3.2 有序列表 ol + li
<!-- 有序列表中有 type 属性和 start 属性
type: 设置有列表的标记类型
start: 设置列表项标记的起始位置 -->
<ol type="i" start="5">
<li>有序列表一</li>
<li>有序列表二</li>
<li>有序列表三</li>
</ol>
- 效果
- 有序列表一
- 有序列表二
- 有序列表三
2.2.3.3 自定义列表 dl + dt + dd
<dl>
<dt>dt 自定义列表一</dt>
<dd>dd 自定义列表一的内容</dd>
<dd>dd 自定义列表一的内容</dd>
<dt>dt 自定义列表二</dt>
<dd>dd 自定义列表二的内容</dd>
</dl>
- 效果（不明显）
- dt 自定义列表一
- dd 自定义列表一的内容
- dd 自定义列表一的内容
- dt 自定义列表二
- dd 自定义列表二的内容
- 效果图
2.2.4 表格标签
<!-- 4.
table 声明一个表格
th 表头（默认水平居中，有加粗效果）
tr 行
td 列 -->
<!-- 4.1 table 的属性：
width: 设置单元格的总体宽度
height: 设置单元格的总体高度
border: 设置边框显示与否
cellpadding: 设置表格中的内容与边框的间距
cellspacing: 设置表格与表格的间距 -->
<!-- 4.2 单元格合并：
colspan: 设置水平方向一个单元格占据的宽度
rowspan: 设置垂直方向一个单元格占据的高度 -->
<!-- 4.3 单元格内容的对齐方式：
水平对齐方式
align: （默认靠左显示）
center: 居中
right: 靠右
垂直对齐方式
valign: （默认垂直居中）
top: 靠上
bottom: 靠下 -->
<!-- 注意：
如果给 tr 设置，会影响整行
如果给 td 设置，只影响当前的单元格 -->
<table border="1" cellpadding="10px" cellspacing="0" width="500px" height="280px">
<tr>
<th colspan="4">表头</th>
</tr>
<!-- 第二行 -->
<tr align="center">
<td rowspan="2">(2, 1) + (3, 1)</td>
<td>(2, 2)</td>
<td>(2, 3)</td>
<td>(2, 4)</td>
</tr>
<!-- 第三行 -->
<tr>
<td>(3, 2)</td>
<td>(3, 3)</td>
<td>(3, 4)</td>
</tr>
<!-- 第四行 -->
<tr>
<td valign="top">(4, 1)</td>
<td align="right" valign="bottom">(4, 2)</td>
<td valign="bottom">(4, 3)</td>
<td align="right" valign="top">(4, 4)</td>
</tr>
</table>
- 效果
| 表头 | |||
|---|---|---|---|
| (2, 1) + (3, 1) | (2, 2) | (2, 3) | (2, 4) |
| (3, 2) | (3, 3) | (3, 4) | |
| (4, 1) | (4, 2) | (4, 3) | (4, 4) |
2.2.5 换行
不加 br；不加 br；不加 br
<br>加 br；
<br>加 br；
<br>加 br
- 效果
不加 br；不加 br；不加 br
加 br；
加 br；
加 br
2.2.6 水平分割线
<!-- hr 的这几个参数在 HTML 4.01 之前还能生效，但不推荐使用
width=50 长度为 50
width=50% 一半长度
align=left 出现在左边
size=1 线加粗-->
<hr><br>
<hr width="50"><br>
<hr width="50%" align="right" size="1">
- 效果
2.2.7 区块元素
<!-- 没有默认样式(没有默认的语义)
div: 独占一行，一般用来划定一块区域，配合 css 在布局中使用 -->
<div>这是一个div</div>
- 效果
[Web 前端] 001 html 常用块级标签的更多相关文章
- [Web 前端] 002 html 常用行行级元素
目录 1. html 常用的行级元素 1.1 链接标签 1.2 a 标签的锚点的使用 1.3 文本标签 1.4 无语义的行级元素 span 1.5 html 中的实体字符 1. html 常用的行级元 ...
- Python web前端 01 HTML常用标签
Python web前端 01 HTML常用标签 一.HTML创建项目 file ---->new project -----> 输入项目名------>创建文件夹 new dicr ...
- html之块级标签h系列,div
两个名词含义: 块级标签:内容再少也会占满整行 内联标签:有多少内容点多少地方 注:块级标签和内联不签不是绝对的,可以通过CSS作任意转换 1.h1-h6 :块级标签 请仅仅把标题标签用作标题文本,如 ...
- <p></p>标签为什么不能包含块级标签?还有哪些特殊的HTML标签？
最近,在码代码的时候,就是下面的这段代码,我犯了一个很不起眼,但犯了就致命的BUG. <body> <p> <ol> <li>Hello</li& ...
- html:常见行内标签，常见块级标签,常见自闭合标签
本文内容: 常见行内标签 常见块级标签 常见自闭合标签 首发日期:2018-02-12 修改: 2018-04-25:删除了不常用的标签 常见行内标签: 什么是行内标签: 行内标签就是在页面内只占据刚 ...
- 【疑点】<p></p>标签为什么不能包含块级标签?还有哪些特殊的HTML标签？
最近,在码代码的时候,就是下面的这段代码,我犯了一个很不起眼,但犯了就致命的BUG. <body> <p> <ol> <li>Hello</li& ...
- html标签的显示模式（块级标签，行内标签，行内块标签）（转）
html标签的显示模式(块级标签,行内标签,行内块标签) 今天讲课的时候,讲到了html中的标签的显示模式,大致分为块级标签和行内标签.那么初学者在刚使用标签的时候会发现有些属性在一些标签上不起作 ...
- 必知干货：Web前端应用十种常用技术你全都知道吗？
Web前端应用十种常用技术,随着JS与XHTML的应用普及,越来越多的web界面应用技术出现在网站上,比如我们常见的日历控件,搜索下拉框等,这些web界面应用技术大大的丰富了网站的表现形式,本文将为您 ...
- 浅谈css的行内类型标签和块级标签
常用标签的行内类型标签有:a.span.img:块级标签有:div.p.h1~6.ul.ol.li.dl.dt.dd. 行内类型标签的特征:标签的大小由标签的内容决定,不能设置width和height ...
随机推荐
- java 中的编码
1.1字节=8位,1024字节=1KB2.16进制0x12345678,其二进制为00010010 00110100 01010110 01111000共4字节3.字节序:两个或多个字节存放的先后顺序 ...
- Kali Linux的发展史，专为数字取证和渗透测试而设计
Kali Linux拥有非常强大的网络功能,Kali Linux是一个Debian衍生的Linux发行版,专为数字取证和渗透测试而设计.它是由OffensiveSecurityLtd维护和资助,是由M ...
- ppt打不开，显示发现文件中的内容有问题。可尝试修复此演示文稿
原因分析 主要是因为文件是网络下载的,office自动锁定了文件(默认不可编辑). 解决办法 在文件上右键-属性-解除锁定(最下面),就不会进行检查了,问题也就解决了. ppt文件---右键---属性 ...
- 8.docker的系统资源限制
一. 概述 默认docker容器使用的memory资源和CPU资源是没有限制的,但是我们可以在docker run的时候通过选项去限制,具体参考官方文档. [root@node1 ~]# docker ...
- 29.密码学知识-消息认证码MAC-6——2019年12月19日
1. 消息认证码 1.1 消息认证 消息认证码(message authentication code)是一种确认完整性并进行认证的技术,取三个单词的首字母,简称为MAC. 思考改进方案? 从哈希函数 ...
- [ByteCTF 2019]EZCMS
题目复现链接:https://buuoj.cn/challenges 参考链接:ByteCTF_2019&XNUCA_2019部分web题复现 一.知识点 1.源码泄露 访问www.zip获取 ...
- Linux学习-LVS跨网段DR模型和FWM多服务绑定
一.实验环境 系统:CentOS7.6 主机:5台 (虚拟机) 客户端1台:172.16.236.134/24 (NAT网卡),网关指向 172.16.236.185/24(路由服务器) 路由服务器1 ...
- Linux的学习：
查看端口: netstat -anop | grep 80 netstat -ntlp 先看看不带n的 再看看带n的 我们发现在local address 即主机地址这一栏中,如果没有带n选项,会将套 ...
- C# 字符串的长度问题
string str = "aa奥奥"; 如果直接取 str.length,取的就是字符的长度,一个汉字也是一个字符,长度就是4. 一个汉字是两个字节,如果需要统计字节数,可以用下 ...
- CG-CTF | MD5
渣渣今天写了一题misc,第一次学习md5的python写法,赶紧记录一波 背景知识: import hashlib md51=hashlib.md5() md52=hashlib.md5() # [ ...