HTML（上）

2022-08-03 21:00:49 阅读：164 来源： 互联网

（一）、HTML语法规范

1.标签分类

双标签
开始结束
单标签

2.标签关系

包含（父子）关系：

<head>
    <title> </title>
</head>

并列（兄弟）关系：

<head> </head>
<body> </body>

（二）、基本结构标签

1.第一个HTML网页

每一个网页都会有一个基本的结构标签，页面内容也是在这些基本标签上书写的。

<html>			//HTML根标签
    <head>		//文档的头部
        <title>我的第一个页面</title>		//文档的标题
    </head>
    <body>		//文档的主体，网页的显示内容
        你我之间，黑马洗练。
    </body>
</html>

（三）、网页开发工具

1.vs code的使用

CTRL+N 新建文件
CTRL+S 保存文件
CTRL + 放大视图
CTRL - 缩小视图
!+TAB 生成骨架
ALT+B 打开浏览器

2.骨架新增代码

	<!DOCTYPE>	文档类型声明标签(必须是第一行)					  <!DOCTYPE html>
	lang 		定义文档的显示语言(en英语网页;zh-CN中文网页)			<html lang="en">
	charset		字符集,方便计算机存储和识别各种文字(必须写)	 		  <meta charset="UTF-8">

（四）、HTML常用标签

1.标题标签

h——head,头部、标题

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

标签语义：作为标题使用，依据重要性递减
特点： 1.加了标题的文字会加粗，字号会变大
2.每个标题独占一行

2.段落标签和换行标签

p——paragraph，段落

<p>我是段落标签</p>

标签语义：把HTML文档分为若干段
特点： 1.文本会根据浏览器窗口大小自动换行
2.段落与段落之间会有一定的空隙

br——break,换行
换行标签

<br />

标签语义：强制换行
特点： 1.是单标签
2.
是另起一行，与段落不同，行与行之间无空隙

3.文本格式化标签

<strong></strong> / <b></b>	加粗
<em></em> / <i></i>			倾斜	
<del></del> / <s></s>		删除线
<ins></ins> / <u></u>		下划线

标签语义：突出重要性，比普通文字更重要

4.div和span布局标签

标签没有语义，他们就是一个盒子，用来装内容的，布局网页

div——division 分割
span——span 跨度

<div>这是头部</div>
<span>今日价格</span>

特点：1.

标签用来布局，但是一行只能放一个，大盒子
2.标签用来布局，一行上可以有多个，小盒子

5.图像标签

img——image 图像

<img src="imaname.jpg" />

src 标签的必须属性，它用于指定图像文件的路径和文件名
alt 替换文本，图片不能显示时，显示替换文本
title 提示文本，鼠标放到图片上，显示文字
width 设置图像的宽度
height 设置图像的高度
border 设置图像的边框粗细

PS: 1.属性要写到src后
2.属性之间不分先后顺序，属性与属性之间要以空格分开
3.属性采取键值对的方式，即属性=“属性值”

6.路径

目录文件夹：普通文件夹，存放相关素材，HTML文件、图片等
根目录：打开文件夹的第一层就是根目录

路径：相对路径和绝对路径
相对路径：包含同一级路径，下一级路径，上一级路径

<img src="baidu.jpg" />			    //同一级路径
<img src="image/baidu.jpg" />		//下一级路径		/
<img src="../baidu.jpg" />			//上一级路径		../

绝对路径：指目录下的绝对位置，通常是从盘符开始的路径

<img scr="D:\文件\HTML\baidu.jpg" />			电脑绝对地址
<img scr="https://i0.hdslb.com/bfs.png" />	  网络绝对地址

7.超链接标签

a——anchor 锚
超链接标签，从一个页面链接到另一个页面

<a href="跳转目标" target="目标窗口弹出方式"> 文本或图像 <a />

href 指定链接目标的url地址（必须属性）
target 指定链接页面的打开方式，其中_ self 默认值为在当前页面打开，_ blank为在新窗口中打开方式

链接分类
1.外部链接：打开别的网站
2.内部链接：网站内部页面的相互链接
3.空链接：#
4.下载链接：如果href链接为文件或压缩包地址，则点击后会直接下载该压缩包
5.网页元素链接：网页中的各种元素都可以添加链接，例如图片、表格、视频、音频等
6.锚点链接：点击链接，快速定位到页面的相应位置
方法：在链接href属性中，设置属性值为 #名字的形式，找到目标位置标签，里面添加一个id属性=刚才的名字

注意：不能在a标签里嵌套a标签

<h3>外部链接</h3>
<a href="http:\\www.qq.com" target="_self">腾讯</a>     当前窗口打开
<br />
<a href="http:\\www.qq.com" target="_blank">腾讯</a>    新建窗口打开
<h3>内部链接</h3>
<a href="09-图像标签.html" target="_self">10-路径</a>    当前窗口打开
<h3>空链接</h3>
<a href="#" target="_self">空链接</a>                    当前窗口打开
<h3>下载链接</h3>
<a href="压缩包.zip" target="_self">下载链接</a>          当前窗口打开
<h3>网页元素链接</h3>
点击图片访问相应的网站
<br />
<a href="http:\\www.baidu.com" target="_self"><img src="SquirrelNesting.jpg" width="500"></a>   
<br />当前窗口打开

<h3>锚点链接</h3>
<a href="#zuoze" target="_self">锚点链接到作者</a>
...内容
<h id="zuoze">作者：孔某</h><br /> 
2020.03.31

8.base标签

base可以控制页面中的所有a标签的打开方式（当前页面打开，还是新建窗口打开）

target 属性控制整个页面的链接跳转方式
href 基于当前链接地址进行跳转，如果没有基于当前链接则不受影响

<base target="_blank" href="https://www.baidu.com">

（五）、注释和特殊字符

1.注释标签

<!--文字-->
快捷键CTRL+/

2.特殊字符

在HTML中一些特殊的符号很难直接使用，此时将用字符代替

特殊字符		字符代码
空格				&nbsp;
<				&lt;
>				&gt;
&				&amp;
￥				&yen;
©(版权)				&copy;
®(注册商标)		  	&reg;
℃				&deg;
±				&plusmn;
×				&times;
÷				&divide;
²				&sup2;
³				&sup3;

标签：网页,标签,HTML,页面,链接,属性
来源： https://www.cnblogs.com/Kongqingzhi/p/16548702.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9