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. 闲着没事写点啥之springmvc梳理

    用户通过浏览器向服务器发送请求,请求被springmvc的前端控制器dispatcherservlet拦截. dispatcherservlet拦截到请求后,会调用handlermapping处理器映 ...

  2. 【BZOJ3601】一个人的数论

    题目链接 题意简述 求小于 n 且与 n 互质的数的 k 次方之和. Sol 要求的东西: \[\sum_{i=1}^n i^k [gcd(i,n)=1]\] 枚举 gcd 上个莫比乌斯函数: \[\ ...

  3. logstash+redis收集负载均衡模式下多台服务器的多个web日志

    一.logstash的简介 一般我们看日志来解决问题的时候要么 tail+grep 要么 把日志下载下来再搜索,可以应付不多的主机和应用不多的部署场景.但对于多机多应用部署就不合适了.这里的多机多应用 ...

  4. mybaits 时间查询DATE_FORMAT

    <if test="accountdayInout.inoutDateStart!=null"> and DATE_FORMAT(t.inout_date,'%Y-%m ...

  5. 手把手搭建K3cloud插件开发环境

    最近几天在配置K3cloud开发环境,发现不论是产品论坛还是百度出来的结果,都不够满意,很多大咖给提供的环境搭建手册都是那个云山雾罩的PPT 也就是这个open.kingdee.com/K3Cloud ...

  6. PHP培训教程 PHP的运算符

    PHP中有丰富的运算符集,它们中大部分直接来自于C语言.按照不同功能区分,兄弟连PHP培训 运算符可以分为:算术运算符.字符串运算符.赋值运算符.位运算符.条件运算符,以及逻辑运算符等.当各种运算符在 ...

  7. 【ELK】elasticsearch设置密码访问

    1.需要在配置文件中开启x-pack验证, 修改config目录下面的elasticsearch.yml文件,在里面添加如下内容,并重启. xpack.security.enabled: true x ...

  8. SpringCloud 教程 （七）服务注册(consul)

    一.consul 简介 consul 具有以下性质: 服务发现:consul通过http 方式注册服务,并且服务与服务之间相互感应. 服务健康监测 key/value 存储 多数据中心 consul可 ...

  9. WEB Fuzz中需要关注的7种响应

    WEB应用模糊测试(WEB Fuzz)是一种特殊形式的网络协议模糊测试,专门关注遵循HTTP规范的网络数据包. WEB Fuzz并不是新的概念,目前有多种WEB应用模糊测试器(WEB Fuzzer), ...

  10. Vue实战：音乐播放器（一） 页面效果

    先看一下效果图 首页 歌单详情页 歌手列表 歌手详情页 排行页面 榜单的详情页(排序样式) 搜索页面 搜索结果 播放器内核 歌词自动滚动 播放列表 用户中心