关于前端HTML YI以及CSS_yicss-优快云博客

本文链接：https://blog.youkuaiyun.com/foosh/article/details/127568195

1、W3C：

World Wide Web Consortium （万维网联盟)

W3C标准包括：

（1）结构化标准语言（HTML、XML）

（2）表现标准语言（CSS）

（3）行为标准（DOM、ECMAScript）

2、HTML基本标签：

（1） <head> 代表网页的头部

（2）<meta> 描述性标签用来描述网站的一些信息

（3）<title> 网页的标题

（4）<boday> 网页的内容

（5）<h1> 标题标签 h2 h3 h4 h5 不同级的标签展示的文字大小不同

（6）<p> 段落标签可以用来分段

（7）<br/> 换行标签用来进行换行

（8）<hr/> 水平线标签

（9）<strong></strong>粗体标签 <em><em>斜体标签

（10） 注释特殊符号： &nbsp 空格 > 大于 < 小于。。。。

图像的基本标签：

（1） <img/> 图片标签里面的属性可以设置图片

（2）<png/>

（3）<gtf/>

超链接标签：

（1）<a ></a>
  //target（窗口在哪里打开） 中的属性 _blank 代表重新打开一个新的页面  _self 在自己的页面进行打开 
  // href 跳转的页面路径 
  <a target="_blank" href="test2.html" style="cursor: pointer">点击我跳转页面</a>
（2）锚链接（可以跳转到指定的位置，但是需要指明标志位）
    <a target="_blank" href="#tiaozhuan" style="cursor: pointer">点击我跳转页面</a>
    
    <a target="_blank" href="test2.html#tiaozhuan" style="cursor: pointer">点击我跳转页面</a>
    
    <div name="tiaozhuan">指定位置</div>
（3）邮箱链接
  <a href="mailto:1304440636@qq.com">点击联系我</a>

行内元素以及块元素：

（1）行内元素：内容撑开宽度，对于行内元素可排列在一行。

例如：<a> <img> <br> <i> <span>....

(2) 块元素：无论内容多少，都是独占一行。

例如：<p> <h1> <div>.....

列表：

(1) 有序列表

 <ol>
       <li>qq</li>
       <li>www</li>
       <li>ee</li>
       <li>rr</li>
       <li>yy</li>
   </ol>

(2)无序列表

  <ul>
       <li>qq</li>
       <li>www</li>
       <li>ee</li>
       <li>rr</li>
       <li>yy</li>
   </ul>

（3）自定义列表

dl :自定义列表 dt：自定义列表的名字 dd 自定义列表内容

<dl>
    <dt>学课</dt>
    <dd>语文</dd>
    <dd>数学</dd>
    <dd>英语</dd>
    <dt>老师</dt>
    <dd>语文老师</dd>
    <dd>数学老师</dd>
    <dd>英语老师</dd>
</dl>

表格：

（1）表格用标签<table>

表格的行<tr> rows

表格的列<td>

合并行使用rowspan

合并列使用colspan

 <table border="1px solid black">
       <tr>
           <td colspan="2">哈哈</td>
           <td>哈哈</td>
       </tr>
       <tr>
           <td rowspan="2">哈哈</td>
           <td>哈哈</td>
       </tr>
       <tr>
           <td >哈哈</td>
           <td>哈哈</td>
       </tr>
   </table>

内联框架

（1）使用<iframe>

src:地址 w-h 设置宽高

iframe 可以与<a>标签进行配合使用，通过iframe指定的名字，将相关页面打开到iframe中去。
<iframe src="" name="iframename" width="auto" height="auto" style="background-color: lightgrey"></iframe>
  <a href="test1.html" target="iframename">点击我</a>

关于CSS：

CSS的三种导入方式：

(1)关于css样式可以内部样式在<head> 标签里面并且在<style>里面的样式代码

(2) 外部样式：通过<link>标签进行引入

（3）行内样式直接写在该标签的内部样式代码

上述三种样式的优先级：就近原则。

CSS的基本选择器：

（1）标签选择器直接通过标签来选择（选择页面所有的该标签）

（2）class选择器通过.class名字来进行选择（能进行分组选择）

(3) ID选择器通过#id名字来进行选择（id唯一不能重复）

关于三者的优先级：id > class > 标签

层次选择器：

（1）后代选择器（获取到相应标签以空格分开的子类标签）

（2）子选择器（获取到相应的标签>子标签）只选择该标签下表面的子类，子类里面的标签未被选中。

（3）相邻兄弟选择器（获取到该标签“+” 相邻标签）只选择下面的相邻的

（4）通用选择器（获取该标签“`” 标签）选择该标签下面的所有兄弟标签
p`p{}
属性选择器：

（1）属性选择器是通过id+class相结合的方式

属性选择器里面的： = 相等于 *= 模糊匹配 ^=以什么开头 $=以什么结尾
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        /*标签选择*/
        a{
            float: left;
            /*将行内元素变为块*/
            display: block;
            width: 50px;
            height: 50px;
            margin-left: 10px;
            background: #3eb681;
            /*设置圆角*/
            border-radius: 20px;
            text-align: center;
            /*设置行内高度*/
            line-height: 50px;
        }

        /**/
        /*a标签中模糊匹配*/
        a[class*="item"]{
            background-color: red;
        }
        /*a标签具有id属性的*/
        a[id]{
            background-color: blue;
        }
        /*a标签属性id为定值*/
        a[id=second]{
            background-color: #3eb681;
        }
        /*以什么开头*/
        a[href^=index]{
            background-color: lightgray;
        }
        /*以什么结尾*/
        a[href$=doc]{
            background-color: #9849aa;
        }
        /*鼠标悬浮的效果*/
        a:hover{
            background-color: yellow;
        }
    </style>
</head>
<body>

<p>
    <a href="aaa.jpg" class="links item first" id="first">1</a>
    <a href="aaa.jpg" class="links item" id="second">2</a>
    <a href="aaa.jpg" class="links item">3</a>
    <a href="haha.pdf" class="links item">4</a>
    <a href="haha.pdf" class="links item">5</a>
    <a href="sss.doc" class="links item">6</a>
    <a href="sss.doc" class="links item">7</a>
    <a href="index.html" class="links item">8</a>
    <a href="https://www.baidu.com" class="links item last">9</a>
</p>
</body>
</html>

关于背景图片问题：

（1）通过一条样式语句完成：

（2）通过多条语句：

关于块和行内元素之间的转化：

（1）display : block 块元素

inline 行内元素

inline-block 是块内元素但是可以在一行进行显示

none 显示消失

关于浮动超出父级元素问题解决：

（1）在父级标签内增加一个空的div标签，并清除div浮动效果（clear ）[ clear后面可以加 right 浮动右侧失效 left 浮动左边失效 both 左右浮动都失效]

（2）使用 overflow 在父级标签内添加 overflow ： hidden；（将多余会被切掉）

（3）父级添加伪类 after （待父级加载完之后进行的操作）
#parent{  选择到父元素
     content ：‘’； 加一个空内容
     display ： block；设置为块元素
     clear ： both； 取消两端的浮动
}
关于相对定位：

（1） position ：relativa 相对定位（相对于自己的定位）

top ：-10px 往上移动10px 10px 往下移动10px

left ： -10px 往左移动10px 10px 往右移动10px

关于绝对定位：

（1）position ： absolute ;绝对定位（若父级标签未进行定位，则会根据浏览器进行绝对定位，若父级有定位操作会根据父级标签进行定位）

top ：-10px 往上移动10px 10px 往下移动10px

left ： -10px 往左移动10px 10px 往右移动10px

固定定位：

（1）position ： fixed 固定定位，存放于固定位置

top ：-10px 往上移动10px 10px 往下移动10px

left ： -10px 往左移动10px 10px 往右移动10px

图层：

Z-INDEX : 图层从0···。。。。；定位了才能使用图层技术 opacity 可以设置透明度。