学习笔记（一）关于html和css

最新推荐文章于 2024-09-14 12:37:34 发布

liaoqiqi2017

最新推荐文章于 2024-09-14 12:37:34 发布

阅读量146

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/weixin_44247244/article/details/106950394

版权

关于html和css

浏览器的内核

第一部分：渲染引擎
获取网页HTML、XML、图像等内容

第二部分：JS引擎
解析和执行javascript来实现网页的动态效果（后来JS引擎越来越独立，内核就倾向于只指渲染引擎）

常见的浏览器内核：
Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

初始界面的含义

创建一个html页面时，自带代码的含义

<!DOCTYPE html> //DOCTYPE用于规范浏览器的行为
<html lang='en'>// language=“english”简写,声明这是一个英文网站/lang=“ZH-CN” 声明这个网站是中文网站
 <head>  //meta标签作为网页中的一些辅助信息写在head中,但不会直接展现
    <meta charset="utf-8">//字符集选择
    <meta name="descript" content="">//描述以及描述内容
    <meta name=“renderer” content=“webkit”>//浏览器内核
    <meta name="viewport" content="width=device-width, initial-scale=1.0">//响应式页面
    <title>Documnet</title>
 </head>
</body>
<body>
</html>

html标签

分类
行内元素：span a b img input select strong i em
块级元素：div ul ol li dl dt dd h1 h2 h3 h4 p 等
空元素： br hr img link meta
1）块级元素会独占一行，其宽度自动填满其父元素宽度
行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化
2）块级元素可以设置 width, height属性，行内元素设置width, height无效。块级元素即使设置了宽度，仍然是独占一行的
3) 块级元素可以设置margin 和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效））

例如：Label标签
来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

标题标签
- h1
- h2
  …
段落标签
图片标签
…

链接css

如何让css在html中生效

内部样式表 ，将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义
外部样式表，将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，

<link href="CSS文件的路径"  rel="stylesheet" />

行内样式 ，将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义

css选择器

标签选择器：即所有的该标签元素，
类选择器/多类名选择器：即类，class，指定类名/多个类名，从而达到更多的选择目的
id选择器： id选择器使用“#”进行标识，后面紧跟id名
通配符选择器：即*，代表所有
后代选择器和子代选择器
伪类选择器- :
- link /* 未访问的链接 */
- :visited /* 已访问的链接 */
- :hover /* 鼠标移动到链接上 */
- :active /* 选定的链接 */