HTML 与 CSS学习笔记（全）
走进 HTML
HTML基本结构
<!--告诉浏览器使用什么规范 -->
<!DOCTYPE html>
<html> <head><!-- utf8 网页字符编码 则包含全世界所有的国家需要用到的字符 --><!-- keywords 搜索关键字 --><meta name="keywords" content="课工场，每时每课给你新机会" /><!-- description 内容描述 --><meta name="description" content="课工场时...." /><meta charset ="UTF-8"<!-- 标题标签 --><title>我的第一个网页</title></head><body>我的第一个网页</body>
</html>
HTML基本标签
<title></title> 网页标题
<h1></h1> 标题标签 h1
<h2></h2> .
<h3></h3> .
<h4></h4> .
<h5></h5> .
<h6></h6> 标题标签 h6
<p></p> 段落标签
<br /> 换行标签
<hr /> 水平线标签
<strong></strong> 单纯用来加粗字体
<em></em> 只是用来斜体
<!-- 注释 --> CTRL+ /（快捷键）
HTML注释和特殊符号
| 特殊符号 | 字符实体 | 示例 |
|---|---|---|
| 空格 |  ； | 百度 |新浪 |
| 大于 > | >； | 如果时间>;晚上6点，就坐车回家 |
| 小于 < | <； | 如果时间<早上7点，就走路去上学 |
| 引号 “” | "； | w3c规范中，HTML的属性值必须用成对的"引起来 |
| 版权符号 © | ©； | ©2003-2013课工场 |
<!-- 图像标签 -->
<img src="path" alt="text" title="text" width="x" height="y" />
<!-- src 图片地址 alt 图像的替代文字 title 鼠标悬停提示文字 width 图像宽度 height 图像高度 --><!-- 链接标签 -->
<a href="path" target="目标窗口位置">链接文本或图像</a>
<!-- href 链接路径 target 链接在哪个窗口打开 target="(常用值：_self、_blank)" self 在本页面打开新链接 blank 在新页面打开新链接--><!-- 锚链接 -->
<a href="#marker">点击此处触发跳转</a>
<a name="marker">要跳转的位置</a>
HTML元素性质
<!-- 块元素 -->
<!-- h1~h6、p、--><!-- 行元素 -->
<!-- img、strong、em、a --><!-- 空标签 -->
<!-- > < " © -->
区别：
1.行内元素
行内元素最常使用的就是span，其他的只在特定功能下使用，修饰字体和标签，还有和这两个标签可以直接做出平方的效果，而不需要类似移动属性的帮助，很实用。
行内元素特征：
(1)设置宽高无效
(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
(3)不会自动进行换行
2.块状元素
块状元素代表性的就是div，其他如p、nav、aside、header、footer、section、article、ul-li、address等等，都可以用div来实现。不过为了可以方便程序员解读代码，一般都会使用特定的语义化标签，使得代码可读性强，且便于查错。
块状元素特征：
(1)能够识别宽高
(2)margin和padding的上下左右均对其有效
(3)可以自动换行
(4)多个块状元素标签写在一起，默认排列方式为从上至下
3.行内块状元素
行内块状元素综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。
行内块状元素特征：
(1)不自动换行
(2)能够识别宽高
(3)默认排列方式为从左到右
CSS
CSS基本语法结构
语法：
选择器 { 声明1;
声明2;
…… }
h1 {font-size:12px;color:#F00;
}经验：
CSS的最后一条声明后的“ ; ”可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束“;” 都要写上
style标签
<style type="text/css">
h1 {font-size:12px;color:#F00;
}
</style>
CSS的三种引入样式
①行内样式
使用style属性引入CSS样式
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>
②内部样式
CSS代码写在的
<style>h1{color: green; }
</style>
优点：方便在同页面中修改样式
缺点：不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够 彻底
③外部样式
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式
1.链接式
<head>……
<link href="style.css" rel="stylesheet" type="text/css" />
……
</head>
2.导入式
<head>
……
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>
CSS优先级
行内样式>内部样式表>外部样式表
就近原则 ：谁离标签近谁的优先级高
CSS基本选择器
标签选择器
①语法：
p{font-size:16px;
}
p 代表标签选择器
font-size 是属性
16px 是值
font-size：16px; 是声明样式
②HTML标签作为标签选择器的名称：
<h1>...<h6>、<p>、<img>
h1{}
p{}
img{}
类选择器
①语法
.second{font-size:16px;
}
<标签名 class="类名称">标签内容</标签名>
. 是类选择器
second 是指类名
font-size 是属性
16px 是值
ID选择器
①语法：
#first{font-size:16px;
}
#是指id 选择器
first 是id名
font-size 是属性
16px 是值
优先级
ID选择器>类选择器>标签选择器
小结
①标签选择器直接应用于HTML标签
②类选择器可在页面中多次使用
③ID选择器在同一个页面中只能使用一次
CSS的高级选择器
层次选择器
| 选择器 | 类型 | 功能描述 |
|---|---|---|
| E F | 后代选择器 | 选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内 |
| E>F | 子选择器 | 选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素 |
| E+F | 相邻兄弟选择器 | 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面 |
| E~F | 通用兄弟选择器 | 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素 |
后代选择器
①语法
body p{background:red;}
后代选择器两个选择符之间要以空格隔开，中间不能有任何其他的符号插入
子选择器
语法
body>p{
background:pink;
}
相邻兄弟选择器
语法
.active+p{
background:green;
}
通用兄弟选择器
语法
.active~p{
background:yellow;
}
style style style font font font size size size color color color class class class link link link
属性选择器
示例：
<style>p[id] {color: red;}p[class="item2"] {color: blue;}p[class^=it] {color: green;}p[class$=em3] {color: pink;}p[class*=item] {color: gray;}</style>
<p class="item1" id="first">1</p><p class="item2">2</p><p class="item3">3</p><p class="item4">4</p><p class="item5">5</p>
①E[attr] 选择匹配具有属性attr的E元素
p[id] {color: red;}
②E[attr=val] 选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）
p[class="item2"] {color: blue;}
③E[attr^=val] 选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
p[class^=it] {color: green;}
④E[attr$=val] 选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
p[class$=em3] {color: pink;}
⑤E[attr*=val] 选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配
p[class*=item] {color: gray;}
span标签
标签 的作用
能让某几个文字或者某个词语凸显出来
<p>11111111111111111<span id="first">22222</span>111111
</p>
字体样式
| 属性名 | 含义 | 举例 |
|---|---|---|
| font-family | 设置字体类型 | font-family:“隶书”; |
| font-size | 设置字体大小 | font-size:12px; |
| font-style | 设置字体风格 | font-style:italic;斜体 normal 默认值 oblique 斜体 |
| font-weight | 设置字体的粗细 | font-weight:bold;加粗=700 bolder 更粗=900 lighter更细=200 normal 默认值=400 |
| font | 在一个声明中设置所有字体属性 | font:italic bold 36px “宋体”; |
<style>.content {/* 字体类型 */font-family: "宋体";/* 字体大小 */font-size: 40px;/* 字体风格 */font-style: italic;/* 字体粗细 */font-weight: 700;/* 字体样式简写 顺序：字体风格→字体粗细→字体大小→字体类型*//* font: italic 700 40px "宋体"; */}
</style><p class="content">2021年10月5日，Windows 11（Win 11）正式推出，有人说，这是一次史诗级的更新，它是自2015年以来的第一个主要Windows版本，在其自身的基础上进行了很大的改进，也有人说Win11并没有实质性突破，还有人说Windows桌面就是DaaS（桌面即服务）。对此，IT网站Computerworld的作者史蒂文·J·沃恩·尼科尔斯表示，Win 11的升级毫无意义。</p>
注：font 属性
按照字体属性的顺序去写
字体属性的顺序：字体风格→字体粗细→字体大小→字体类型
简写方式最少要保留两个
文本样式
| 属性 | 含义 | 举例 |
|---|---|---|
| color | 设置文本颜色 | color:#00C; |
| text-align | 设置元素水平对齐方式 | text-align:right; |
| text-indent | 设置首行文本的缩进 | text-indent:20px; |
| line-height | 设置文本的行高 | line-height:25px; |
| text-decoration | 设置文本的装饰 | text-decoration:underline; |
color属性
RGB:
①十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量
②rgb(r,g,b) : 正整数的取值为0～255
RGBA:
在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0～1
水平对齐方式
text-align：
| 值 | 说明 |
|---|---|
| left | 把文本排列到左边。默认值：由浏览器决定 |
| right | 把文本排列到右边 |
| center | 把文本排列到中间 |
| justify | 实现两端对齐文本效果 |
文本修饰
text-decoration属性
| 值 | 说明 |
|---|---|
| none | 默认值，定义的标准文本 |
| underline | 设置文本的下划线 |
| overline | 设置文本的上划线 |
| line-through | 设置文本的删除线 |
垂直对齐方式
vertical-align属性：middle、top、bottom
超链接伪类
伪类样式
语法：标签名**
HTML 与 CSS学习笔记（全）相关推荐
- HTML+CSS学习笔记（3）- 认识标签（2）
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
- CSS学习笔记（详细，不定期更新）
CSS 学习笔记 CSS书写规范 顺序 布局位置属性(position, top, right, z-index, display, float等) 自身大小盒子模型(width, height, p ...
- CSS学习笔记（详细）- 基础
CSS学习笔记从零开始 代码风格 样式书写格式 CSS基础选择器 css选择器的作用:(选择标签用的) 选择器分类:基础选择器和复合选择器 基础选择器 标签选择器 类选择器 - 开发最常用 多类名 i ...
- Web前端 html css学习笔记（更新）
HTML CSS学习笔记 2021/9/29 网页简介 HTML简介 第一个网页 自结束标签和注释 文档声明 进制 字符编码 完整的文档结构 2021/9/30 VScode安装及使用 实体 meta ...
- CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 参考文章: (1)CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 (2)https://www.cnblogs. ...
- 前端篇--------1.css学习笔记
1.css 单行文本换行溢出解决方案(css三件套) white-space:nowrap overflow:hidden text-overflow:ellipsis 2.css m ...
- HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- HTML/CSS学习笔记02【表单标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- CSS学习笔记 display属性
CSS学习笔记05 display属性 HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性, ...
最新文章
- echart饼图标签重叠_Echarts 解决饼图文字过长重叠的问题
- 【STC15库函数上手笔记】5、定时器
- 【Java】Exception in thread main java.lang.Error: Unresolved compilation problem
- python 对列表元素分割_python 列表快速排序和冒泡排序和列表中根据元素取模分割列表...
- 翻译：包含列的索引:通往SQL Server索引级别5的阶梯
- 医疗机构做直播前的预告应该怎么做？
- Docker下部署oracle10g
- adb连接手机全过程(以oppo手机为例)(解决adb devices 找不到设备)
- 69. x 的平方根
- 【git】cherry-pick详解
- ethereum扫描区块，获取区块内的交易记录
- 2020/09/10华为发布会
- 学习是怎样的一个过程？？
- static（静态变量，方法）
- JVM进阶(十二)：JAVA 可视化分析工具实战
- uni-app解决接口跨域问题
- 如何安装PyTorch
- ABBYY FineReader双十一活动跟进
- 毕业论文ppt的研究方法及过程计算机专业,本科毕业论文的开题报告ppt
- linux内核log介绍