codeerwhy--前端知识整合包笔记02--htmlcss

最新推荐文章于 2023-04-06 18:23:26 发布

Princesk

最新推荐文章于 2023-04-06 18:23:26 发布

阅读量377

点赞数

文章标签： html css html5

本文链接：https://blog.csdn.net/Princesk/article/details/107251986

版权

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;
}

45666

455555

 <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）

Princesk

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
codeerwhy--前端知识整合包笔记02--htmlcss

codeerwhy–前端知识整合包笔记02–html/css1、网页基本元素html属性：lang：判断语言帮助语音合成工具确定发音、帮助翻译工具确定翻译规则[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ykVFq0Le-1594366122601)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200707201037678.png)]head(一般是内容为网页元数据
复制链接

扫一扫