[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 ...
随机推荐
- 【串线篇】spring boot自定义starter
starter: 一.这个场景需要使用到的依赖是什么? 二.如何编写自动配置 启动器只用来做依赖导入:(启动器模块是一个空 JAR 文件,仅提供辅助性依赖管理,这些依赖可能用于自动装配或者其他类库) ...
- 真正解决iframe高度自适应问题
1.前言 解决iframe高度自适应问题有两种方法1.pym2.手动设置iframe的高度 本文主要是总结第二种实现方式,因为第一种pym.js插件我没用懂 如果使用iframe时,遇到以下的需求: ...
- Django【第7篇】：Django之ORM跨表操作（聚合查询，分组查询，F和Q查询等）
django之跨表查询及添加记录 一:创建表 书籍模型: 书籍有书名和出版日期,一本书可能会有多个作者,一个作者也可以写多本书,所以作者和书籍的关系就是多对多的关联关系(many-to-many); ...
- Git之仓库管理
介绍以及安装: Git 是一个开源的分布式版本控制软件,用以有效.高速的处理从很小到非常大的项目版本管理. Git 最初是由Linus Torvalds设计开发的,用于管理Linux内核开发.Git ...
- 多对多关系表的创建方式、forms组件
目录 多对多关系表的三种创建方式 1.全自动,Django自动创建 2.纯手撸 3.半自动(推荐使用) forms组件 小例子 forms组件 校验器 钩子函数 局部钩子 全局钩子 forms组件常用 ...
- 【C】题解 （五校联考3day2）
分析 这道题看上去很恶心,实际上只用记录四坨东西就能打DP了:y坐标最小的向上射的点.y坐标最大的向下射的点.y坐标最大和最小的向右射的点,转移显然.注意,如果该状态的值为零就可以略过,否则会超时. ...
- IntelliJ IDEA VM options（转）
Custom IntelliJ IDEA VM options # Custom IntelliJ IDEA VM options ##################JVM模式########### ...
- Quick BI的SQL传参建模可以用在什么场景
Quick B的SQL传参建模功能提供基于SQL的数据加工处理能力,减轻了IT支撑人员的工作量.在即席查询SQL中,我们用物理字段显示别名来表示参数的占位符,配置完占位符后,就可以在查询控件中进行参数 ...
- 浙大PAT CCCC L3-013 非常弹的球 ( 高中物理题 )
题目链接 题意 : 刚上高一的森森为了学好物理,买了一个“非常弹”的球.虽然说是非常弹的球,其实也就是一般的弹力球而已.森森玩了一会儿弹力球后突然想到,假如他在地上用力弹球,球最远能弹到多远去呢?他不 ...
- HDU 5919 Sequence ll
Time limit 4500 ms Memory limit 131072 kB OS Windows Source 2016中国大学生程序设计竞赛(长春)-重现赛 中文题意 一个长度为n的序列,里 ...