web标准***
主要包括:结构、表现、行为三个方面。
html-模板
<!DOCTYPE html> 文档类型申明,此处告诉浏览器使用html5版本显示网页
不是一个html标签,是文档类型申明标签,位于<html>标签之前。doc是document缩写
<html lang="en"> <html>标签通常成对出现,称为 双标签 ,由尖括号包围
lang是language缩写,意为语言,en表示English,zh-CN表示中文。
en文档也可以显示中文,zh-CN文档也可以显示中文。
<head> 头部标签,是<html>标签的儿子与<body>是兄弟,且都为双标签
<meta charset="UTF-8"> <meta>标签中charset属性规定html中使用哪种字符
UTF-8为万国码,基本包含了世界所有的字符,必须写,否则可能乱码。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Document </title> 中间文字或字符表示文档标题
</head>
<body> 为文档主体,基本所有内容都是放在body中的
</body>
</html>
模板vscode自动生成,输入!+enter即可。
注:ctrl+/添加或取消注释
<!-- -->
HTML常用标签
1、标题标签<h1>--<h6>
h-单词head缩写,意为头部、标题
eg、 <h1>我是一级标题</h1>
<h1 align="center"></h1> 标题向中对齐
left、right
省略align属性,则默认向左对齐
特点:1、加了标题的文字会变粗,字号也会变大。
2、一个标题独占一行。
3、从h1-h6字号依次减小
2、段落标签
<p>我是一个段落标签</p>
p-paragraph缩写意为:段落
特点:
1、文本在一个段落中会根据浏览器窗口大小自动换行
2、段落与段落间会保留空隙
3、换行标签
<br />
break的缩写,意为:break打断、换行
特点
1、是个单标签
2、<br />标签只是开始新的一行,不会插入垂直空隙
4、文本格式化标签
1、加粗标签- -<strong> 加粗</strong> or <b></b>
2、倾斜标签--<em>倾斜</em> or <i></i>
3、删除线标签--<del>删除线</del> or <s></s>
4、下划线标签--<ins>下划线</ins> or <u></u>
5、特殊符号
1、 空格符号
2、 <; 小于号<
3、 >; 大于号>
6、绘制水平线
<hr />
<hr align="center" color="red" size="3" width="" />
7、路径
1、相对路径:相对于某一文件夹的位置
同级:
下一级: /
上一级: ../
以此类推
2、绝对路径
eg:C:\Users\南弈书\Desktop\homyit\第一次培训demo
eg2:https://www.baidu.com
8、超链接
格式:
<a href="跳转目标" target="目标窗口弹出方式" >文本或图像</a>
弹出方式:
1、_self 默认,当前窗口打开
2、_blank 新窗口打开
链接分类:
1.外部链接:例如< a href="http:// www.baidu.com">百度</a>.
2.内部链接:
网站内部页面之间的相互链接 直接链接内部页面名称即可,例如< a href= "index.html">首页</a>.
3.空链接:如果当时没有确定链接目标时,<a href="#">首页</a>。
4.下载链接:如果href里面地址是一个文件或者压缩包,会下载这个文件。
5.网页元素链接:在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接.
6.锚点链接:点我们点击链接,可以快速定位到页面中的某个位置.
●在链接文本的href属性中,设置属性值为#名字的形式,如<a href="#two">第2集</a>
●找到目标位置标签,里面添加一个id属性=刚才的名字,如: <h3 id="two" >第2集介绍</h3>
9、图像标签
<img src="图像URL" />
10、details元素
<details>
<summary>显示列表</summary>
<ul>
<li>1</li>
<li>2</li>
</ul>
</details>
11、列表
ul元素无序列表
<ul>
<li>春</li>
<li>夏</li>
</ul>
ol元素有序列表
<ol>
<li>秋</li>
<li>冬</li>
</ol>
自定义列表
12、mark标签
<mark> 文字 </mark>突出 文字 颜色