HTML（上篇）

admin • • 前端

1  基本语法概述

1.1  基本语法概述

1.HTML标签是由尖括号包围的关键词  eg：<html>

2.HTML标签通常是成对出现的  eg：html>和</html>

3.有些特殊的标签必须是单标签 eg：<br />

1.2  标签关系

（1）包含关系（父子关系）

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

(2）并列关系（兄弟关系）

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

 2  HTML基本结构标签

名称 作用
<html> </html> HTML标签，又称根标签，是页面中最大的标签
<head> </head> 文档的头部（其中必须设置title）
<title> </title> 文档的标题
<body></body> 文档的主体

3  网页开发工具

（VS Code工具生成骨架标签新增代码）

3.1  文档类型声明标签

<!DOCTYRE html>  <!--当前页面采取的是HTML5版本显示网页-->

3.2  lang语言种类

（1）en：英语

（2）zh-CN：中文

（3）fr：法语

.......

3.3  字符集

（字符集：charset）

<meta charset="UTF-8"/>  <!--编码方式：万国码-->

（1）GB2312：简体中文

（2）BIG5：繁体中文

（3）GBK：包含（1）和（2）

4  HTML常用标签

4.1  标签语义

4.2标题标签

<h1> </h1>  <!--h为head的缩写-->
<h2> </h2>
...
<h6> </h6>

（随着h后面数字的增大，标题的大小粗细减小）

4.3  段落和换行标签

（1）段落标签：

<p> </p>  <!--p为passage的缩写-->

（2）换行标签：

<br />  <!--也可以写成<br>,br为break的缩写-->

4.4文本格式化标签

设置粗体，斜体，下划线等效果（均推荐使用第一种，因为语气更强烈）

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

4.5  <div>和<span>

（1）div为division的缩写，分割分区，大盒子（独占一行）

（2）span，跨度跨距，小盒子

（3）二者均无语义，是盒子，双标签

4.6  图像标签和路径

（1）图像标签（单标签）

<img src="图像URL"/>  <!--img是image的缩写，src是<img>标签的必须属性，用于指定图像文件的路径和
 文件名-->

图像标签的其他属性（属性与属性之间用空格分开）

src 图片路径 必须属性

alt

 文本 替换文本。图像上不能显示的文字
title 文本 提示文本。鼠标放到图像上，显示的文字
width 像素 设置图像的宽度
height 像素 设置图像的高度
border 像素

设置图像的边框粗细

（2）路径

/  ：下一级

..   ：上一级

4.7  超链接标签

（1）链接分类

外部链接

<a href="http://www.baidu.com">百度</a>

内部链接

<a href="index.html">首页</a>

空链接

<a href="#">首页</a>

下载链接

如果href里面的地址是一个文件或压缩包，会下载这个文件

网页链接

在网页中的各种网页元素 eg：文本，图像，表格，音频，视频等都可以添加链接

锚点链接

点我们点击链接，可以快速定位到页面中的位置

  • 在链接文本的href属性中，设置属性值为#名字的形式
<a href="#two">第二集</a>
  • 找到目标位置标签，里面添加一个id属性=刚才的名字
<h3 id="two">第二集介绍</h3>

5  HTML中的注释和特殊字符

5.1  注释

<!---注释内容->

5.2  特殊字符

符号 名字 表达式
空格  &nbsp
< 小于号 &lt
> 大于号 &gt
¥ 人民币 &yen
& 和号 &amp
© 版权 &copy
® 注册商标 &reg
° 摄氏度 &deg
± 正负号 &plusm;
× 乘号 &times
÷ 除号 &divide
² 平方（上标2） &sup2
³ 立方（上标3） &sup3
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>