Html css基础知识点总结

最新推荐文章于 2022-03-01 21:08:22 发布

ougexingfuba

最新推荐文章于 2022-03-01 21:08:22 发布

阅读量842

点赞数 3

分类专栏： html css 文章标签： html css

本文链接：https://blog.csdn.net/ougexingfuba/article/details/103730550

版权

HTML

什么是网页？

网页是指在因特网根据一定的规则展示特定内容的数据，就是html文件;

网页的构成：

图片，文字，超链接，声音，视频等元素组成

什么HTML（记住）？

Html是超文本标记语言，不是编程语言，是用来描述网页的一种语言，是以标签格式组成的一种标记语言

网页形成的过程

前端人员开发代码 --- 浏览器显示代码（解析、渲染）---- 生成web页面

常见的浏览器内核和常见5大浏览器

IE内核：Trident
火狐内核： Gecko
苹果内核：Webkit
谷歌/欧朋：Blink

内核的作用：读取网页的内容；

Web标准

使用web标准原因

web标准是由W3C组织和其他标准化组织制定的一系列标准的集合
由于浏览器的内核不同，解析代码时候可能会不统一，我们可以通过web标准规范各大浏览器的解析规范，达到元素最终显示的样式统一；

web标准的组成：

1. 结构标准 html
2. 表现标准（样式标准） css
3. 行为标准 javascript

HTML语法规范

HTML标签是由尖括号<>包围的关键字
HTML标签通常有双标签和单标签两种
1. 成对出现的 --- 称为双标签 ,一个开始标签一个结束标签; 例如：<html></html>
2. 单独出现的 --- 称为单标签，只有开始标签没有结束标签；例如：<br />
标签关系：分为包含关系和并列关系
包含关系（父子关系）:有父子级嵌套关系的盒子
并列关系（兄弟关系）:并列的兄弟关系；

HTML基本结构

<html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

一对html标签嵌套head和body标签，heade标签里面的内容是给浏览器解析的用户是看不见的除了title，body里面的内容是给用户看的，会全部渲染到浏览器中；

网页的开发工具

VS Code的使用
新建文件 Ctrl+N，建议大家使用点击+好完成
保存 Ctrl+S ，必须保存为.html文件
Ctrl+加号，Ctrl+减号可以缩放视图
生成骨架:英文输入！按下Tab键即可；

默认结构代码

DOCTYPE:声明文档类型告诉浏览器使用哪种HTML版本来显示网页
lang：定义文档的显示哪个国家的语言
charset：字符的集合计算机能够识别和存储的文字

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

标签语义化

在合适的地方给个最合理的标签可以让页面结构更加清晰

常用标签

标题标签从h1-h6 标题使用并且依据重要性递减
段落标签是p标签根据文档分成若干个段落
换行标签br：强制换行
注意：
01、标题标签在使用的时候，h1标签一个页面最好只能出现一次，并且只放网站logo，h2标签最好一个页面最多出现两次，主要放权重高的标题；h3~h6标签可以随意使用；
02、段落标签可以自动换行，两个标签之间有间隙；

关于浏览器对空格和回车换行的解析

浏览器在解析代码的时候对空格只解析一个，如果想要多个空格就用特殊符号 来设置，对回车换行解析为一个空格，想要换行就用<br >完成；

文本格式化标签

重点：加粗和倾斜

两大布局标签：div与span

div标签用来布局但一行只能放一个div，主要是用来做大框架布局使用
span标签用来布局一行可以放多个盒子，主要用来实现特殊效果的文字或者小图标等；

图片标签img

src 是必须要写的、

alt 是图片显示错误的时候显示对应文本

title 是鼠标划上图片提示文本

width 图片的宽度

height 图片的高度

border 图片边框（不要使用）

注意：
01、图片的src属性是必须要书写的
02、图片设置宽高的时候，我们只需要设置宽度即可，高度不用设置会自己等比例进行缩放
03、图片可以同时书写多个属性，只需要用空格隔开即可

目录文件夹：实际开发中我们的文件管理文件夹，一般在里面我们会新建css文件夹、img文件夹、upload文件夹、js文件夹、fonts文件夹

路径

定义：路径可以理解为：从文件自身出发去查找目标文件；
路径分为相对路径和绝对路径
绝对路径：带有本地盘符的路径和在线的http://wagnzhi
相对路径：同级路径、上级路径、下级路径
1. 同级路径：文件和目标文件是并列的关系，直接 src=“文件名称”；
2. 下级路径：文件和目标文件的父级盒子是并列关系，src=“目标文件的父级/目标文件名称”
3. 上级路径：文件的父级盒子和目标文件的父级盒子是并列关系，src需要通过../先出来一级再去查找图片对应的路径 --- src=“../文件父级/文件名称”，上级路径一般在外部链接的css中查找背景图时经常用到；

绝对路径分为两种：
带有盘符的路径：绝对不能使用，因为每个的电脑硬盘只能自己访问，别人是访问不了的
在线网络地址：可以使用，但是使用的时候必须书写http://前缀，但是要注意如果在线网站挂了该链接就不生效了；

例如：http://www.itcast.cn/

超链接标签

超链接标签a：双标签， <a href="相对路径"></a>
1. href标签是必须要书写属性
2. target属性可以控制超链接a的打开方式，target=“_blank”新的窗口打开页面
链接分类：
1. 1. 外部链接: 例如 < a href="http:// www.baidu.com "> 百度</a >
2. 2. 内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可（其实就是咱们的相对路径），例如 < a href="index.html"> 首页 </a >
3. 3. 空链接: 如果当时没有确定链接目标时，< a href=“#”> 首页 </a >

假链接：<a href="javascript:;)" val="1">常规体检</a>

注意：空链接#表示将当前的页面重新刷新加载了一次，假链接javascript:;表示执行了一个空的JS语句，页面不刷新；

1. 4. 下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
2. 5. 网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.

锚点链接

作用：实现了页面的内部跳转；

第一步：确定要跳转的目标用id标记 ==== 在开始标签身上书写id=’id名称’

第二步：绑定锚点按钮用超链接a，href=‘#id名称’；

注释快捷键 Ctrl+？

Html注释
Css注释 /*注释内容*/

特殊符号

空格  

左尖括号 < === <

右尖括号 > === >

版权 ©

人民币 ¥

表格

表格的主要作用：

表格不是用来布局页面的,而是用来展示数据的数据;

表格的基本语法：

table表示整个表格的整体，tr表示表格的行，td表示表格的单元格（列），tr里面也可以嵌套th表头
<table>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>

表头标签th：

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示.

表格的相关属性：

居中：align=“center” 边框：border
内容到单元格周边的距离：cellpadding
单元格和单元格之间的距离：cellspacing
宽：width
表格结构标签(了解）：
1. thead ：头部标签
2. tbody：主体内容标签
3. tfoot：表格底部标签

表

最低0.47元/天解锁文章

ougexingfuba

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
Html css基础知识点总结

HTML什么是网页？网页是指在因特网根据一定的规则展示特定内容的数据，就是html文件;网页的构成：图片，文字，超链接，声音，视频等元素组成什么HTML（记住）？ Html是超文本标记语言，不是编程语言，是用来描述网页的一种语言，是以标签格式组成的一种标记语言网页形成的过程前端人员开发代码 --- 浏览器显示代码（解析、渲染）--...
复制链接

扫一扫