codeerwhy–前端知识整合包笔记02–html/css
1、网页基本元素
-
html
- 属性:
lang:判断语言帮助语音合成工具确定发音、帮助翻译工具确定翻译规则[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ykVFq0Le-1594366122601)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200707201037678.png)]
-
head(一般是内容为网页元数据描述网页各种信息、字符编码网页标题网页图标)
- title 网页标题
- meta: 编码格式
- style:css样式
- link:引入外部css样式/网站图标( ref表达当前link与网站之间关系、href图片超链接、)
2、h/p/a/img/strong/br/hr/code/iframe
-
h :表示元素标题 大小h1到h6
- 有助于网站的SEO(搜索引擎)优化,可以促进关键词排名
- 乱用h标签可能会被搜索引擎认为作弊,导致k站
-
p :段落
-
strong :加粗
-
pre: 可以保留文字里的空格
-
iframe:链接外部网站显示出来
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VVCAlysL-1594366122604)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200708114245989.png)]
- 一个页面内部上面显示baidu下面显示淘宝
-
a :
-
属性href:超链接
-
属性target:指定打开url位置
_blank:新建页面打开
_parent:当前页面打开
<a href="www.baidu" target="_blink"/>
-
-
img:
-
属性 src:(网络图片 相对路径 绝对路径)
相对路径:. 当前路径 、 … 上一层目录
绝对路径:D:\img\img.jpg 根路径开始找位置一旦改变就找不到
-
属性 alt:当图片失效显示得文本信息 必要
-
属性width:
-
-
br :换行一般不用,取用div或其他
-
hr :分割线(---------)一般不用,都手写的css
- div样式手调
-
**code :**很少用一般span精准控制
-
span:
普通文本保存
默认情况下跟文本p无区别,用于区分特殊文本
<head> <style> span { font-family: monospqce; } </style> </head> <body> <span> function test(){}</span> <code>finction test(){}</code> <!--样式一致-> </body>
-
div :
- 行高line-height
- 属性outline:边框轮廓
-
base元素与a元素结合
-
<head> <base href="https://www.baidu.com" target="_blink"> <head/> <body> <a href="/img/web.jpg">百度</a> <a href="">百度一下</a> <body/>
-
3、URL/SEO(搜索引擎)优化
SEO优化
4、字符实体
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-suT7JhzJ-1594366122606)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200708095513142.png)]
5、a元素补充
锚点链接
<p id ="one">4546465</p>
<p id = "tw"> jklj</p>
<a href="#one"> 回到one部分</a>
<a href="#tw">回到tw部分</a>
<a href="#">点击这里会跳到页面最顶端</a>
类似锚点链接
a元素伪链接
没有指明具体链接地址的链接(常用来再点击链接时不希望打开新链接而是干别的事情,具体要干什么需要js代码,有事可以用来当成按钮)
<a href="javascript: alert('内容')">弹窗</a>
<a href="" onclick="alert('hello html')">弹窗</a>
a元素也可以支持文件下载,干什么主要看是什么链接
6、URL
URL统一资源定位符(每个资源url唯一)
-
URL基本格式:protocol://hostname/path=协议://主机地址/路径
协议:不同协议代表不同的资源查找方式
- http:超文本传输协议
- file:访问本地计算机资源
- mailto:访问邮件地址资源
- ftp:访问共享主机资源‘
- ed2k:通过支持ed2k协议的p2p软件访问该资源(电驴)
- thunder:协议的p2p软件访问该资源(迅雷)
**主机地址:**存放资源的主机ip地址资源传输方式
路径:资源在主机具体位置
eg:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nyrsLvlL-1594366122609)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200708210812228.png)]
-
更加具体的URL语法格式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OhcNB9CD-1594366122611)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200708211529519.png)]
7、css写法
-
内联样式
<h1 style="属性名:属性值">123456</h1>
-
文档(内嵌)样式表
<head> <style> .red{ color :red; } div { font-size:20px; } </style> </head> <body> <div id="red"> jkjkjkjkjk </div> </body>
-
外部样式表
<!--011.html--> 方式一 <head> <link re;="stylesheet" href="./css/style.css"> </head> <body> <div id="red"> jkjkjkjkjk </div> </body> 方式二 <head> <style> @import url(./css/style.css); </style> </head> <body> <div id="red"> jkjkjkjkjk </div> </body>
<!--style.css--> .red{ color :red; } div { font-size:20px; }
注意引入外部css,越重要的css越要放到最下面,因为css会有重叠覆盖
-
另外外部引入方式
<!--style.css--> @import url("./base.css"); .red{ color :red; } div { font-size:20px; }
<!--011.html--> <head> <link re;="stylesheet" href="./css/style.css"> </head> <body> <div id="red"> jkjkjkjkjk </div> </body>
<!--base.css--> <!-设置编码--> @cahrest "UTF-8" div{ width:200px; height:200px; }
8、css基础选择器
通用选择器
*{
<!--所有元素适用,一般用来去除浏览器自己加的内外边距-->
margin:0;
padding:0;
}
元素选择器(类型选择器,标签选择器)
<head>
<style>
div {
font-size:20px;
}
</style>
</head>
<body>
<div > jkjkjkjkjk </div>
</body>
<!--元素的名字-->
类选择器
<head>
<style>
.red{
color :red;
}
div {
font-size:20px;
}
</style>
</head>
<body>
<div class="red"> jkjkjkjkjk </div>
</body>
一个元素可以拥有多个类,多个类用空格隔开
<head>
<style>
.red{
color :red;
}
.kl {
font-size:20px;
}
</style>
</head>
<body>
<div class="red kl"> jkjkjkjkjk </div>
</body>
id选择器
驼峰标识:
- 小驼峰:第一个单词首字母大写(html的class、js函数名)
- 大驼峰:所有单词首字母大写(js中定义类的名字)
<head>
<style>
#head .title{
color :red;
}
<!--表现得是id为head下的拥有title的类,而不是content下的title-->
<!--id选择去使用#号,id名字不要再同一个页面内重复-->
</style>
</head>
<body>
<div id ="header">
<div class="title">455555</div>
</div>
<div id ="content">
<div class="title">455555</div>
</div>
<div id ="footer">
</div>
</body>
属性选择器
都可以认出
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iZg37Lbz-1594366122613)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200710111340767.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rcaHiJcd-1594366122614)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200710111447103.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GK2HFTVf-1594366122615)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200710111526288.png)]
<head>
<style>
[title] {
color:red;
<!--表示使用title的属性都需要改变-->
}
[title="456"] {
font-size:45px
<!--表示title属性为456的字体设置为45px-->
}
[title*="div"] {
color: #00f;
<!--表示title属性里含有div的就被改变-->
}
</style>
</head>
<body>
<div title="div 2">
<div class="title">455555</div>
</div>
<p title="div">456</p>
<span title="456">44444</span>
</body>
组合
伪类(后面讲)
伪元素
后代选择器(重要)
<head>
<style>
div span{
color:red;
}
<!--表示选中div下的所有span元素,强调是div元素下的-->
</style>
</head>
<body>
<div id ="header">
<div class="title">455555</div>
</div>
<div id ="content">
<span>456</span>
</div>
<!--这个span没有效果-->
<span>45666</span>
</body>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-48Hm15IS-1594366122616)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200710112439341.png)]
<head>
<style>
div span{
color:red;
}
.header > .title{
colcor: #00f;
font-size:40px;
}
</style>
</head>
<body>
<div class="header">
<span class="title">45666</span>
<div class="title">455555</div>
</div>
</body>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tDP2hisn-1594366122617)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200710113746875.png)]
注意某些内联元素(非替换行内元素)设置宽高无效如span
行内元素只占用文字,块级元素占用正行
兄弟选择器(重要)
相邻兄弟选择器
<head>
<style>
div+p{
color:red;
}
</style>
</head>
<body>
<div class="header">
<span class="title">45666</span>
<div class="title">455555</div>
</div>
<!--这个div后面的p元素都会变色-->
<p>4546464</p>
<p>12123</p>
<div></div>
</body>
全体兄弟选择器
<head>
<style>
div~p{
color:red;
}
</style>
</head>
<body>
<div class="header">
<span class="title">45666</span>
<div class="title">455555</div>
</div>
</body>
选择器组
交集选择器
注意不能空格XXXX
<head>
<style>
div.one{
color:red;
}
<!--div内部切类名为one变色 不能空格-->
div.one2[title="test"]{
color:blue;
}
<!--div内部且类名为one,title为test的变色-->
</style>
</head>
<body>
<div class="one">
<span class="title">45666</span>
<div class="title">455555</div>
</div>
<div class="one2" title="test">
<span class="title">45666</span>
<div class="title">455555</div>
</div>
</body>
并集选择器
在范围内全部都要被变化,符合其中一个条件就可以变
<head>
<style>
div,.one{
color:red;
}
div,.one2,[title="test"]{
color:blue;
}
</style>
</head>
<body>
<div class="one">
<span class="title">45666</span>
<div class="title">455555</div>
</div>
<div class="one2" title="test">
<span class="title">45666</span>
<div class="title">455555</div>
</div>
</body>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-02kXnuFS-1594366122619)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200710145437932.png)]
9、css常见属性
- color:前景色
- font-size:文字大小
- width:
- height:
- background-color:背景色
10、颜色空间RGB
-
red 0-255
-
grenn 0-255
-
blue 0-255
十进制rgb(red,green,blue)
十六进制:##rrggbb、#rgb
rgba:a为alpha :1不透明,0透明 rgba(r,g,b,alpha)
color:blue;
}
<div class="one2" title="test">
<span class="title">45666</span>
<div class="title">455555</div>
</div>
```
[外链图片转存中…(img-02kXnuFS-1594366122619)]
9、css常见属性
- color:前景色
- font-size:文字大小
- width:
- height:
- background-color:背景色
10、颜色空间RGB
-
red 0-255
-
grenn 0-255
-
blue 0-255
十进制rgb(red,green,blue)
十六进制:##rrggbb、#rgb
rgba:a为alpha :1不透明,0透明 rgba(r,g,b,alpha)