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. 左半连接left demi-join

    返回左边表的记录,前提是其记录对于右边表满足on语句的判定条件 对于左表中一条指定的记录,在右表中一旦找到匹配的记录,hive就会立即停止扫描 1.sql select s.myd,s,symbol, ...

  2. 【串线篇】spring boot嵌入式Servlet容器自动配置原理

    EmbeddedServletContainerAutoConfiguration:嵌入式的Servlet容器自动配置? @AutoConfigureOrder(Ordered.HIGHEST_PREC ...

  3. HTML5 入门基础

    HTML5概述HTML5於2004年被WHATWG(网页超文本技术工作小组)提出,於2007年被W3C接纳.在2008年1月22日,第一份正式草案已公布.WHATWG表示该规范是目前正在进行的工作,仍 ...

  4. Nacos 快速开始

    原文:https://nacos.io/zh-cn/docs/quick-start.html https://www.jianshu.com/p/16ff6d6db0cf Nacos安装: 1.从 ...

  5. [洛谷P2886] 牛继电器Cow Relays

    问题描述 For their physical fitness program, N (2 ≤ N ≤ 1,000,000) cows have decided to run a relay race ...

  6. VS2019界面透明、主题修改和导出设置

    目录 安装插件Color Theme Editor for Visual Studio 2019和ClaudiIDE 导入主题 背景修改 效果预览 导出设置遇到错误924 其他帮助文档 我自己用的主题 ...

  7. codevs 2039 骑马修栅栏 USACO x

    题目描述 Description Farmer John每年有很多栅栏要修理.他总是骑着马穿过每一个栅栏并修复它破损的地方. John是一个与其他农民一样懒的人.他讨厌骑马,因此从来不两次经过一个栅栏 ...

  8. codevs 1026 逃跑的拉尔夫 x

    1026 逃跑的拉尔夫  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold   题目描述 Description 年轻的拉尔夫开玩笑地从一个小镇上偷走了一辆车,但他 ...

  9. Spring定时器Quartz

    <bean id="startQuertz" lazy-init="false" autowire="no" class=" ...

  10. Python 字典dict操作定义

    字典是用大括号{ }来表示,它是python中最灵活的内置数据类型.它是一个无序的集合,通过键来存取值,而不能用索引. 字典的创建和使用 字典的组成:字典是由大括号{  }来包含其数据的,大括号内包含 ...