超文本标记语言HTML

Wy_编程

已于 2022-05-09 12:12:30 修改

阅读量617

点赞数

分类专栏： Web 文章标签： html

于 2022-04-27 00:48:53 首次发布

本文链接：https://blog.csdn.net/weixin_48119140/article/details/124441065

版权

Web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

简介

超文本标记语言（Hyper Text Mark-up Language HTML）是构成网页文档的主要语言。可以说明文字、图形、动画、声音、表格、链接等。在计算机中以.html、.htm作为扩展名，可以被浏览器访问。

HTML特点

语法非常简洁、比较松散，以相应的英语单词关键字进行组合
html标签不区分大小写
大多数标签是成对出现的, 有开始, 有结束.<html>…</html>

不成对出现的称之为短标签 <br/> <hr/>

标签的属性和值

属性=“属性值”
<\font color=“red”>hello, world</font>
属性值建议加引号。(语法上双, 单引号, 不加都可以)

html组成部分

html文件结构包括头(head)和主体(body)两大部分，头部描述的是浏览器，所需信息，而主题则包含所要说明的具体内容。可在Linux下用浏览器打开一个网页，使用Ctrl-u查看该网页的html文件形式。Ctrl-w恢复。
<!doctype html> 声明文档类型
<\html>文档的头部和主体内容 </html> 根标签
<\head> 文档的头部信息 </head> 头部标记只能有一对
<\title>显示在浏览器窗口的标题栏中“网页名称”</title> 位于标记之内
<\body></body> 主体标记位于<\html>之内,<\head>标记之后

注释:

常用标签

熟练的掌握各种常用标签的功能、特性，可以大大提高开发速度和效率

文本和标题标签

标题标签:

<\h1>一级标题</h1>
<\h2>二级标题</h2>
<\h6>六级级标题</h6>

文本标签

<font></font>
	属性: 
		color: 文字颜色
			表示方式:
					英文单词: red green blue......
					使用16进制的形式表示颜色: #ffffff  -- (rgb)
					使用rgb(255, 255, 0)
size: 文字大小(范围 1 – 7。7最大、1最小)

文本格式化标签

加粗 
<strong></strong> 或 <b></b> 
倾斜
<em></em> 或 <i></i> 

删除线
<del></del> 或 <s></s> 
下划线
<ins></ins> 或 <u></u>

段落：

<p> xxx </p>
特点: 上下自动生成空白行

块容器:

<div>This is a div element.</div>
用于没有语义含义的内容的块级容器(或网页的"划分")。
属性: 对齐方式：
align
left
center
right

换行 <\br/>
水平线<\hr/>
属性:
color: 3种表示方法
size: 1-7

例子：

<\hr color=“red” size=“3”/>

列表标签

无序列表

标签
	<ul>
		<li></li>  列表项
		<li></li>
	</ul>
属性: type
实心圆圈: disc   -- 默认
空心圆圈: circle
小方块: square

有序列表

	标签
		<ol>
			<li></li>  列表项
			<li></li>
		</ol>
属性: 
ype -- 序号
1 -- 默认
a
A
i   -- 罗马数字(小)
I   -- 罗马数字(大)
start
从序号的什么位置开始表示

自定义列表

	标签
		<dl>
			<dt></dt> 小标题
			<dd></dd> 解释标题
			<dd></dd> 解释标题
		</dl>

图片标签

<img src="bird.gif" alt="图片加载失败" title="路飞！" width="300" height="200" />

属性:
src: 图片的来源必写属性
alt: 替换文本图片不显示的时候显示的文字
title: 提示文本鼠标放到图片上显示的文字
width: 图片宽度
height: 图片高度
注意：
图片没有定义宽高的时候，图片按照百分之百比例显示
如果只更改图片的宽度或者高度，图片等比例缩放

超链接标签

<a href="http://jd.com" title="A dog" target="_blank"> 超链接 </a>

属性:
href: 去往的路径（跳转的页面）必写属性
title: 提示文本, 鼠标放到链接上显示的文字
target取值：
_self: 默认值在自身页面打开（关闭自身页面，打开链接页面）
_blank: 打开新页面（自身页面不关闭，打开一个新的链接页面）

示例:
<a href="http://www.baidu.com">百度一下</a>

锚链接

事先定义一个锚点标签: <p id="top">
超链接到锚点: <a herf="#top"> 回到顶点 </a>

表格标签

<table> </table>

属性:
border – 表格线, 宽度1-7
bordercolor – 表格线颜色
width
height

<tr> -- 行

属性
align – 对齐方式
center
left
right

	<td> -- 单元格(列)
	对其属性设置同tr

示例:

<table border=1> 
<tr>
<td></td>  第一列
<td></td>  第二列
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>

自学网址http://www.w3school.com.cn/html/index.asp