二、基本标签

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. 图像I、P、B帧介绍

    I.p.b 帧 I帧:帧内编码帧 :尽可能去除图像空间冗余信息来压缩传输数据量的帧内编码图像:P帧:前向预测编码帧: 通过充分将低于图像序列中前面已编码帧的时间冗余信息来压缩传输数据量的编码图像,也叫 ...

  2. Amazon S3 对象存储Java API操作记录（Minio与S3 SDK两种实现）

    缘起 今年(2023年) 2月的时候做了个适配Amazon S3对象存储接口的需求,由于4月份自学考试临近,一直在备考就拖着没总结记录下,开发联调过程中也出现过一些奇葩的问题,最近人刚从考试缓过来顺手 ...

  3. 【必知必会的MySQL知识】mysql5.7安装教程

    1.下载mysql 下载地址:https://dev.mysql.com/downloads/mysql/5.7.html#downloads 下载zip免安装版,可以省去很多事 2.将下载的安装文件 ...

  4. 【Python基础】集合的基本使用

    Python中的集合是一种无序且唯一的数据结构.集合是通过花括号{}或者set()函数来创建的. 创建集合 s = set() 声明空集合 s = {1,2,3,4,5} 声明非空集合 添加元素 s. ...

  5. 2023-01-10：智能机器人要坐专用电梯把货物送到指定地点， 整栋楼只有一部电梯，并且由于容量限制智能机器人只能放下一件货物， 给定K个货物，每个货物都有所在楼层(from)和目的楼层(to)，

    2023-01-10:智能机器人要坐专用电梯把货物送到指定地点, 整栋楼只有一部电梯,并且由于容量限制智能机器人只能放下一件货物, 给定K个货物,每个货物都有所在楼层(from)和目的楼层(to), ...

  6. 2022-02-11：单词缩写。 给定一个由n个不重复非空字符串组成的数组，你需要按照以下规则为每个单词生成最小的缩写。 初始缩写由起始字母+省略字母的数量+结尾字母组成。 若存在冲突，亦即多于一个单

    2022-02-11:单词缩写. 给定一个由n个不重复非空字符串组成的数组,你需要按照以下规则为每个单词生成最小的缩写. 初始缩写由起始字母+省略字母的数量+结尾字母组成. 若存在冲突,亦即多于一个单 ...

  7. 2021-06-25：只由小写字母（a~z）组成的一批字符串，都放在字符类型的数组String[] arr中，如果其中某两个字符串所含有的字符种类完全一样，就将两个字符串算作一类，比如：baacbba

    2021-06-25:只由小写字母(a~z)组成的一批字符串,都放在字符类型的数组String[] arr中,如果其中某两个字符串所含有的字符种类完全一样,就将两个字符串算作一类,比如:baacbba ...

  8. windows10 docker desktop与本机数据拷贝

    目录 前景提示 一.构建环境 二.安装测试需要的nginx 三. docker文件拷贝到windows本地 总结 前景提示 发现只有docker关于docker拷贝linux内部文件的命令,但是,对于 ...

  9. jmeter跨线程组引用变量的3种方法

    利用BeanShell后置处理程序将参数设置为全局变量,用于跨线程传参(注:1.把提取变量的线程组放到引用变量的线程组前2.在测试计划中勾选"独立运行每个线程组") 方法1(jme ...

  10. Python分割多空格字符方法

    问题: 现有一个字符串 "1 + 5" ,想要获取 1,+,5 这三个元素 做法: str.split(' ') ['1', '', '', '', '', '', '+', '' ...