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>
  • 效果
  1. 有序列表一
  2. 有序列表二
  3. 有序列表三

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>
  • 效果
这是一个 div

[Web 前端] 001 html 常用块级标签的更多相关文章

  1. [Web 前端] 002 html 常用行行级元素

    目录 1. html 常用的行级元素 1.1 链接标签 1.2 a 标签的锚点的使用 1.3 文本标签 1.4 无语义的行级元素 span 1.5 html 中的实体字符 1. html 常用的行级元 ...

  2. Python web前端 01 HTML常用标签

    Python web前端 01 HTML常用标签 一.HTML创建项目 file ---->new project -----> 输入项目名------>创建文件夹 new dicr ...

  3. html之块级标签h系列,div

    两个名词含义: 块级标签:内容再少也会占满整行 内联标签:有多少内容点多少地方 注:块级标签和内联不签不是绝对的,可以通过CSS作任意转换 1.h1-h6 :块级标签 请仅仅把标题标签用作标题文本,如 ...

  4. <p></p>标签为什么不能包含块级标签?还有哪些特殊的HTML标签？

    最近,在码代码的时候,就是下面的这段代码,我犯了一个很不起眼,但犯了就致命的BUG. <body> <p> <ol> <li>Hello</li& ...

  5. html:常见行内标签，常见块级标签,常见自闭合标签

    本文内容: 常见行内标签 常见块级标签 常见自闭合标签 首发日期:2018-02-12 修改: 2018-04-25:删除了不常用的标签 常见行内标签: 什么是行内标签: 行内标签就是在页面内只占据刚 ...

  6. 【疑点】<p></p>标签为什么不能包含块级标签?还有哪些特殊的HTML标签？

    最近,在码代码的时候,就是下面的这段代码,我犯了一个很不起眼,但犯了就致命的BUG. <body> <p> <ol> <li>Hello</li& ...

  7. html标签的显示模式（块级标签，行内标签，行内块标签）（转）

    html标签的显示模式(块级标签,行内标签,行内块标签)   今天讲课的时候,讲到了html中的标签的显示模式,大致分为块级标签和行内标签.那么初学者在刚使用标签的时候会发现有些属性在一些标签上不起作 ...

  8. 必知干货：Web前端应用十种常用技术你全都知道吗？

    Web前端应用十种常用技术,随着JS与XHTML的应用普及,越来越多的web界面应用技术出现在网站上,比如我们常见的日历控件,搜索下拉框等,这些web界面应用技术大大的丰富了网站的表现形式,本文将为您 ...

  9. 浅谈css的行内类型标签和块级标签

    常用标签的行内类型标签有:a.span.img:块级标签有:div.p.h1~6.ul.ol.li.dl.dt.dd. 行内类型标签的特征:标签的大小由标签的内容决定,不能设置width和height ...

随机推荐

  1. 为什么要使用puppet 及初步接触

    为什么要使用puppet 及初步接触   1.简介 云计算环境下,密度高,机器数量多,还要求弹性和伸缩性,这对于运维提出更高的要求.系统管理员需要经常安装操作系统,对系统参数进行配置和优化,对人员进行 ...

  2. JavaSE---泛型系统学习

    1.概述 1.1.泛型: 允许在   定义  类.接口.方法时  使用  类型形参,这个类型形参  将在声明变量.创建对象.调用方法时  动态地指定: 1.2.jdk5后,引入了  参数化类型(允许程 ...

  3. python-语言播报

       利用系统自带模块: 在cmd中  python -m pip install pypiwin32   安装win32com模块 import win32com.client sp=win32co ...

  4. Kibana后台进程启动和关闭

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/12073202.html 后台启动Kibana ./bin/kibana & 查找Kibana进 ...

  5. git初步研究2

    $git init Git 使用 git init 命令来初始化一个 Git 仓库,Git 的很多命令都需要在 Git 的仓库中运行,所以 git init 是使用 Git 的第一个命令. 在执行完成 ...

  6. js 将时间戳转成时间格式化

    一.时间戳 时间戳是以时间元年1970年开始算起到当前时间的一个值,以秒为单位,比如1535694719秒,如何转化为我们想要的格式,yyyy/mm/dd或者yyyy-MM-dd hh:mm,格式根据 ...

  7. 自动配置/切换/查看JDK环境变量

    最近老是需要几个版本的JDK切换工作,于是网上收集资料整理,自己写了一个:自动配置/切换/查看JDK环境变量的批处理脚本.顺带3个JDK版本分别是:jdk1.6.0_43,jdk1.7.0_80,jd ...

  8. qt学习（一）qt三个文件函数的框架

    学到点什么, 而不是复制着什么, 每天敲着别人给的代码,苦涩得改完bug, 就这样一天天的过去, 实质上并没有学到什么, 别人的思想只是拿来借鉴, 你的思想是好是坏都是你的, 不用急着抛弃自己. 从q ...

  9. [CSP-S模拟测试]:模板(ac)（线段树启发式合并）

    题目描述 辣鸡$ljh\ NOI$之后就退役了,然后就滚去学文化课了.他每天都被$katarina$大神虐,仗着自己学过一些姿势就给$katarina$大神出了一道题.有一棵$n$个节点的以$1$号节 ...

  10. Azure Monitor Kibana configuration always seems to send over SSL

    https://github.com/elastic/logstash/issues/10125 https://blogs.cisco.com/security/step-by-step-setup ...