HTML&CSS基础（一）

最新推荐文章于 2023-01-12 15:37:38 发布

椋七

最新推荐文章于 2023-01-12 15:37:38 发布

阅读量190

点赞数 3

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43627109/article/details/96999620

版权

前端专栏收录该内容

35 篇文章 0 订阅

订阅专栏

1.结构：HTML：描述页面的结构
表现：CSS：控制页面中元素的样式
行为：JavaScript：响应用户的操作
2.①html根标签<html></html>
一个页面中有且仅有一个根标签，网页中的所有内容都应该写到根标签中。
②head子标签<head></head>
设置网页标签头部信息，标签中的内容不会在网页中直接显示。帮助浏览器解析页面
③body子标签 <body></body>
用来设置网页中的主题内容，网页中所有可见的内容，都应该在body标签中编写。
④title标签 <title></title> 标题标签
默认显示在浏览器的标题栏中；
搜索引擎在检索页面时，会首先检索title标签中的内容。
网页中对于搜索引擎来说最重要的内容，会影响网页在搜索引擎中的排名。
3.注释： 不会在页面中显示，可以在源代码中查看。
4.(属于表现类型，HTML不赞成使用)
属性：通过属性设置标签，处理标签中的内容。
在开始标签中添加属性,实际上就是个名值对结构。
属性名=“属性值” 一个标签中可以同时设置多个属性，但中间要用空格隔开。
例如：(size最大为7)。
5.添加doctype声明，告诉浏览器网页的版本。
html5：<!doctype html>“doctype"大小写无限制。
应写在网页的最上边，不写会导致有些浏览器进入怪异模式，页面无法正常显示。
6.进制：
①二进制：0 1 10 11 100 101 110 111
②十进制：0 1 2 3 4 5…
③十六进制：0 1 2…9 a b c d e f 10…19 1a 1b 1c 1d 1e 1f
④八进制：0 1 2 3 4 5 6 7 10 11 12 13 14 15 16 17 20…
7.乱码的问题：
根本原因：编码和解码采用的字符集不同。
编码：依据一定的规则，将字符转换为二进制编码的过程。
解码：依据一定的规则，将二进制编码转换为字符的过程。
字符集：编码和解码所采用的规则
常见的字符集：ASCII；IOS-8859-1；GBK；GB2312；UIF-8(万国码)；ANSI(自动以系统的默认编码来保存文件)等
在中文系统的浏览器中，默认都是用GB2312进行解码的。
在编程时要告诉浏览器网页所采用的编码字符集。
meta标签用来设置网页的一些元数据，比如网页的字符集、关键字、简介。
meta是一个自结束标签，编写一个自结束标签时，可以在开始标签中添加一个/。
例如：<meta charset="utf-8" />
8.①标题标签：在HTML中，一共有六级标签。语法：<h#></h#> #可以选择1-6
对于搜索引擎来说，h1的重要性仅次于title，搜索引擎检索完title，会立即查看h1中的内容。页面中h1只能写一个。
②段落标签： p标签中的文字默认会独占一行。
段落标记，标识一个段落（段落与段落之间有段间距）。
在HTML中，字符之间写再多的空格，浏览器也会当成一个空格解析，换行亦是如此
br标签：自结束标签。 空标记，用来设置字体换行。
hr标签：自结束标签。 <hr />空标记，用作水平线。
③图片标签：使用img标签(自结束标签)来向网页中引入一个外部图片。
属性：
Ⅰ src：设置一个外部图片的路径，可以使用相对路径。
相对路径：是指相当于当前资源所在目录的位置。
可以使用”…/"返回一级目录，返回几级目录就写几个。
Ⅱ alt：设置在图片不能显示时，对图片的描述(搜索引擎可以通过alt属性来识别不同的图片，若没有alt属性，则搜索引擎不会对img中的图片进行收录)。
Ⅲ width：修改图片的宽度，一般使用px(像素)作为单位。
Ⅳ heigh：修改图片的高度，一般使用px(像素)作为单位。
宽度和高度两个属性如果只设置一个，另一个也会同等比例调整大小。
一般开发中除了自适应的页面，最好不要设置width和heigh。

<img src=”目标文件路径及全称”alt=”图片替换文本”title=”图片标题”/>

9.在HTML中，一些如"<"">"这类特殊字符不能直接使用。
实体(转义字符串)：用一些特殊符号表示特殊字符，这类特殊符号就叫实体。
语法：&实体的名字;
例如：   不换行空格
> 右尖括号>
< 左尖括号<
© 备案中的图标(版权符号)
10.图片的格式：
①JPEG(JPG)
图片支持的颜色比较多，图片可以压缩，但是不支持透明。
一般使用JPEG来保存照片等颜色丰富的图片。
②GIF
支持的颜色少，只支持简单的透明(直线透明)，支持动态图。
图片颜色单一或者是动态图时可以使用GIF 。
③PNG
支持的颜色多，并且支持复杂的透明。
可以用来显示颜色复杂的透明的图片。
11.图片的使用原则：效果不一致，使用效果好的；效果一致，使用小的。
12.meta标签的作用：
Ⅰ 解决乱码问题。
Ⅱ 用来设置网页中的关键字。
例如：

 <meta name="keywords" content="HTML5,JavaScript,前端,Java" />

Ⅲ 用来指定网页的描述。
例如：

  <meta name="description" content="发布h5、js等前端相关的信息" />

搜索引擎在检索页面时，会同时检索页面中的关键词和描述，但这两个值不会影响页面在搜索引擎中的排名。
Ⅳ 用来做请求的重定向

<meta http-equiv="refresh" content="秒数;url=目标路径或相对路径" />

例如：

<meta http-equiv="refresh" content="5;url=http://www.baidu.com" />

13.语法规范：
①HTML中不区分大小写，但一般用小写。
②HTML中的注释不能嵌套。
③HTML标签必须结构完整，要么成对出现，要么为自结束标签。
④HTML标签可以嵌套，但是不能交叉嵌套。
⑤HTML标签中的属性必须有值，且值必须加引号(单引号、双引号都可)。
14.内联框架：使用内联框架可以引入一个外部的页面。用iframe来创建一个内联框架
属性：
Ⅰ src：设置一个外部图片的路径，可以使用相对路径。
Ⅱ name：为内联框架指定一个name属性。
Ⅲ width heigh同上
在现实开发中不推荐使用内联框架，因为内联框架中的内容不会被搜索引擎所检索

 <iframe></iframe>

15.超链接：从一个页面跳转到另一个页面。用a标签来创建超链接。<a></a>
属性：
Ⅰ href：指向链接跳转的目标地址，可以写一个相对路径，也可以是一个完整地址
Ⅱ a标签中的target属性可以用来指定打开链接的位置
可选值：_self,表示在当前窗口打开(默认值)
_blank,在新的窗口中打开链接
可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开
16.(属于表现类型，HTML不赞成使用)center标签中的内容，会默认在页面居中显示。可以将要居中的内容都放在center中。
17.创建超链接时，如果地址不确定，可以直接写一个#作为占位符。
空链接：

<a herf="#"></a>

如果将链接地址设置为#，则点击超链接以后，会自动跳转到当前页面的顶部。
18.HTML中有一个属性，每一个元素都可以设置，该属性可以作为标签的唯一标识，这个属性就是id。id属性在同一个页面中只能有一个，不能重复。
跳转时直接在href中写"#id属性值"。
19.发送电子邮件的超链接，点击链接后可以自动打开计算机中默认的邮件客户端。
具体实现：href=“mailto:邮件地址”
当点击这个超链接时，会默认打开计算机的默认电子邮件客户端，并且将收件人设置mailto后的邮件地址。

椋七

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML&CSS基础（一）

1.结构：HTML：描述页面的结构表现：CSS：控制页面中元素的样式行为：JavaScript：响应用户的操作2.①html根标签<html></html>一个页面中有且仅有一个根标签，网页中的所有内容都应该写到根标签中。②head子标签<head></head>设置网页标签头部信息，标签中的内容不会在网页中直接显示。帮助浏览器解析页面...
复制链接

扫一扫