html+css笔记1
- HTML超文本标记语言
- 定义
- 网页的基本组成
- 网页的特点
- 网页的兼容问题
- 网页的结构
- 文档声明
- meta元素
- 常用标签
- 块级元素与行内元素的转换
- css属性之display
- 基线对齐问题
- CSS样式
- css的引入方式
- 外链式和导入式的区别?面试题
- css选择器语法
- css常用选择器的分类
- 标签选择器
- 类选择器
- ID选择器
- 通配符选择器
- 分组选择器
- 后代选择器(派生选择器)
- 子级选择器
- 标签属性选择器
- 交集选择器
- 伪类选择器
- 伪元素
- css常用属性
- text(文本)
- font(字体)
- background(背景)
- border(边框)
- list-style(列表样式)
- vertical(垂直)
- cursor(光标)
- css的引入方式
HTML超文本标记语言
定义
网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)
网页的基本组成
- HTML 结构
- css 样式
- js 交互,动态
网页的特点
浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。
网页的兼容问题
对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。
网页的结构
1 <!DOCTYPE html><!--文档申明--> 2 <html> <!--由开始标签和结束标签加内容组成的,这句话告知浏览器它是一个HTML文件--> 3 <head> <!--头部标签,自带css属性——display:none 隐藏--> 4 <meta charset="UTF-8"> <!--meta 元素--> 5 <title>Title</title><!--网页中的标题,在页面中的页卡(页眉)位置--> 6 </head> 7 <body><!--body是放置网页中的主体部分,所有的标签(元素)都放在body中--> 8 9 </body> 10 </html>
文档声明
- 声明必须是 HTML 文档的第一行,位于 标签之前
- 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
- 在 HTML 4.01 中, 声明引用 DTD,因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。HTML5 不基于 SGML,所以不需要引用 DTD。
HTML5
<!DOCTYPE html>
HTML4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
meta元素
charset=""
编码格式gb2312
国标UTF-8
常用
name='keywords' content="关键字"
name='description' content="描述网站的一段话"
关键字、描述的作用:利于SEO优化,引擎搜索
常用标签
块级元素
标签 | 描述 |
h1-h6 | 标题标签 |
div | 无意义标签,区分大模块 |
ul>li | 无序列表 |
ol>li | 有序列表 |
dl>dt>dd | 自定义列表 |
table>tr>td | 表格 |
块级元素的特点
- 独占一行,从上到下显示
- 可以设置盒子模型的所有属性(width/heiht/border/margin/padding)
- 在不设置宽高时,宽度是继承父级元素的宽,高度是由本身内容决定的
- 块级元素可以嵌套其它元素
- p元素不能嵌套块级元素,也不能嵌套 p元素
- dt,dd元素一般不会嵌套块级元素
行内元素
- 行内元素
标签 | 描述 |
span | 无意义标签,区分行内小模块 |
a | 超链接 |
em | 斜体(强调作用) |
i | 斜体 |
strong | 粗体(强调作用) |
b | 粗体 |
sup | 上标 |
sub | 下标 |
lable | 无意义标签,用来描述表单功能 |
行内元素的特点
- 在一行显示,从左到右显示
- 不可以设置宽高
- 不可以嵌套块级元素
- 在编辑代码时,行内元素与行内元素之间如果出现空格或者换行时,会出现间隙(解决方法,给父元素设置font-size:0)
基线对齐问题
vertical-align:middle
- 行内块元素
标签 | 描述 |
input | 表单标签 |
img | 图片标签 |
select | 下拉框 |
textarea | 文本域 |
行内块级元素的特点
- 在一行显示,从左到右排布
- 可以设置宽高
- 不可以嵌套块级元素
- 在编辑代码时,行内元素与行内元素之间如果出现空格或者换行时,会出现间隙(解决方法,给父元素设置font-size:0)
- 基线对齐问题
- 不设置宽高时,行内块元素的高度由内容决定
块级元素与行内元素的转换
css属性之display
- block 块,显示
-inline 行内 - inline-block 行内块
- none 隐藏、消失
- display:none ;这个属性是让元素在页面中消失、隐藏,若要元素显示则设置display:block;
li转换为行内元素时会自动取消默认小圆点和序号
基线对齐问题
vertical-align改变行内元素和行内块元素的对齐方式
值 | 描述 |
top | 所有的平级元素,去找最高(高度最高)的顶部进行对齐 |
middle | 所有的平级元素,去找最高(高度最高)的中部进行对齐——最常用 |
bottom | 所有的平级元素,去找最高(高度最高)的底部进行对齐 |
px/% |
一般最常用的是vertical-align:middle
CSS样式
css的引入方式
- 行内式:直接在标签后面,添加一个标签属性style来进行引入
- 内嵌式:把css代码放到style元素内,通过css选择器来选择HTML元素,并将这个样式添加给HTML元素
- style 元素一般放在head元素内
- 外链式:将css代码单独放在css文件中,用link标签来进行引入
- 导入式:将css代码单独放在一个文件中,用style元素进行引入
@import "css样式表的地址"
import既不是标签也不是css样式,是一条声明语句
外链式和导入式的区别?面试题
- 外链式是通过link标签,导入式是一条声明语句
- 加载顺序不一样,外链式是和HTML元素同时加载的,而导入式是先加载HTML元素,等HTML元素加载完成后再加载样式表
- 当使用javascript控制DOM去改变css样式的时候,只能使用link标签,因为@import是不能被DOM控制的
css选择器语法
语法:选择器{css属性名:css属性值}
css常用选择器的分类
标签选择器
直接拿标签名当做选择器
权重:1
类选择器
获取标签的class属性值,加”.”
权重:10
- 类名(标签属性值)可以重复使用
- 类名可以有多个,类名之间用空格隔开
- 类名不能以数字开头,可以字母与数字组合
<style> .p1 { color: blue; } </style> <p clacc="p1">类选择器</p>
ID选择器
获取标签的ID属性值,加”#”
权重:100
ID名不能重复,具有唯一性
ID选择器常用来配合js使用,在静态页面中除了锚点外,不会用到ID选择器
#p2 { color: blue; } <p id="p2">id选择器</p>
通配符选择器
获取所有的HTML元素
语法:*{css属性名 : css属性值}
权重:0-1
通配符选择器匹配所有的HTML元素,比较消耗性能,在项目中不会使用
分组选择器
将同一份css样式分别添加给不同的HTML元素
语法:选择器1,选择器2,选择器3{css样式}
权重:分组选择器的权重是独立计算,不会叠加
后代选择器(派生选择器)
在根元素内找后代元素
语法:祖辈选择器 后代选择器{css样式}
权重:所有选择器组合之和
子级选择器
存在包含关系的元素选择,通过父级查找子级
语法:父级选择器>子级选择器
权重:所有选择器组合之和
使用子级选择器,元素之间必须是紧邻的父子关系
标签属性选择器
用标签属性名与标签属性值当做选择器来用
语法:
- [标签属性名]{css样式}
- [标签属性名=标签属性值]{css样式}
权重:10
当HTML元素中有标签属性为class(类选择器)时,就不会使用标签属性选择器
交集选择器
一个HTML元素中有两种选择器时(两种选择器同属于一个元素时)可以使用交集选择器来选择HTML元素
语法:选择器1选择器2{css样式}
权重:组合选择器相加之和
交集选择器:标签器和类选择器、标签选择器和标签属性选择器、类选择器和类选择器
标签器和类选择器相结合时形成交集选择器,标签选择器要放在类选择器前面
伪类选择器
给HTML元素添加某种状态
cursor: pointer;/*光标指针*/
给标签添加指针,用在除了a标签外的其它标签
伪元素
用css代码向指定的元素内添加假的(HTML中不存在的内容)
:before在指定元素的所有内容之前
:after在指定元素的所有内容之后在使用伪元素时,必须保证两个前提:
- 必须带有display:block
- 必须带有content:”“,content的内容可以为空
在以后项目中常用的伪元素时:after,常用来清除浮动带来的影响
css常用属性
text(文本)
大小写text-transform: capitalize | uppercase | lowercase | none;
修饰 text-decoration: underline;(下划线) | overline;(上划线) | line-through;(删除线) | blink;(闪烁)
排列 text-align: justify | left | right | center;
缩进 text-indent: 数值 | inherit;
阴影 text-shadow: x轴偏移量 y轴偏移量 阴影面积 颜色;
font(字体)
颜色 color: #fff | rgb | rgba | 英文单词;
大小font-size: 数值;
字体风格 font-family: "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana
样式 font-style: oblique; (偏斜体) | italic;(斜体) | normal;(正常)
粗细font-weight: bold;(粗体) | lighter;(细体) | normal;(正常)
变体font-variant: small-caps;(小型大写字母) | normal;(正常)
background(背景)
背景background: transparent; /透明背景*/
颜色 background-color: #fff | rgb | rgba | 英文单词;
图片 background-image: url() | none;
重复 background-repeat: inherit | no-repeat| repeat | repeat-x | repeat-y;
滚动条 background-attachment: fixed | scroll;
背景图的位置 background-position:数值 | top | bottom | left | right | center;
简写方式: background:背景颜色 | 背景图象 | 背景重复 | 背景位置 ;
border(边框)
边框样式 border-style: dotted;(点线)| dashed;(虚线) |solid;| double;(双线)| groove;(槽线) |ridge;(脊状) |inset;(凹陷) |outset;
边框宽度 border-width: 数值;
边框颜色 border-color: #fff | rgb | rgba | 英文单词;
简写方式:border: width style color;
boder有四个边,四个边的样式可以分别设置top值 right值 bottom值 left值;
list-style(列表样式)
类型 list-style-type: disc(实心圆形符号) | circle(空心圆形符号) | square(实心方形符号) | decimal(阿拉伯数字) | lower-roman(小写罗马数字) | upper-roman(大写罗马数字) | lower-alpha(小写英文字母) | upper-alpha(大写英文字母) | none;
位置 list-style-position: outside | inside;
图像 list-style-image: URL;
简写list-style:目录样式类型 | 目录样式位置 | url;
常用 list-style:none;
vertical(垂直)
vertical-align: sub(下标字)|super(上标字)|top(垂直向上对齐)|bottom(垂直向下对齐)|middle(垂直居中对齐)|text-top(文字垂直向上对齐)|text-bottom(文字垂直向下对齐)
cursor(光标)
光标形状 cursor:hand(链接手指) | crosshair(十字体) | text(文字型) | wait(漏斗) | move(十字箭头, 朝右) | help(加一问号)| |ne-resize(箭头朝右上) | nw-resize(箭头朝左上) | w-resize箭头朝左() | s-resize(箭头朝下) | n-resize(箭头朝上)| se-resize(箭头斜右下) | sw-resize(箭头斜左下)|也可以自定义
转载于:https://www.cnblogs.com/tiantian9542/p/8971867.html
html+css笔记1相关推荐
- html5 居于页面中心,css笔记:如何让一个div居于页面正中间
如何让一个div居于页面中间,我今天说的是让一个div水平居中同时垂直居中,而不是简单的top:50%,left:50%.当然,我们就按一开始的思路写一下:top,left属性都设为50%,看一下效果 ...
- CSS笔记-除了a标签外的hover属性的应用
CSS笔记-除了a标签外的hover属性的应用内容简介:以下写的可能对于大部分网友来说可能很简单,但是我自己确实是不知道的. 有一段这样的html: div a href=# img alt=i am ...
- HTML+CSS笔记5
HTML+CSS笔记5 strong和b.em和i 优势:可以不用多个class进行区分,简化选择器操作 引用标签 iframe标签 br与wbr map与area embed与object audi ...
- 慕课学习史上最全零基础入门HTML5和CSS笔记
慕课学习史上最全零基础入门HTML5和CSS笔记 Html和CSS的关系 学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的 ...
- CSS 笔记(十二):预处理器 —— Less
CSS 笔记(十二):预处理器 -- Less 什么是 CSS 预处理器 CSS 预处理器就是使用某一种语言为 CSS 增加一些动态语言的特性,使用 CSS 预处理器可以使 CSS 具有简洁,适应性强 ...
- HTML与CSS笔记
HTML与CSS笔记 一.HTML: IDE快捷键: tab:补全标签 ctrl+/:快速注释 常用标签: <h1.h2--h6:六级标题 <p:段落 <strong:粗体 < ...
- 【CSS笔记】CSS文本颜色、字母大小写、文本对齐、文本装饰线、文本字体
目录 一.CSS笔记 1.1.CSS文本颜色 1.2.CSS字母大小写 1.3.CSS文本对齐 1.4.CSS文本缩进.间距.行高 (1)如何计算行高??? 1.5.CSS文本装饰线 1.6.CSS字 ...
- HTML+CSS笔记4
HTML+CSS笔记4 position定位 特性 取值 static(默认) relative(相对定位) absolute(绝对定位) fixed(固定定位 ) sticky(粘性定位) CSS添 ...
- Html 和 CSS笔记
html 和 css 原文链接:https://blog.csdn.net/Lin16819/article/details/102759862 不断学习,后期的新增笔记会继续加到文章上方 点击链接后 ...
- CSS尺寸与文本讲解。HTML、CSS笔记(四)。
文章目录 CSS尺寸(Dimention) 行高line-height属性 尺寸的其他属性 heigh.width属性 max-height.max-width属性 min-height.min-wi ...
最新文章
- 美图每天亿级消息存储演进——从Redis到Titan,完美解决扩容问题
- .NET Compact Framework s60v3(在S60上运行Windows Mobile程序)
- 【C++】构建哈希表
- 在Java中VO , PO , BO , QO, DAO ,POJO是什么意思
- 在js中访问html页面,javascript – 在IE9的html页面中访问js里面的全局函数
- 【Docker】 Docker pull的时候指定仓库
- github提交代码403
- 一直被唱衰的 Java 没“死”,却惨遭“忽视”!
- mysql求和 子查询_MySQL:子查询中的值总和
- [堆] Jzoj P5861 失意
- 解决Intellij IDEA中找不到汉化包问题
- QT QListView
- 时域,频域与傅立叶变换 - 慕水 - CSDNBlog
- SQL server 字符串 转 日期格式
- 厦门大学计算机学院新院长,厦门大学信息学院对口帮扶座谈会在我院顺利召开...
- 这是一份优秀的餐饮行业微信营销解决方案
- Swift代码库之中文简体与繁体转换
- 数字黑洞java_Java中数字黑洞实现代码
- 安卓手机使用Termux软件进行Linux系统的安装
- 基于JAVA高校社区生鲜配送系统计算机毕业设计源码+数据库+lw文档+系统+部署
热门文章
- linux Rh界面,Ubuntu Linux与RH系列的不同之处
- imread读不到图片_家用水表怎么读?超强实用技能快速get
- googel的扩展插件导出与导入
- mysql:分组中某字段最大值的查询结果
- 软件工程中需要学习和掌握的软件都有哪些_上海理工大学869软件工程考研经验...
- 用python处理excel表格_使用Python处理excel表格(openpyxl)及表格中的中文处理
- 数据挖掘常用聚类算法性能比较
- python代码评测结果tle_比比谁的代码短:TLE测试赛结束
- php调用python导出excel_如何使用Django导出Excel代码问题
- k8s组件通信或者创建pod生命周期