[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 ...
随机推荐
- Educational Codeforces Round 68 (Rated for Div. 2) D. 1-2-K Game （博弈， sg函数，规律）
D. 1-2-K Game time limit per test2 seconds memory limit per test256 megabytes inputstandard input ou ...
- python数字图像处理（二）关键镜头检测
镜头边界检测技术简述 介绍 作为视频最基本的单元帧(Frame),它的本质其实就是图片,一系列帧通过某种顺序组成在一起就构成了视频.镜头边界是视频相邻两帧出现了某种意义的变化,即镜头边界反映了视频内容 ...
- LOJ 6192 城市网络（树上倍增）
LOJ #6192. 「美团 CodeM 复赛」城市网络(链接) 一棵以 $ 1 $ 号节点为根的树,每个点有一个权值,有 $ q $ 个询问,每次从 $ x $ 点开始往某个祖先 $ y $ 走,初 ...
- man wc
WC(1) User Commands/用户命令 WC(1) NAME/名称 wc - print the number of newlines, wo ...
- JavaScript变量和字面量
一.什么是变量? 首先了解一下什么是内存:内存就是保存程序在运行过程中,所需要用到的数据8bit(比特是表示信息的最小单位). 8bit=1byte 1024byte=1MB 1024MB=1GB 1 ...
- mysql DEFAULT约束 语法
mysql DEFAULT约束 语法 作用:用于向列中插入默认值. 说明:如果没有规定其他的值,那么会将默认值添加到所有的新记录.直线电机 mysql DEFAULT约束 示例 //在 "P ...
- php list()函数 语法
php list()函数 语法 作用:用于在一次操作中给一组变量赋值.博智达 语法:list(var1,var2...) 参数: 参数 描述 var1 必需.第一个需要赋值的变量. var2,... ...
- WWW基本概念
1.Internet 2.Intranet 3.万维网 注:万维网不等同于因特网,它只是因特网的一项服务. 4.TCP/IP 5.HTTP 注:HTTP是运行在应用层的一项服务. 注:服务器在没有用户 ...
- bootstrap得动态进度条
Bootstrap的动态进度条: html: 创建一个modal 这里使用fade先将modal隐藏起来,然后modal里面嵌入progress 代码很简单 <div class=" ...
- UE4 Pro Tips（keeps updating）
Consolidate 功能 :在工程范围内用一种资源替换另外一种或多种资源具体操作:同时在编辑器中选中两个或多个资源,右键>Asset Actions>Replace Reference ...