[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 ...
随机推荐
- tflite
1.编译libtensorflow-lite.a库: ubuntu下交叉环境编译: https://blog.csdn.net/computerme/article/details/80345065 ...
- Centos 学习之路：基础（1）
冯·诺伊曼计算机模型: 采用二进制数表示程序和数据: 能存储程序和数据,并能自动控制程序的执行: 具备运算器.控制器.存储器.输入设备和输出设备5个基本部分. CPU:是控制器及运算器 CPU的架构类 ...
- 【NOIP2013模拟联考5】军训
题目 HYSBZ 开学了!今年HYSBZ 有n 个男生来上学,学号为1-n,每个学生都必须参加军训.在这种比较堕落的学校里,每个男生都会有Gi 个女朋友,而且每个人都会有一个欠扁值Hi.学校为了保证军 ...
- LeetCode--139--单词拆分(python)
给定一个非空字符串 s 和一个包含非空单词列表的字典 wordDict,判定 s 是否可以被空格拆分为一个或多个在字典中出现的单词. 说明: 拆分时可以重复使用字典中的单词.你可以假设字典中没有重复的 ...
- 面试题常考&必考之--http访问一个页面的全流程（Tcp/IP协议）
分析:-http访问一个页面的全流程,也就好比我们在地址栏输入地址,然后点击回车进行访问 该面试题的主要考点是:计算机网络的TCP/IP协议栈 描述图片:首先应用层提交http请求,传到传输层后由,T ...
- mysql Alias操作符 语法
mysql Alias操作符 语法 作用:为列名称和表名称指定别名 大理石构件 语法:SELECT column_name(s) FROM table_name AS alias_name mysql ...
- PHP实现大文件上传和下载
一提到大文件上传,首先想到的是啥??? 没错,就是修改php.ini文件里的上传限制,那就是upload_max_filesize.修改成合适参数我们就可以进行愉快的上传文件了.当然啦,这是一般情况下 ...
- 2017乌鲁木齐网络赛 J题 Our Journey of Dalian Ends ( 最小费用最大流 )
题目链接 题意 : 给出一副图,大连是起点,终点是西安,要求你求出从起点到终点且经过中转点上海的最小花费是多少? 分析 : 最短路是最小费用最大流的一个特例,所以有些包含中转限制或者经过点次数有限制的 ...
- POJ 1011 Sticks（搜索 && 剪枝 && 经典）
题意 : 有n根木棍(n<=64),它们由一些相同长度的木棍切割而来,给定这n根木棍的长度,求使得原来长度可能的最小值. 分析 : 很经典的深搜题目,我们发现答案只可能是所有木棍长度总和的因数, ...
- #431 Div2 Problem B Tell Your World (鸽巢原理 && 思维)
链接 : http://codeforces.com/contest/849/problem/B 题意 : 给出 n 个在直角坐标系上的点,每个点的横坐标的值对应给出的顺序序数,比如 1 2 4 3 ...