css与html的笔记资源-CSDN文库

需积分: 9 68 浏览量 2022-07-28 15:39:53 上传评论 1 收藏 10.05MB DOCX 举报

资源推荐

资源详情

资源评论

opa 前言
勤做笔记不仅可以让自己学的扎实，更重要的是可以让自己少走弯
路。有人说 : " 再次翻开笔记是什么感觉 " ，我的回答是 : " 初恋般的感觉
" 。或许笔记不一定十全十美，但肯定会让你有种初恋般的怦然心动。
💖 💖
本章着重复习 H t m l 的基础内容，学习 H t m l 究竟要学些什么呢？主
要是学习各种标签，来搭建网页的 “ 结构 ” 。 ✨ ✨
本篇文章主要由五个章节构成，从 W E B 标准到初识 H T M L ，接着学
习 H T M L 常用标签，最后学习表格列表和表单。 💪 💪 开始充电之旅啦
~ ~ ~
一、认识 WEB
「网页」主要是由文字、图像和超链接等元素构成，当然除了这些
元素，网页中还可以包括音频、视频以及 F l a s h 等。
「浏览器」是网页显示、运行的平台。
「浏览器内核」 ( 排版引擎、解释引擎、渲染引擎 )
负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。
浏览
器
内核
备注
IE
Trident
IE、猎豹安全、360 极速浏览器、百度浏览器
fire
fox
Gecko
可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友 flash、神一样的对
手 chrome。
Safa
ri
webkit
现在很多人错误地把 webkit 叫做 chrome 内核（即使 chrome 内核已经是 blink
了）。苹果感觉像被别人抢了媳妇，都哭晕在厕所里面了。
chro
me
Chromiu
m/Blink
在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览
器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用 Blink 内
核。二次开发
Oper
a
blink
现在跟随 chrome 用 blink 内核。
W e b 标准
「构成」 👉 结构标准，表现标准和行为标准
o 结构标准用于对网页元素进行整理和分类 ( H T M L )
o 表现标准用于设置网页元素的版式、颜色、大小等外观属性
( C S S )
o 行为标准用于对网页模型的定义及交互的编写 ( J a v a S c r i p t )
「 W e b 标准的优点」 👇

o 易于维护：只需更改 C S S 文件，就可以改变整站的样式
o 页面响应快： H T M L 文档体积变小，响应时间短
o 可访问性：语义化的 H T M L （结构和表现相分离的 H T M L ）
编写的网页文件，更容易被屏幕阅读器识别
o 设备兼容性：不同的样式表可以让网页在不同的设备上呈现
不同的样式
o 搜索引擎：语义化的 H T M L 能更容易被搜索引擎解析，提升
排名
二、 HTML 初识
H T M L 初识
「 H T M L 」 ( H y p e r - M a r k u p L a n g u a g e ) : 超文本标记语言
「所谓超文本，有 2 层含义：」
o 因为它可以加入图片、声音、动画、多媒体等内容（超越文
本限制）
o 不仅如此，它还可以从一个文件跳转到另一个文件，与世界
各地主机的文件连接（超级链接文本）。
「 H T M L 骨架格式」
< ! - - 页面中最大的标签根标签 - - >
< h t m l >
< ! - - 头部标签 - - >
< h e a d >
< ! - - 标题标签 - - >
< t i t l e > < / t i t l e >
< / h e a d >
< ! - - 文档的主体 - - >


< / h t m l >
「团队约定大小写」
o H T M L 标签名、类名、标签属性和大部分属性值统一用小写
「 H T M L 元素标签分类」
o 常规元素 ( 双标签 )
o 空元素 ( 单标签 )
常规元素 ( 双标签 )
< 标签名 > 内容 < / 标签名 > 比如 我是文字 
空元素 ( 单标签 )
< 标签名 / > 比如 或 
「 H T M L 标签关系」

o 嵌套关系父子级包含关系
o 并列关系兄弟级并列关系
▪ 如果两个标签之间的关系是嵌套关系，子元素最好缩
进一个 t a b 键的身位（一个 t a b 是 4 个空格）。如果
是并列关系，最好上下对齐。
文档类型 < ! D O C T Y P E >
「文档类型」用来说明你用的 X H T M L 或者 H T M L 是什么版本。
< ! D O C T Y P E h t m l > 告诉浏览器按照 H T M L 5 标准解析页面。声明位于文
档中的最前面的位置，处于 < h t m l > 标签之前，不是一个 H T M L 标签，
它就是文档类型声明标签。
页面语言 l a n g
l a n g 指定该 h t m l 标签内容所用的语言
< h t m l l a n g = " e n " >
e n 定义语言为英语， z h - C N 定义语言为中文（对于文档显示来说，定义中
文也可以显示英文，反之亦然）
「 l a n g 的作用」
o 根据根据 l a n g 属性来设定不同语言的 c s s 样式，或者字体
o 告诉搜索引擎做精确的识别
o 让语法检查程序做语言识别
o 帮助翻译工具做识别
o 帮助网页阅读程序做识别
字符集
「字符集」 ( C h a r a c t e r s e t ) 是多个字符的集合 , 计算机要准确的处理各
种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种
文字。
o U T F - 8 是目前最常用的字符集编码方式
o 让 h t m l 文件是以 U T F - 8 （万国码）编码保存的，浏览
器根据编码去解码对应的 h t m l 内容。
< m e t a c h a r s e t = " U T F - 8 " / >
「 m e t a v i e w p o r t 的用法」
通常 v i e w p o r t 是指视窗、视口。浏览器上 ( 也可能是一个 a p p 中的
w e b v i e w ) 用来显示网页的那部分区域。在移动端和 p c 端视口是不同
的， p c 端的视口是浏览器窗口区域，而在移动端有三个不同的视口概
念：布局视口、视觉视口、理想视口
m e t a 有两个属性 n a m e 和 h t t p - e q u i v
n a m e 属性的取值
o k e y w o r d s ( 关键字 ) 告诉搜索引擎，该网页的关键字
o d e s c r i p t i o n ( 网站内容描述 ) 用于告诉搜索引擎，你网站的
主要内容。
o v i e w p o r t ( 移动端的窗口 )

o r o b o t s ( 定义搜索引擎爬虫的索引方式 ) r o b o t s 用来告诉爬虫
哪些页面需要索引，哪些页面不需要索引
o a u t h o r ( 作者 )
o g e n e r a t o r ( 网页制作软件）
o c o p y r i g h t ( 版权 )
h t t p - e q u i v 有以下参数
h t t p - e q u i v 相当于 h t t p 的文件头作用，它可以向浏览器传回一些有用
的信息，以帮助正确和精确地显示网页内容
o c o n t e n t - T y p e 设定网页字符集 ( H t m l 4 用法，不推荐 )
o E x p i r e s ( 期限 ) , 可以用于设定网页的到期时间。一旦网页过
期，必须到服务器上重新传输。
o P r a g m a ( c a c h e 模式 ) , 是用于设定禁止浏览器从本地机的缓存
中调阅页面内容，设定后一旦离开网页就无法从 C a c h e 中再
调出
o R e f r e s h ( 刷新 ) , 自动刷新并指向新页面。
o c a c h e - c o n t r o l （请求和响应遵循的缓存机制）
< m e t a n a m e = " v i e w p o r t " c o n t e n t = " w i d t h = d e v i c e - w i d t h , i n i t i a l -
s c a l e = 1 . 0 " >
H T M L 标签的语义化（标签的含义）
o 方便代码的阅读和维护，样式丢失的时候能让页面呈现清晰
的结构。
o 有利于 S E O ，搜索引擎根据标签来确定上下文和各个关键字
的权重。
o 方便其他设备解析，如盲人阅读器根据语义渲染网页
「拓展」标签：规定页面上所有链接的默认 U R L 和设置整体链接的
打开状态
< h e a d >


< / h e a d >

< a h r e f = " " > 测试 < / a > 跳转到百度

HTML 常用标签
常用标签
「 1 . 排版标签」主要和 c s s 搭配使用，显示网页结构的标签，是网页
布局最常用的标签。
o 标题标签 ( h 1 ~ h 6 ) （ 1 . 标签含义 : 作为标题使用，并且依据
重要性递减。例【 < h 1 > < / h 1 > 】）

o 段落标签 p , 可以把 H T M L 文档分割为若干段落（两段落之
间有空白位置）
o 水平线标签 h r
o 换行标签 b r （与段落标签不同，直接换行。）
o d i v 和 s p a n 标签 : 是没有语义的 , 是我们网页布局最主要的 2
个盒子。布局网页。 d i v 独占一行， s p a n 跨度，跨距。
o b 和 s t r o n g 文字以粗体显示。（更推荐 s t r o n g 标签加粗，
语义更强烈。）
o i 和 e m 文字以斜体显示。（更推荐 e m ）
o s 和 d e l 文字以加删除线显示。（更推荐 d e l ）
o u 和 i n s 文字以加下划线显示。（更推荐 i n s ）
属性名
属性值
描述
a l i g n
l e f t 、 c e n t e r 、 r i g h t
规定表格相对周围元素
的对齐方式
b o r d e r
1 或 ” ”
规定表格单元是否拥有
边框 , 默认为 ” ” , 表示没有
边框
c e l l p a d d i n g
像素值
规定单元边沿与其内容
之间的空白，默认 1 像
素
c e l l s p a c i n g
像素值
规定单元格之间的空
白，默认 2 像素
w i d t h
像素值或百分比（宽）
规定表格的宽度
h e i g h t
像素值或百分比（高）
规定表格的高度
「 2 . 标签属性 ( 行内式 ) 」
使用 H T M L 制作网页时，如果想让 H T M L 标签提供更多的信息，可以
使用 H T M L 标签的属性加以设置。
< 标签名属性 1 = " 属性值 1 " 属性 2 = " 属性值 2 " … > 内容 < / 标签名 >
< 手机颜色 = " 红色 " 大小 = " 5 寸 " > < / 手机 >
「 3 . 图像标签和路径
1、图像标签在标签 HTML 标签中，<img>标签用于定义 HTML 页面中的图像。
例： 
单词 i m a g e 的缩写，意为图像。 S r c 是 标签的必须属性，它用于
指定图像文件的路径和文件名。所谓属性：简单理解就是属于这个图
像标签的特性。
图像标签的其他属性。高度和宽度设置一个即可，另一个等比例缩与
扩
属性
属性值
说明
s r c
图片路径
必须属性

剩余96页未读，继续阅读

评论收藏
内容反馈

资源评论

vscode202188

粉丝: 1

资源: 1

上传资源快速赚钱

我的内容管理展开

我的资源快来上传第一个资源

我的收益
登录查看自己的收益

我的积分登录查看自己的积分

我的C币登录后查看C币余额

我的收藏

我的下载

下载帮助

前往需求广场，查看用户热搜

最新资源

深圳市生态环境局年度声环境质量状况
基于TMS320F28335的开关电源模块并联供电系统（电路图+源码）
C#毕业设计-基于asp.net的MVC网上书店管理系统（源码+数据库+文档）.zip
肇庆市怀集县应急避难场所统计表信息
飞行昆虫机器人飞行昆虫机器人
崩铁2.3（SourlCool版).apk
知识蒸馏-基于Pytorch通过匹配训练轨迹进行数据集蒸馏-附项目源码+流程教程-优质项目实战.zip
儿童节 python庆祝代码简要介绍-20240601.docx
知识蒸馏-基于Pytorch实现的语义分割结构化知识蒸馏算法-附项目源码+流程教程-优质项目实战.zip
小白物联网智能家居毕设参考STM32+ESP8266/MQTT+OneNet+UniApp

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈