前端开发之html（零基础小白可以学）值得一看

「已注销」

已于 2022-10-05 13:04:40 修改

阅读量250

点赞数 1

分类专栏：前端 html 文章标签： html 前端

于 2022-10-04 18:14:48 首次发布

本文链接：https://blog.csdn.net/deartors/article/details/127163237

版权

前端同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

html

8 篇文章 0 订阅

订阅专栏

一基础部分

1.文档声明与字符编码

（1）编译说明

将页面翻译成想要的语言

eg：en代表英语，zh-CN代表中文，ja-jp代表日文。

这是给浏览器看的标签

<html lang ="xx">

将代码语言进行解码，相当于密码本进行翻译。

eg：ASCLL美国信息交换标准代码，IOS-8859-拉丁字母表的字符编码，GB2312汉字编码字符集，utf-8万国码字符编码

按照utf-8的编码规则进行解码，通俗来说就是万金油。

<meta charset="xx">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <center>hello tors</center>
</body>
</html>

小提示：输入html:5快捷弹出html5标准格式

2.标签的讲解

（1）常见双标签

需要将内容包裹进来才能使用

标题标签——<h1></h1>~~<h6></h6>

标签特点：设置字体大小样式且独占一行（h1标签默认被爬虫认为是重要内容，关键词搜索）

段落标签----<p></p>

表明段落，通俗来说开头空两格。

加粗标签（推荐strong）-----<b>只是显示加粗内容</b>，<strong>强调的内容</strong>

倾斜标记（推荐en）----<em>强调文本</em><i>倾斜文本</i>

删除线标签（推荐del）---<s></s><del><del/>

拓展：<u>下划线标签<u/><sub>上标</sub><sup>下标</sup>

（1）常见单标签：

换行标签：<br/>或<br>

强制换行

水平线标签：<hr/>或<hr>

空标记分割线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>这是1级标题</h1>
    <p>在数学中，11是最小的循环非单位质数；<i>在数论中<sub>1</sub></i>，11是Heegner数。在化学中，11是钠的原子序数；在音
        乐中，11为<b>华语乐队组合与非门所创建</b>的专辑名称；<br><s>在其他领域</s>，11是<u>姚明</u>的球衣号码，是光棍节的意思
        ，</p>
    </hr>
    <p>在数学中，11是最小的循环非单位质数；<en>在数论中<sup>1</sup></en>，11是<strong><en>Heegner</en></strong>数。在化学中，11是钠的原子序数；在音乐
        中，11为<strong>华语乐队组合与非门所创建</strong>的专辑名称；<del>在其他领域</del>，11是<u>姚明</u>的球衣号码，是光棍节的意思</p>
    <hr>
    <h2>这是2级标题</h2>
    <h3>这是3级标题</h3>
    <h4>这是4级标题</h4>
    <h5>这是5级标题</h5>
    <h6>这是6级标题</h6>
    <sub>1</sub>这是上标的解释
    <sup>1</sup>这是下标的解释
</body>
</html>

具体讲解，以<hr>标签为例在标签内部可以给标签添加属性，也就是css可以改变标签的样式，这部分代码可以直接写入html中，也可在新的css页面中，css方法会在后面具体讲解。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <hr color="red" width="60" align="left">
   <hr color="red" width="80" align="align">
   <hr>
   <hr noshade="noshade">
</body>
</html>

此样例图是在页面放大后的效果，如果不添加 noshade="noshade"属性，可以看见分界线自带阴影部分

3.特殊符号

特殊符号	解释
尖角号	<左尖角号 >右尖角号
空格	该空格占据宽度受【字体】影响明显而强烈（你很难确定他所占的字符长度） &emsp;占据的宽度正好是一个中文宽度，基本上不受字体影响
版权	©
商标	™ ®

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   这是一个示例&lt;abbr&gt;<br>
   &nbsp;这是第二个示例<br>
   &emsp;这是第三个示例<br>
   图标示例&copy;<br>
   图标示例&trade;<br>
   图标示例&reg;
</body>
</html>