HTML学习

雪I霁

于 2021-10-20 00:17:15 发布

阅读量161

点赞数

分类专栏： HTML 文章标签： html html5 css 1024程序员节

本文链接：https://blog.csdn.net/zcjh_/article/details/120852214

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1. 头文件

<!DOCTYPE html> -------声明文档类型
<html lang="en"> -------网页的开始
<head> ---------网页的头部
<meta charset="UTF-8">
<title>标题</title> ----- 网页的标题
</head> ------网页头部的结束
<body> ---------网页的内容
</body>
</html> -------网页的结束

ps：1，<html lang="en">指定义语言为“English”=“en”

还有“zh”中文

2，<meta charset="UTF-8">一种字符编码格式（UTF-8通配字符集）

此外还有GB2312（中文字符集）、GBK、UNICODE（万国码）等

2，常用标签(有两个的为双标签，一个的为单标签）

1.加粗——内容或者内容

2.斜体——内容或者内容

3.换行标签 —— （相当于换行没有行间距）

4.水平分割线——<hr>

<hr width="800" size="10">

width="长短参数"；size="为大小参数"

5.段落标签——(相当于换行有行间距)

6.上标——

eg:

x<sup>2

输出“X²”

7.下标——

eg：

x<sub>2

输出“X角标2”

8.原样的输出想要输出的文本——<pre>(按照输入格式，如未换行则到一行最大限度)

9.标准的行内标签——内容[用来修饰文本行内标签：只占据内容的部分，不会自动换行，除非一行铺满才会换下一行(和8中的最大限度不同，铺满指显示页面的一横排，相当于不拖动左右横条的铺满)]

10.标题标签——<hn>内容</hn>(n的取值1-6)（可以加粗，换行，字体大小从大到小）

    <h1>意大利东北部普罗塞科山区的秋天来临了</h1>
	<h2>意大利东北部普罗塞科山区的秋天来临了</h2>
	<h3>意大利东北部普罗塞科山区的秋天来临了</h3>
	<h4>意大利东北部普罗塞科山区的秋天来临了</h4>
	<h5>意大利东北部普罗塞科山区的秋天来临了</h5>
	<h6>意大利东北部普罗塞科山区的秋天来临了</h6>

11.盒子——<div>内容</div>(自动换行块标签（块级标签）：可以自动换行的 -------布局)

(标签定义 HTML 文档中的一个分隔区块或者一个区域部分。)

12.align属性——align="(center，left，right三选一，中间，左边，右边)"

（相当于居中，左对齐，右对齐）（可放在一些标签后面）

13.font标签（持续补充...）（一个font后面可以并列多个）

①文字

②文字

③文字

（颜色表示法：英文单词 red green blue）

（三原色法 #rrggbb 0-F #000000）

14.注释："Ctrl+？"

15.图片标签——<img src="图片的位置" width="200px"/>
（width：宽，height：高，px：像素）
（单改一个属性，图片将等比例调整；同时改两个属性，则以输入的大小为准）

alt——属性替换文本图像显示不出来时显示这段文字

<img src="路径" alt="文字">

title 鼠标在图片上显示的文字（要停在上面）

<img src="C:\Users\Administrator\Desktop\新建文件夹 (3)\OHR.BulgariaDevilBridge_ZH-CN1894068778_1920x1080.jpg" title="来自必应每日壁纸">

border——给图片加上一个边框（默认取值为0，>=0越来越大）

<img src="路径" border="数值">

align——文字在图片周围的位置

<img src="路径" align="位置">

位置取值：默认的是bottom

默认的是bottom

来源：

HTML 标签的 align 属性https://www.w3school.com.cn/tags/att_img_align.asp

usemap——将图像定义为客户器端图像映射（相当于指定一个区域点击进行跳转）

<img src="地址" alt="替换文本（可取消）" usemap="#（+命名）">

<map name="（命名）">
  <area href="跳转图片地址" shape="选中的形状" coords="x,y,z(前面两个圆心或矩形左上角，后面为半径或者长宽)">文字</area>
</map>

注：

①coords类似定中心点

②"name"可以互换"id"

③shape取值

default（规定全部区域）
rect（矩形）
circ（圆形）
poly（多边形）

16.背景颜色——<bgcolor="颜色">（颜色表示同13.③）

17.删除线——<del>内容</del>

18.超链接标签——<a href="地址">你想显示的文字</a>

<a href="地址" target="属性">(属性见下表)

图片来源：HTML https://www.w3school.com.cn/tags/att_a_target.asphttps://www.w3school.com.cn/tags/att_a_target.asphttps://www.w3school.com.cn/tags/att_a_target.asp https://www.w3school.com.cn/tags/att_a_target.asp https://www.w3school.com.cn/tags/att_a_target.asp

（1）超链接改变颜色（这个属性只能放在body上）

一般形式

link——超链接文本的颜色（显示超链接时的颜色）

vlink——访问过后链接文本的颜色（点击后的颜色）

alink——激活链接时文本的颜色(相当于点击链接时的颜色)

（2）锚点标签

①

<div id="代号">内容</div> 
<a href="#（加上代号）">文字</a>

跳转到div开头（锚点也可以放在div里面）

②③④

19.下划线

<u>文字</u>

20.多媒体标签

<audio>——引入的是音频

<video>——引入视频

<audio src="路径" controls="controls" autoplay="autoplay"></audio>
<video src="路径" controls="controls" ></video>

controls——表示的是视频或者音频播放器的组件如果是音频（背景音乐不写这个属性）

autoplay——自动播放

21. 有序列表 ol

默认的是数字排序

<ol type="I">
<li>第1章</li>
<li>第2章</li>
<li>第3章</li>
<li>第4章</li>
</ol>

属性：

来源：HTML <ol> 标签

22.无序列表 ul

<ul>
    <li>文字</li>
    <li>文字</li>
    <li>文字</li>
    <li>文字</li>
</ul>

属性：

disc:实心黑色小圆形

square:实心黑色小正方形

circle: 空心小圆形

23.数据列表 dl

<dl>
    <dt>第一章</dt> -------- 数据标题
    <dd>第一节</dd>
    <dd>第二节</dd>
    <dd>第三节</dd>
    <dd>第四节</dd>
</dl>

24.<nav>标签（标签内多个超链接的合集）

<nav>
<a href="#">文字</a>|
<a href="#">文字</a>|
<a href="#">文字</a>|
</nav>

25.<frameset> 标签

<frameset rows="25%,50%,25%">
		<frame src="地址1"></frame>
		<frameset cols="25%,50%,25%">
			<frame src="地址2"></frame>
			<frame src="地址3"></frame>
			<frame src="地址4"></frame>
		</frameset>
		<frame src="地址5"></frame>
</frameset>