HTML 基本骨架、文本格式化标签、列表标签

富士康质检员张全蛋

已于 2024-07-16 11:04:39 修改

阅读量118

点赞数 1

分类专栏： html css javascript jquery 文章标签： html

于 2023-05-05 15:34:40 首次发布

本文链接：https://blog.csdn.net/qq_34556414/article/details/130507552

版权

html css javascript jquery 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

介绍

HTML标记语言：组成网页架构的元素组件（作为骨架）
CSS样式语言：美化网页的样式（css帮助html做个美化）
JavaScript程式语言：控制网页的动态效果（做动作，做操作的）
Jquery程式语言：协助及加强JavaScript的实现（对js的封装）

HTML介绍

HTML5是用来描述网页的一种语言，被称为超文本标记语言。用HTML5编写的文件，后缀以html结尾HTML是一种标记语言，标记语言是一套标记标签。标签是由尖括号包围的关键字，例如：<html> 标签有两种表现形式：

双标签，例如：<html></html>
单标签，例如：<img>

HTML5的DOCTYPE声明(有点像shell里面的 #/bin/bash)

DOCTYPE是document type(文档类型)的缩写。<!IDOCTYPE html>是H5的声明位于文档的最前面，处于标签之前。他是网页必备的组成部分，避免浏览器的怪异模式。(每个厂商都有自己的浏览器，不同的浏览器可能同样的代码展示出不同的效果，加上这个声明，避免了同样的代码在不同的浏览器上展示出不同的效果)

<!DOCTYPE html>

HTML5 基本骨架

HTML是一种用于创建网页的标记语言，可以使用HTML创建网页文档，用浏览器打开会自动解析。
HTML是由标签和内容构成的。

head标签（CSS样式是写在head里面的）

head标签用于定义文档的头部。文档的头部描述了文档的各种属性和信息，包括文档的标题、在Web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。(head中定义的东西都是给浏览器看的，包含了浏览器的各种信息)

<!DOCTYPE html>
<html>
  <head>
  </head>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文档的标题</title>
    <link rel="stylesheet" href="./css/main.css"><link>
    <style>
        /*css代码*/
    </style>
</head>
<body>
    文档的内容...
</body>
</html>

title标签

可定义文档的标题，它显示在浏览器窗口的标题栏或状态栏上，<title>标签是<head>标签中唯一必须要求包含的东西，就是说写head一定要写title。

<title>的增加有利于SEO优化，SEO是搜索引擎优化的英文缩写。通过对网站内容调整，满足搜索引擎（百度，Google这些都是搜索引擎，帮你去做搜索的）的排名需求。（seo排名越高，用户点击的概率越大）

meta标签（放字符集）

meta标签用来描述一个HTML网页文档的属性，关键词等，例如：charsel=utf-8”是说当前使用的是utf-8编码格式，在开发中我们经常会看到utf-8，或是gbk，这些都是编码格式，通常使用utf-8。

<!DOCTYPE html>
<html>

<head>
    <title>文档的标题</title>
    <meta charset="utf-8">
<script type="text/javascript" src="is/main.js"></script>


</head>
   
<body>
    我会显示在浏览器中
</body>

</html>

link

引用外部资源，或者内部的本地文件。一般用来引用css

script

一般引入的是js，或者jquery的一些包。

style

头部的style这个位置，定义的是css代码，写css的样式在这个位置去写。

html标签

定义HTML文档，这个元素我们浏览器看到后就明白这是个HTML文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开始点和结束点。

<!DOCTYPE html>
<html>
</html>

body标签（看到的整个页面其实都是body里面的内容，js的代码是写在body里面的）

body元素定义文档的主体。body元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等)它会直接在页面中显示出来，也就是用户可以直观看到的内容

<!DOCTYPE html>
<html>

<head>
</head>

<body>
    我会显示在浏览器中
</body>

</html>

文本格式化标签

标题标签

标题介绍与应用

标题(Heading)是通过<h1>-<h6>标签进行定义的。

<h1>定义最大的标题 <h6>定义最小的标题，标签是成对出现的

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

VSCode插件

快速打开浏览器扩展->搜索open in browser ->点击安装

正确使用标题

请确保将HTML标题标签只用于标题，不要仅仅是为了生成粗体或大号的文本而使用标题，正确使用标题有益于SEO，应该将<h1>用作主标题(最重要的)，其后是<h2>(次重要的)，再其次是<h3>，以此类推。

上面手机就是标题，那么你使用h1标签是不合理的，这个和内容的级别有关系。

标题标签位置摆放

在标签中添加属性：align=left | center |righr 默认居左

    <h1 align="left">一级标题</h1>
    <h2 align="center">二级标题</h2>
    <h3 align="right">三级标题</h3>

标签之段落<p> 自动换行

段落是通过<p>标签定义的

<p>这是一个段落</p>
<p>这是另一个段落</p>

段落是自带换行功能。

标签之文本

<p>是段落标签，一些词汇使用段落标签去承载这样是不太合适。这个时候就需要使用文本标签。

特别提示：常用文本标签和段落是不同的，段落代表一段文本，而文本标签一般表示文本词汇。

<span>是没有任何效果的，是后续为了css添加方便一些存在的。

     <em>em白菜</em>
     <i>i白菜</i>
     <b>b白菜</b>
     <strong>strong白菜</strong>
     <span>span白菜</span>

标签也可以嵌套使用，上面这些标签都可以嵌套在p标签当中。

<p>嵌套效果<strong>strong白菜</strong></p>

可以看到价格就有语气加重的标签strong，而前面人民币这个符号没有上面含义就代表人民币￥，为了后期添加样式添加span标签去承载。

这些标签的使用可以根据写页面的语意来进行添加就可以了。

换行

如果您希望在不产生一个新段落的情况下进行换行(新行)，请使用<br>，br元素是一个空的HTML元素。br是单标签，而不是双标签。

<p>这个<br>段落<br>演示了分行的效果</p>

水平线

shm>标签在HTML页面中创建水平线

<hr color="" width="" size="" align=""/>

属性：

color:设置水平线的颜色
width:设置水平线的宽度
size:设置水平线的高度
align:设置水平线的对齐方式(默认居中),可取值left|right

标签描述：

自带换行的比如h，以及段落，其他的都不会自动换行。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>文档的标题</title>
</head>

<body>
    <h1>hello world 标题h1</h1>
    <h2>hello world 标题h2</h2>
    <h3>hello world 标题h3</h3>
    <br/>
    
    <p>hello world 段落</p>
    <i>hello world 斜体</i>
    <br/>
   
    <cite>hello world 引用</cite>
    <br/>

    <b>hello world 加粗</b>
    <br/>

    <strong>hello world 强调加粗</strong>
    <br/>

    <del>hello world 删除</del>
    <br/>

    <a>hello world 文本</a>
</body>
</html>

列表标签

标签描述：有序列表是一列项目，列表项目使用数字进行标记。有序列表始于ol标签。每个列表项始于li标签。

你得先定义是ul还是ol，定义好了之后再到里面填写具体的内容。有序还是无序使用外层的结构就行了。

ol ul是去控制其是有序还是无序，以及有序无序的列表的样式通过type来控制。

type属性:

<ol>的属性type拥有的选项
1 表示列表项目用数字标号(1,2,3..)
a 表示列表项目用小写字母标号(a,b,c.)
A 表示列表项目用大写字母标号(A,B,C..)
i 表示列表项目用小写罗马数字标号(i,ii,ii…)
I 表示列表项目用大写罗马数字标号(1,II,I.)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文档的标题</title>
</head>

<body>
<!--无序列表-->
    <ul type="circle">
        <li>coffee</li>
        <li>milk</li>
    </ul>

<!--有序列表-->
    <ol type="A">
    <li>bread</li>
    <li>juice</li>
    </ol>

</body>

</html>

有序列表嵌套，可以看到列表里面是可以嵌套的。但是实际当中不建议嵌套太多层，这样比较复杂。

    <ol type="A">
        <li>水果</li>
        <li>蔬菜
            <ol>
                <li>白菜</li>
                <li>萝卜</li>
            </ol>
        </li>
    </ol>

富士康质检员张全蛋

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML 基本骨架、文本格式化标签、列表标签

你得先定义是ul还是ol，定义好了之后再到里面填写具体的内容。有序还是无序使用外层的结构就行了。ol ul是去控制其是有序还是无序，以及有序无序的列表的样式通过type来控制。自带换行的比如h，以及段落，其他的都不会自动换行。
复制链接

扫一扫

专栏目录