二、基本标签

1.文件标签（结构）

<html>

根标签

    <head>

          <title>页面标题（标签）</title>

    </head>

    <body>

          页面所有内容

          包括：

          text=“文本颜色”

          bgcolor=“背景颜色”

          background=“背景图”

          颜色属性的拓展：

          1.单词：red，green，blue 2.rgb三原色：rgb（red，green，blue），rgb（0，0，0），值范围0-255 3.#000000（黑色），#FFFFFF（白色），#FF0000，值范围#000000-#FFFFFF

     </body>

</html>

2.排版标签

1）<!-- 注释标签 -->

2）换行标签<br/>

3）<p>段落标签：文本内容-文字</p>

        段与段之间会有空行

        对齐方式属性align=（三个属性值取其一）“left/center/right”

4）水平线<hr/>

        长width=""

        高size=""

        色color=""

        对齐属性align同上

        尺寸（长、高）的表示方法：1.百分百（随着页面大小变化而变化，占据百分比的比例） 2.像素（例如：100px）

3.文字标签

<font>

      基本文字标签

      属性：1.color颜色（属性值上面有说明） 2.face字体 3.size大小（max：7 min：1 default：3）

</font>

说到文字标签，可必须得拉上标题标签扯上一扯。

<h1>标题标签</h1>

    随着阿拉伯数字的增加字体随之减小，粗字体，大小是内置，默认占一行

 ......

<h6>标题标签</h6>

4.块标签

<div>

        行级块标签：占据一行

        用处：div+css

</div>

其他行级标签：p、ol、li、dl、dt、dd、h1~h6、form、ul

<span>

        行内块标签：占据一行内的一小块

        用处：设置提示、文字样式

</span>

 其他行内标签：a、strong、b、i、u、label、br、em

5.清单标签/列表标签

1)

<ul>无序列表</ul>

<li>

    列表项

    属性（type）=“disc/square/circle”

    disc：实心圆（默认）

    square:实心方块

    circle：空心圆

</li>

小例子：

<ul>

    <li>列表项</li>

</ul>

2)

<ol>有序列表</ol>

<li>

    列表项

    属性（type）=“数字/字母/罗马字”，start（首选项开始）=“数字”

</li>

小例子：

<ol>

<li>列表项</li>

</ol>

作用：实现菜单（横/纵）

去除小圆点：这是无序列表标签自带属性，在HTML中无法直接去除。方法：在CSS中的li标签添加list-style：none；

6.链接标签

<a>

    链接标签

    href=“跳转页面地址”

    name=“名字，锚点”

    锚点说明：锚点链接是网页制作中超链接的一种

    target=“_self（自己，默认） _blank（新页面打开，保留之前页面）”

    用途：1.页面跳转。如需跳转外网需要加协议（超文本传输协议）http：//。 2.访问锚点，跳转到：顶部/底部/中间。格式：#name=“值”

</a>

7.图片标签

<img  "图片标签/不需手动关闭"

    src：照片的位置

    alt：图片说明

    width=“1.百分比 2.像素”：宽

    height=“1.百分比 2.像素”：高 border=“1.百分比 2.像素”：框

    align=“top/middle/bottom/left/right”：对齐：图片和相邻文本的相对位置

/>

8.表格标签

重点：table、tr、td、th

<table>

    <caption>表格标题，默认居中，一个表格一个标题</caption>

    <thead>表格页眉，用于组合HTML表格的表头内容，页眉内部必须有tr标签</thead>

    <tbody>定义表格主体，用于组合HTML表格主体内容</tbody>

    <tfoot>页脚，用于组合HTML表格的表注内容</tfoot>

    thead、tbody、tfoot分块加载显示，由头到身体再到脚

    表格标签

    border=“1.百分比 2.像素”：框

    width=“1.百分比 2.像素”

    align对齐方式

    <tr>

        行，可有一个或多个th

        align表格行对齐，bgcolor背景色

        td和th皆为单元格：td表格单元格，包含数据。th表头单元格，包含表头。

        作用：表格样式、页面布局

        <td>

            align表格内容对齐、height、width、bgcolor

            colspan设定列合并，rowspan设定行合并

        </td>

        <th>

            定义表格的表头。默认居中加粗

        </th>

    </tr>

</table>

示例：

body的代码

`

	<hr align="center" size="10" width="50%" color="red"></hr>

	<p align="center">真<br/>漂亮！</p>

	<!-- 文字标签 -->

	<h1 align="center" >忆江南</h1>

	<font color="bule" size="2" face="宋体">白居易<br/></font>

	江南好，风景旧曾谙。日出江花红胜火，春来江水绿如蓝。能不忆江南？<br/>

	江南忆，最忆是杭州。山寺月中寻桂子，郡亭枕上看潮头。何日更重游？<br/>

	江南忆，其次忆吴宫。吴酒一杯春竹叶，吴娃双舞醉芙蓉。早晚复相逢？<br/>

	<h1>标题1</h1>

	<h2>标题2</h2>

	<h3>标题3</h3>

	<h4>标题4</h4>

	<h5>标题5</h5>

	<h6>标题6</h6>

	<!-- 块标签 -->

	<div style="background-color:red">贼厉害1</div>

	<span style="background-color:yellow">111</span>

	<span style="background-color:red">贼厉害2</span>

	<div style="background-color:red">贼厉害3</div>

	<!-- 列表标签 -->

		<!-- 无序,这里的缩进只是为了更好叙述，并无实际意义 -->

		<ul >

		<li type="square">列表1</li>

		<li type="circle">列表2</li>

		<li>列表4</li>

		</ul>

		<ul>

		<li type="circle">列表3</li>

		<li>列表4</li>

		</ul>

		<!-- 有序 -->

		<ol type="1" start="2">

		<li>清单1</li>

		<li>清单1</li>

		<li>清单1</li>

		<li>清单1</li>

		</ol>

		<ol type="I" start="2">

		<li>清单2</li>

		<li>清单2</li>

		<li>清单2</li>

		<li>清单2</li>

		</ol>

		<ol type="A" start="3">

		<li>清单3</li>

		<li>清单3</li>

		<li>清单3</li>

		<li>清单3</li>

		</ol>

		<ol type="a" start="4">

		<li>清单4</li>

		<li>清单4</li>

		<li>清单4</li>

		<li>清单4</li>

		</ol>

	<!-- 链接，第一个“基本”链接到我HTML1的小实验的网址了 -->

	<a href="basic.html" target="_blank"><br/>基本</a>

	<br/>

	<a href="pieceLabel.html">我还是我</a>

	<br/>

	<a href="#top">顶部</a><br/>

	<!-- 图片标签，图片取自网络，若有侵权，联系即删 -->

	<img src="../images/1.jpg" alt="mm" width="800" height="900" border="20%" align="top" />

	<br/>

	<!-- 表格 -->

	<table border="5" align="center" height="20%" width="10%" bgcolor="yellow">

	<caption>各专业收费</caption>

	<tr>

	<td>专业</td>

	<td>学费</td>

	<td>住宿费</td>

	</tr>

	<tr>

	<td>网络</td>

	<td>5xxx</td>

	<td>xxx</td>

	</tr>

	<tr>

	<td>自动化</td>

	<td>7xxx</td>

	<td>yyy</td>

	</tr>

	<tr>

	<td>会计</td>

	<td>8xxx</td>

	<td>jjj</td>

	</tr>

	</table>

`

图例：

注：未经同意请勿转载，仅作学习使用。以上有描述不正确之处，望大家能不吝指出，共同学习共同进步。谢谢

HTML超文本标记语言2的更多相关文章

  1. html 超文本标记语言

    1.html超文本标记语言 2.在html中存在着大量的标签,我们用html中存在的标签将要显示在网页的内容包含起来. 3.css 控制网页显示内容的效果. 4.html+css 只能是静态网页. 5 ...

  2. 超文本标记语言(HTML)

    超文本标记语言(HyperText MarkUp Language,HTML) HTML是用来制作网页的标记语言,HTML不需要编译,直接由浏览器解析: HTML文件是一个文本文件,包含了一些HTML ...

  3. HTML——超文本标记语言

    HTML: 网站(站点) - 网页 1.HTML作为文件后缀名,可以把文件变为网页 2.HTML是一门编程语言的名字:超文本标记语言 3.超越了文字的范畴,除了文字还可以有图片.视频.音频.动画特效等 ...

  4. html超文本标记语言的由来

    万维网上的一个超媒体文档称为一个页面:page,作为一个组织或者个人在万维网上放置开始点的页面称为主页:homepage或者首页,主页中通常有指向其他相关页面或者其他节点的指针,就是通常所说的超链接, ...

  5. HTML：Hyper Text Markup Language 超文本标记语言

    1.HTML是什么? *Hyper Text Markup Language 超文本标记语言 *Hyper Text:超链接.把不同空间的资源,整合在一起,形成逻辑上的网状结构. *Markup La ...

  6. 超文本标记语言HTML

    介绍html文档的基本结构,html常用标签的使用,理解html语言制作网页基本原理. html概述和基本结构 html概述 HTML是 HyperText Mark-up Language 的首字母 ...

  7. Html就是超文本标记语言的简写，是最基础的网页语言

    Html就是超文本标记语言的简写,是最基础的网页语言. Html是通过标签来定义的语言,代码都是由标签所组成. Html代码不用区分大小写. Html代码由<html>开始</htm ...

  8. html(HyperText Markup Language)--超文本标记语言

    1.html的简介? * 什么是html? ** HyperText Markup Language:超文本标记语言,网页语言 ** 超文本:超出文本的范畴,使用html可以轻松实现这样操作: ** ...

  9. HTML(超文本标记语言)的内容和理解

    由于上篇文章中提到WebMethod的Description 属性(propery)中可以使用超文本,因此就记录一篇关于超文本的文章以供参考,注意:Description=" HTML格式  ...

  10. 超文本标记语言(Hyper Text Markup Language)：构建网页的语言

    超文本标记语言(Hyper Text Markup Language):构建网页的语言

随机推荐

  1. chrome Dev Tools 性能分析 performance

    chrome 的performance用来分析性能优化性能非常好用,下面以一个页面来举例 性能分析 性能分析最好使用隐私无痕模式,以保证干净的环境下,避免chrome插件对性能分析结果的影响 Perf ...

  2. 你知道Object类和Objects的常用方法吗

    文章目录 Object的常用方法 Objects的常用方法 hashCode hash isNull equals requireNonNull compare nonNull 大家好,Leo又来了! ...

  3. vscode取消“禁用错误波形曲线”

    刚刚不小心点到了vscode的禁用错误波形曲线,导致现在没有报错提醒了,上网查了一下,重新打开错误曲线的方法是 1.按住Cctrl+shift+p 2.搜索 启用错误波形曲线,选择打开,就可以了

  4. MMCM/PLL VCO

    输入输出时钟频率,input 322.265625Mhz, output 312.5Mhz 对于使用MMCM与PLL的不同情况,虽然输入输出频率是一样的,但是,分/倍频系数是不同的,不能使用同一套参数 ...

  5. phpstudy-sqlilabs-less-4

    题目:GET - Error based - Double Quotes - String              基于错误的GET双引号字符型注入 可能的注入点(不全) ' " ) ') ...

  6. TLS 加速技术：Intel QuickAssist Technology（QAT）解决方案

    作者:vivo 互联网服务器团队- Ye Feng 本文介绍了 Intel QAT 技术方案,通过Multi-Buffer技术和QAT硬件加速卡的两种方式实现对TLS的加速 一.背景 当前 TLS 已 ...

  7. UCOS-II 任务栈空间合理分配

    最近利用空闲时间跑了一下正点原子的stm32f4开发板的实时操作系统demo,发现了一个比较有意思的东西,分享如下: 硬件平台:正点原子stm32f4开发板 软件开发平台:MDK uVision v5 ...

  8. wireshark基本使用

    Wireshark 是一种开源.跨平台的网络数据包分析工具,能够嗅探和调查实时流量并检查数据包捕获 (PCAP).它通常 被用作最好的数据包分析工具之一. 数据包过滤操作 ip过滤器 IP 过滤器帮助 ...

  9. 曲线艺术编程 coding curves 第五章 谐波图形（谐振图形） HARMONOGRAPHS

    原作:Keith Peters https://www.bit-101.com/blog/2022/11/coding-curves/ 译者:池中物王二狗(sheldon) blog: http:// ...

  10. 2023-06-07：Redis 持久化方式有哪些？以及有什么区别？

    2023-06-07:Redis 持久化方式有哪些?以及有什么区别? 答案2023-06-07: Redis提供了两种持久化机制:RDB和AOF. RDB RDB持久化是将Redis当前进程中的数据生 ...