二、基本标签

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. 笔记：网络IP数据包头部详解

    笔记:网络IP数据包头部详解          传了无数次,每次图片都没了,真是郁闷,这编辑器,需要改下啊,各位CSDN的大神们!!!        由于最近看了一些相关的资料想起来这篇文章,所以补充 ...

  2. react中super()的理解

    首先 super() 是在 es6的class(类)的方法创建组件出现 下面是分别是构造函数创建组件和class(类)创建组件 构造函数方法创建组件 在构造函数方法中,在组件接收参数的时候,props ...

  3. Golang每日一库之bcrypt

    本文 官方文档: https://pkg.go.dev/golang.org/x/crypto/bcrypt 前言 之前讲过JWT Token https://www.cnblogs.com/zich ...

  4. JUC并发编程原理精讲（源码分析）

    1. JUC前言知识 JUC即 java.util.concurrent 涉及三个包: java.util.concurrent java.util.concurrent.atomic java.ut ...

  5. redis内存突然暴增，排查思路是什么

    1 这种暴增的应该还是上次一个群友说的,更多可能是外部因素导致的,应用新上线,定时任务这些,再有就是cat上查是哪些指令多,以及比对和之前的时间的差异 看是否有定时任务 或者 新上线的活动 ,在看下监 ...

  6. 2020-12-30：生产环境 CPU 占用过高，你如何解决？

    福哥答案2020-12-30: 1.top + H 指令找出占用 CPU 最高的进程的 pid. 2.top -H -p.在该进程中找到,哪些线程占用的 CPU 最高的线程,记录下 tid. 3.js ...

  7. 2022-03-05：不相交的线。 在两条独立的水平线上按给定的顺序写下 nums1 和 nums2 中的整数。 现在，可以绘制一些连接两个数字 nums1[i] 和 nums2[j] 的直线，这些直

    2022-03-05:不相交的线. 在两条独立的水平线上按给定的顺序写下 nums1 和 nums2 中的整数. 现在,可以绘制一些连接两个数字 nums1[i] 和 nums2[j] 的直线,这些直 ...

  8. vue全家桶进阶之路19：webpack资源打包工具

    Vue.js 是一个前端开发框架,它可以帮助我们快速构建单页应用和复杂的交互界面.而 Webpack 则是一个前端资源打包工具,它可以将多个 JavaScript.CSS.HTML.图片等资源打包成一 ...

  9. 代码随想录算法训练营Day48 动态规划

    代码随想录算法训练营 代码随想录算法训练营Day48 动态规划|198.打家劫舍 213.打家劫舍II 337.打家劫舍III 198.打家劫舍 题目链接:198.打家劫舍 你是一个专业的小偷,计划偷 ...

  10. Windows/Linux 下功能强大的桌面截图软件

    说到桌面截图软件,很多人首先想到的是 QQ 自带的截图,或者更高级功能更强大的 Snipaste 截图工具. 独立版本的 QQ 截图至少我目前没找到官方正式的下载链接,默认需要安装和打开 QQ 才能使 ...