HTML笔记

最新推荐文章于 2023-02-20 18:46:44 发布

gogogo!!

最新推荐文章于 2023-02-20 18:46:44 发布

阅读量232

点赞数

分类专栏： html 前端笔记文章标签： html

本文链接：https://blog.youkuaiyun.com/qq_46161529/article/details/128386932

版权

笔记同时被 3 个专栏收录

8 篇文章

订阅专栏

前端

3 篇文章

订阅专栏

html

1 篇文章

订阅专栏

1、web标准：由w3c（万维网联盟，国际最著名的标准化组织）组织和其他标准化组织制定的一系列标准的集合。
web标准的存在意义：在不同的浏览器中展示内容，排版等相似
**web标准的构成：**结构，表现，行为
结构：对网页元素进行整理和分类，主要是html
表现：用于设置网页元素的版式，颜色，大小等外观形式，主要是css
行为：网页模型的定义以及交互的编写，主要是JavaScript
web标准提出的最佳体验方案：结构样式行为相分离，简单来说就是html，css，js分开写

2、html语法规范
一、标签关系
1.包含关系(父子关系）

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

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

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

二、基本结构标签（股价标签）

html标签，页面中最大的标签（根标签）文档的头部标签，**在head标签中必须设置title标签** title标签:文档的标题 body标签：文档的主体

三、网页开发工具
1、文档类型声明标签

<!DOCTYPE>文档类型声明，告诉浏览器使用哪种html版本来显示网页
<!DOCTYPE html>的意思就是告诉程序员当前页面是html5类型的

它是html声明标签，不是html标签，必须写在html标签的前面

2、lang（language的缩写，用于定义当前文档的语言）
en表示英文网站，zh-CN表示中文网站

<!DOCTYPE html>
<html lang="en">//en表示英文网站，fr表示法文
<head>
    <meta charset="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>
</html>

3、字符集charset
char 是字符，set是集合，以便计算机能够识别和存储各种文字
在head中来规定html文档应该使用哪种字符编码

<head>
    <meta charset="UTF-8">//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>

4、语义标签
1.标题标签
h1-h6

<h1></h1>

2.段落标签和换行标签（重要）

<p></p>

换行标签： ，是单标签

3、文本格式化标签
加粗： 标签和  标签一样，用于强调文本，但它强调的程度更强一些。

倾斜：
删除线：<del></del>
下划线：<ins></ins>

4.<div>,标签是没有语义的，他们就是一个盒子，用来装内容的，都是用来布局

<div>只能占一行（大盒子）
<span>一行可以放好多个（小盒子）

5.图像标签单标签

<img src="图像URL/>"

img标签里的title用来显示鼠标放到图片上显示的文字

6、图片路径
相对路径：

1.同一级路径 img.png
2.下一级路径images/img.png
3.上一级路径 ../img.png(注意是两个点，这里系统看不出来，显示成三个了，两个点的意思就是返回上一级，然后再找图片路径)

绝对路径：指的是目录的绝对位置，在电脑中的哪个位置
E:\HTML\img.png

7.超链接标签
外部链接

<a href="http://www.qq.com" target="_blank">腾讯网</a>
target="_blank" 使点击超链接之后，在新的页面打开腾讯网页

内部链接

<a href="index.html" target="_blank">腾讯网</a>

空连接

<a href="#" target="_blank">腾讯网</a>

下载链接
地址链接的是文件

<a href="img.zip" target="_blank">腾讯网</a>

图片，音乐等都可以当超链接

<a href="http://www.qq.com" target="_blank"></a>

锚点链接
点击链接，可以快速定位到页面中的某个位置

<a href="#second">第二集</a>//即点击第二集这三个字,就会跳到第二集的简介部分
<h2 id="second">第二集内容简介</h2>

8、注释

html中的注释：
<!--我要找工作挣钱 -->

快捷键：ctrl+/ ,即可整行注释

9、特殊字符
空格之类的
在这里插入图片描述