HTML--day01

最新推荐文章于 2022-10-22 20:04:03 发布

.桃子摇摇冰

最新推荐文章于 2022-10-22 20:04:03 发布

阅读量150

点赞数 6

分类专栏： html 文章标签： html linq p2p

本文链接：https://blog.csdn.net/weixin_48675760/article/details/124970960

版权

html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、基本语法

①<常规标记>也叫双标记

<标记></标记>

<标记属性 = “属性值” 属性 = “属性值”> </标记>

标记也可以叫标签或叫元素

例如：<head> </head>

②空标记也叫单标记

<标记/>

<标记属性 = “属性值” />

例如：<br/>

二、文档说明与字符编码

①<!DOCTYPE ***>（特殊且固定的文档声明标签）

按照那种HTML标准（现在都是HTML5直接就是<!DOCTYPE html>）

②<html lang="***"> （搜索引擎优化和浏览器有帮助）

"en"代表英语；

"zh-CN"代表中文

"ja-jp"代表日文

③<meta charset="***">（根据什么编码）

ASCII---美国信息交换标准代码

ISO-8859-1----拉丁字母表的字符编码

GB2312----汉字编码字符集

UTF-8----Unicode万国码字符编码

三、常见标签

1.文本标签

注：文本标题标签自带加粗，有自己的文本大小，并且独占一行，有默认间距

<!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>我是一级标题</h1>
    <h2>我是二级标题</h2>
    <h3>我是三级标题</h3>
    <h4>我是四级标题</h4>
    <h5>我是五级标题</h5>
    <h6>我是六级标题</h6>
</body>
</html>

2.段落标签（p）

<p>段落文本内容</p>

标识一个段落（段落与段落之间有段间距）

3.换行（br）

<br/>

换行是一个空标记（强制换行）

4.水平线

<hr/>空标记

5.加粗有两个标记（推荐strong）

<b>加粗内容</b>只是显示加粗

<strong>强调内容</string>突出的文本

6.倾斜有两个标记（推荐em）

7.删除线有两个标记（推荐del）

<$>文本</$> --删除线

<del>文本</del>--删除线

8.拓展

<u>文本</u>--下划线

<sub></sub>--下标

<sup></sup>--上标

    <h1>"秦始皇"穿越街头推广诈骗APP</h1>

    <p>
        秦始皇嬴政（前259年—前210年） <sup>[1]</sup>  ，嬴姓，赵氏 <sub>[2]</sub>  ，
        <br>
        名政（一说名“正”），又称赵政 [3]  、祖龙 [4-5]  ，也有吕政
        一说（详见“人物争议-姓名之争”目录）。 [141]  
        <b>秦庄襄王和赵姬
        之子。 [6]  中国古代杰出的政治家、战略家、改革家，首次完成中
        国大一统的政治人物，
        <u>也是中国第一个称皇帝的君主。</u>
        </b>
    </p>
    <hr>
    <p>
        <em><strong>嬴政出生于赵国都城邯郸</strong></em>，后回到秦国。<del>前247年继承王位</del>，时年十三岁。 
        [7]  前238年，平定长信侯嫪毐的叛乱，之后又除掉权臣吕不韦，开始独
        揽大政。 [8]  重用李斯、王翦等人，
        <strong>自前230年至前221年，先后灭韩、
        赵、魏、楚、燕、齐六国，完成了统一中国大业，建立起一个中央集权的统
        一的多民族国家——秦朝 [9]  。
        </strong>
    </p>

四、百度词条案例

<!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>HTML5</title>
</head>
<body>
    <h1>HTML5</h1>
    <p>本词条由“科普中国”科学百科词条编写与应用工作项目审核 。</p>
    <p>
        HTML5是构建Web内容的一种语言描述方式。<br>
        HTML5是互联网的下一代标准，是构建以及呈<br>
        现互联网内容的一种语言方式．被认为是互联<br>
        网的核心技术之一。HTML产生于1990年，199 <br>
        7年HTML4成为互联网标准，并广泛应用于互联网应用的开发。<br>
    </p>
    <hr>
    <h2>发展历程</h2>
    <p>
        HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下
        一代标准，是构建以及呈现互联网内容的一种语言方式．被认为
        是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成
        为互联网标准，并广泛应用于互联网应用的开发。<sup> [4] </sup>
    </p>
    <p>
        随着W3C的创建，HTML的发展再次改变了场地。 1995年第一次尝试
        在HTML 3.0中扩展HTML，然后在1997年完成了一种称为HTML 3.2的
        更实用的方法。同一年晚些时候，HTML 4.01很快就出现了。
    </p>
    <h2>新特性</h2>
    <p>
        <strong>
            HTML5将Web带入一个成熟的应用平台，在这个平台上，视频、音频、
            图像、动画以及与设备的交互都进行了规范。
        </strong> <sup>[5]</sup> 
    </p>
    <h3>智能表单</h3>
    <p>
        表单是实现用户与页面后台交互主要组成部分，HTML5在表单的设计上功
        能更加强大。<em><strong>input类型和属性的多样性大大地增强了HTML可表达的表单</strong></em>
        形式，再加上新增加的一些表单标签，使得原本需要JavaScript来实现的
        控件，可以直接使用HTML5的表单来实现；一些如内容提示、焦点处理、数
        据验证等功能，也可以通过<del>HTML5的智能表单属性标签来完成。</del> <sup>[6]</sup>
    </p>
</body>
</html>

五、不一样的hr

color=========颜色

width=========宽度

align=========对齐方式

noshade======取消阴影

<body>
    <hr color = "red">
    <hr color = "green">
    <hr color = "blue">

    <hr color = "green" width = "300">
    <hr color = "green" width = "300" align = "right">
    <hr color = "green" width = "300" align = "left">

    <hr>
    <hr noshade>
</body>

示例截图：

六、特殊符号

特殊符号	解释
尖叫号	< 左尖括号
尖叫号	> 右尖括号
空格	该空格占据宽度受【字体】影响明显而强烈
空格	&emsp; 占据的宽度正好是1个中文宽度且基本上不受字体影响
版权	©©
商标	™ ™ ®®

代码演示：

<body>
    <!-- 尖括号 -->
    <p>
        我上一节中讲的是hr，用的是这样的&lt;hr noshade&gt;
    </p>
    <hr noshade>
    <!-- 空格 -->
    <p>&emsp;&emsp;赵谦孙李，周吴正往</p>
    <p>&nbsp;&nbsp;赵谦孙李，周吴正往</p>

    <p>大家好，我是 Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo nostrum 
        quod molestias minima, officia nam fuga optio suscipit atque minus eius cumque tempora officiis
        non natus inventore voluptate eum facilis?
    </p>
    <!-- 版权 -->
    &copy;
    <!-- 商标 -->
    &trade;
    &reg;
    <p>&#128512</p>
</body>

示例截图：

七、div和span标签

div标签：没有具体含义，用来划分页面的区域，（默认）独占一行。（相当于一个盒子）

（有的一行可以有多个div,后面会有讲解）

span标签：没有实际意义，主要应用在对于文本独立修饰的时候，内容有多宽就占用多宽的

空间距离。

代码演示：

<body>
    <!-- div标签 -->
    <div>1111</div>
    <div>2222</div>
    <div>3333</div>
    <hr noshade>
    <!-- span标签 -->
    <h3>体育<span style = "color:gray;">sports</span></h3>
    <!-- style样式后期讲 -->
</body>

示例截图：

.桃子摇摇冰

关注

6
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML--day01

一、基本语法①<常规标记>也叫双标记<标记></标记><标记属性 = “属性值” 属性 = “属性值”> </标记>标记也可以叫标签或叫元素例如：<head> </head>②空标记也叫单标记<标记...
复制链接

扫一扫