二、基本标签

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. 小知识：使用oracle用户查看RAC集群资源状态

    正常情况按照标准配置的环境变量,只能grid用户查看RAC集群资源状态. crsctl stat res -t 但是绝大部分操作其实都是oracle用户来操作,比如启停数据库,操作完成以后就需要检查下 ...

  2. macOS下安装 n 管理包（node版本管理工具）

    1. 安装 n 管理包 终端命令全局安装 npm install -g n 安装成功后在终端输入 n --version 或 n 查看,可看到 n 的默认安装目录 下面就是使用 n 的方式了, 首先查 ...

  3. js给元素设置样式

    一.style 利用 "[元素].style.[CSS属性名] = [属性值]" 的方法 1 var Box = document.getElementById('box') 2 ...

  4. ADB-安装配置

    一.只要下载ADB安装包即可 就这4个文件: 备注:如果下载放入到D盘去解压,打开dos窗口那么就要进入到D盘,然后再去执行adb命令,输入adb查看它是否安装成功 二.ADB命令简单使用 查看连接设 ...

  5. 安卓机上 4G 内存跑 alpaca，欢迎试用轻量级 LLM 模型推理框架 InferLLM

    从 LLM 火爆以来,社区已经出现了非常多优秀的模型,当然他们最大的特点就是体积大,最近为了让大模型可以在更低端的设备上运行,社区做了非常多的工作, gptq 实现了将模型进行低比特量化,因此降低了运 ...

  6. OCR 文字检测（Differentiable Binarization --- DB）

    文本检测 基于分割的做法(如蓝色箭头所示): 传统的pipeline使用固定的阈值对于分割后的热力图进行二值化处理 首先,它们设置了固定的阈值,用于将分割网络生成的概率图转换为二进制图像 然后,用一些 ...

  7. 2022-03-22：二进制取反。 有一个二进制字符串，可以选择该串中的任意一段区间进行取反(可以进行一次或不进行)，取反指将0变为1，将1变为0。那么取反之后的num可能的最大的字典序是多少呢。如有

    2022-03-22:二进制取反. 有一个二进制字符串,可以选择该串中的任意一段区间进行取反(可以进行一次或不进行),取反指将0变为1,将1变为0.那么取反之后的num可能的最大的字典序是多少呢.如有 ...

  8. Jenkins - 构建时运行Selenium打不开浏览器解决方法

    Jenkins-构建时运行Selenium打不开浏览器解决方法 前言 为了让Jenkins执行的Web自动化测试任务,能顺利调出浏览器页面,我们需要以命令行的方式启动Jenkins并执行脚本. 注:通 ...

  9. vue 版本查看

    如何查看vue版本号? 方法1.全局查看vue版本号 npm info vue方法2.局部(当前项目)查vue版本号 npm list vue version方法3.此外还可以通过 package.j ...

  10. 在开发过程中使用git rebase还是git merge，优缺点分别是什么？

    前言 在开发过程中,git rebase 和 git merge 都是常见的代码版本管理工具.它们都能够将分支合并到主分支,并且都有各自的优缺点. git merge git merge 是一种将两个 ...