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. UVa 10294(polya 翻转与旋转)

    Arif in Dhaka(First Love Part 2) Input: standard input Output: standard output Time Limit: 2 seconds ...

  2. ubuntu 安装nvidia driver

    错误的命令:sudo apt-get install nvidiar-430好多教程都是这样 sudo apt-get install nvidia-driver-430  很奇怪这个命令变成这样 h ...

  3. C#基础知识之VS的快捷键汇总

    VS中默认的常用快捷键.可以根据自己的习惯,自己设置快捷方式,工具->选项->环境->键盘. 编辑相关的键盘快捷键 Ctrl + K,Ctrl + C = 注释选定行 Ctrl + ...

  4. DevExpress v19.1新版亮点——WinForms篇（三）

    行业领先的.NET界面控件DevExpress v19.1终于正式发布,本站将以连载的形式介绍各版本新增内容.在本系列文章中将为大家介绍DevExpress WinForms v19.1中新增的一些控 ...

  5. 原生JS 将时间转换成几秒前,几分钟前…常用于评论回复功能

    //格式化时间 留备用~ function getDateDiff(dateStr) { var publishTime = dateStr / 1000, d_seconds, d_minutes, ...

  6. ==和is的区别 以及编码和解码

    is和==的区别 1. id() id是python的一个内置函数,通过id()可以查看变量表的值在内存中的地址. s1 = 2 print(id(s1)) # 1514368064 s2 = 2 p ...

  7. SpringCloud学习系列-Rest微服务构建

    总体介绍 承接着我们的springmvc+mybatis+mysql初级高级课程,以Dept部门模块做一个微服务通用案例Consumer消费者(Client)通过REST调用Provider提供者(S ...

  8. CSS3——制作正在加载页面loading...

    今天做了好多小东西,还挺开心的~ <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  9. SSM图片

    非关系型数据,redis,mongoDB关系型数据,mysql,oracle 1.springmvc+spring+mybatis1.导入jar2.书写配置xml(applicationContext ...

  10. Internet History, Technology, and Security（week1）——History: Dawn of Electronic Computing

    前言: 第一次进行课程学习,在反复观看视频和查找字典翻译理解后选出了视频中个人认为较重要的概念,以下并不按照逐句翻译,中文概括大意余下自由发挥,对老师想要告诉我们的历史有一个初步的了解,顺便锻炼以下英 ...