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. NNIE(待尝试)

    马克 https://blog.csdn.net/ywcpig/article/details/85260752 https://blog.csdn.net/u011728480/article/de ...

  2. [易学易懂系列|golang语言|零基础|快速入门|（二）]

    现在我们来写代码,首先我们要新建一个项目. 新建项目: 点击:File>>New>>Project...如下图: 在New Project窗口,Location:输入:“goP ...

  3. GUI学习之二十六——QColorDialog学习总结

    今天要讲的是QColorDialog对话框. 一.描述 QColorDialog对话框是用来为用户提供颜色选择的对话框控件,和上一章的QFontDialog控件一样,是继承自QDialog这个基类.其 ...

  4. npm 在安装的时候提示 没有权限操作的解决办法 Error: EACCES: permission denied

    十分感谢https://blog.csdn.net/ldqsxsl/article/details/75059607的帮助! 错误原因:权限错误,需要root用户. 解决办法:就是把用户目录下的 .n ...

  5. 7.docker私有registry

    一.Docker Registry分类 Registry用于保存docker镜像,包括镜像的层次结构和元数据.都是基于https或者http工作的. 用户可自建Registry,也可使用官方的Dock ...

  6. JAVA的深浅拷备

    package com.jd.ng.shiro.testFactory; import java.io.*; /** * @author wangzhilei * @Author: husToy.Wa ...

  7. JDK，JRE与JVM浅析

    JAVA的两个特性: 1, 开源-指的是源代码免费 2,跨平台(可移植性好) 跨平台:是指跨操作系统 JVM(java virtual machine,java虚拟机) JVM就像是两国谈判时的使者充 ...

  8. nginx 静态资源WEB服务

    1.静态资源类型 非服务器动态运行生成的文件 类型种类 浏览器端渲染     HTML.CSS.JS 图片            JPEG.GIF.PNG 视频            FLV.MPEG ...

  9. vue.js条件渲染 v-if else-if v-for

    v-if: 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: {{#if ok}} <!-- Handlebars 模板 --> <h1>Yes</ ...

  10. cookie存储userID所遇到的问题

    *)问题:control charater in cookie value or attribute 转自:https://blog.csdn.net/weixin_36380516/article/ ...