web页面学习积累

点名啦

已于 2023-11-13 13:04:29 修改

阅读量73

点赞数 3

文章标签：前端学习 html

于 2023-10-23 14:47:13 首次发布

本文链接：https://blog.csdn.net/weixin_47175003/article/details/133635678

版权

文章目录

关于HTML&CSS&浏览器

本文章以笔记积累的形式呈现，表达欠缺之处还望指点

关于HTML&CSS&浏览器

一什么是HTML，什么是CSS

HTML （英语：HyperText Markup Language，简称：HTML）是一种超文本标记语言，应用于web页面基本内容设计的描述。
CSS （英文：Cascading Style Sheets 简称：层叠样式表）是一种用来为结构化文档（例如HTML）增添样式的语言。
浏览器 不同的浏览器与同样的HTML及CSS联接时，呈现的web页面是不同的，而其关键在于浏览器不同的内核与不同的引擎。因此对应浏览器的分类主要是以不同的内核与引擎进行区分的。
HTML文本结构呈现给用户的可见页面在标签中，而标签里面各种各样的内容其实可以看成一个个盒子模型，把一个页面拥有共同性的元素（元素也是属于一个盒子）内容放在一个大盒子里，盒子里面有三类元素：1.块级元素，2.内联元素，3.内联块级元素，而通过HTML的各类元素标签及CSS修饰各类元素标签的属性及其属性值来对web页面进行描述。
因此，不同的属性，不同的标签，不同的元素构造多样的盒子，而多样的盒子组成页面的丰富性。
说人话就是如果HTML是一个人，那么CSS就是他的衣服，发型。

二 HTML元素盒子

1.HTML元素盒子模型由外边距，边框，内边距，文本内容组成

Margin(外边距)：清除边框外的区域。
border(边框)：围绕在内边距和内容外的边框。
Padding(内边距)：清除内容周围的区域。
Content(文本内容)；显示文本内容。

2.HTML元素三类盒子

用标签 display:修饰，例如：display:block;

块级元素 block；
内联块级元素 inline-block；
内联元素 inline；

3.关于三种元素盒子区别（inline含于block内）：

block 盒子独占一行或多行宽度，自动换行，一般都是有特定的外边距的；
inline 默认盒子大小为文本空间大小（由文本撑开），外边距默认为0，只占特定需要的宽度，无法设置宽高；
inline-block 即放在block里的block元素，不会独占一行但是可以设置宽高；

三 HTML语言的基本结构

 <!DOCTYPE html>
 <!--此段的！DOCTYPE是为HTML的版本声明的作用，在与浏览器联接时，浏览器根据不同的HTML版本对HTML文件进行编译读取 -->
<html lang="en">
   <!-- <html></html>标签即把HTML文件描述页面的全部内容概括起来 -->
     <!-- <html></html>标签里又包含<head></head>头部标签及<body></body>页面可见标签 -->
<head>
    <meta charset="UTF-8">
    <!-- 定义web编译HTML文件的编码格式为UTF-8 -->
    <title>Document</title>
    <!-- 定义网页标题为Document -->
</head>

<body>
  
</body>

</html>

四 HTML元素标签积累

1.html5新增标签

<body>
<header>页面头部</header> 
<section> 
  主体内容
  <nav>导航栏</nav> 
  <article>内容</article> 
</section>
<footer>页面根部</footer> 
<!-- 这些标签没有特别的属性，只是取好名字，使代码更具格式化 -->
</body>

2.标题标签`<h1>~<h6>`六种级别的标题标签

 
 <body>
    <h1>这是一个标题</h1>
    <h2>这是一个标题。</h2>
    <h3>这是一个标题。</h3>
 </body>

3.段落标签`<p></p>`

    <body>
        <p>这是一个段落</p>
    </body>

4.区块标签`<div></div>`

   <body>
       <div>
           这是一个大区块
       </div>
   </body>

5.内联小标签

   <body>
       <span>
           这是一个内联元素
       </span>
   </body>

6.表格标签`<table></table>`及行标签`<tr></tr>`及数据单元格`<td></td>`

   <body>
       <table>
      <!--  大表格 -->
           <tr>
       <!-- 一行 -->
               <td>
      <!--  数据单元格   -->
               </td>
           </tr>
       </table>
   </body>

图片标签<img src="" alt="">

    <body>
        <img src="图片地址" alt="图片预备信息">
    </body>

链接标签<a href=""></a>

    <body>
        <a href="链接地址" target="链接在页面打开的方式" title="鼠标悬浮在链接上时的提示信息">“<!-- 用户可见的链接接口提醒词 -->”
          <!-- target的值有_blank（在新标签或窗口中打开链接）和 _self（在当前标签或窗口中打开链接）等--></a>
    </body>

列表标签

    <body>
        <ul><!-- 有序标签 -->
            <li>
               <!--  列表项 -->
            </li>
        </ul>
        <ol><!-- 无序标签 -->
            <li>
             <!--    列表项 -->
            </li>
        </ol>

    </body>

格式化标签

<body>
    <p>
      <b>这是一行加粗体字</b>
      <br><!-- 这是一个换行符 -->
      <i>这是一行斜体字</i>
      <sup>这是一个上标签</sup>
      <strong>这是一行加粗字体</strong>
      <sub>这是一个下标签</sub>
      <del>这里的文字会被划掉</del>
      <small>这是一行小体字</small>
      <!-- 可以看到文本格式化标签都在<P></P>标签里，而<p></p>标签是块级元素，因此这些格式化标签是内联元素 -->
    </p>
  </body>

五 CSS的三种结构类型

1.CSS的三种结构类型可根据在HTML文本的位置可分为外部样式，内部样式，内联样式

外部样式即CSS独立的一个外部文件。使用其样式是需要用<link>标签来引出其地址。
内部样式即在html文档的<head>或者<body>内以<style>标签表现的CSS。
内联样式即在指定标签内部的CSS。单独对指定的标签进行样式表现。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 内部样式 */
  </style>
</head>
<body>
  <style>
    /* 内部样式 */
  </style>

  <p style="属性：属性值；"><!-- 内联样式-->
  </p>
</body>
</html>

选择器name
{
    属性：属性值；<!-- 外部样式 -->
}

定义属性时，属性值后面一定要用；隔开不同的属性

2.三种样式的优先级：

当对同一个元素而言有多种CSS与其对应时，才会有优先级一说，此时优先级：
内联样式>内部样式>外部样式。
!important 语句设置最大优先级

六 CSS选择器

选择器是什么：选择器是作用于CSS外部样式及内部样式内的一个结构，这个结构里面包含了需要定义的CSS样式。

一选择器class & id

class就是一个类，他是以html的样式为单位去定义一类样式来呈现一组html元素。
id就是一个元素的指定，他是以html的元素为单位去定义一类样式来呈现一个html元素。

二标签选择器

和id一样都是以元素为单位，但是他呈现的是这一组元素，而不是这种元素中的一个。

三组合选择器

具体解释已在代码中。

  <style>
    *
    {
      margin: 0px;
      padding: 0px;
    }
    html,body
    {
      
      height: 100%;
    }
    div /* 标签div选择器 */
    {
      width: 100%;
      height: 100px;
    }
    .box1
    {
      background-color: aqua;
    }
    .box1 div /* 后代选择器 不分子一代还是子二代...对应的选择器都会被修饰 且可以都是使用，例如：.box1 div p span..... 最终只修饰最后一个选择器*/
    {
      height: auto;
      background-color: blue;
    }
    .box1>p /* 子一代选择器 即此选择器下属的直接的选择器能被修饰，（此选择器的对应的儿子选择器能被修饰，孙子，曾孙不能被修饰）*/
    {
      height: auto;
      background-color: rgb(22, 88, 158);
    }
    .box2
    {
      background-color: bisque;
    }
    .box2~p /* 后续兄弟选择器 即此选择器后面的所有兄弟关系（具有相同父盒子）的选择器（类 id 标签选择器）都会被修饰。*/
    {
      background-color: chartreuse;
    }
    .box3
    {
      background-color: blueviolet;
    }
    .box3+p /* 相邻兄弟选择器 相对于后续兄弟选择器，其不同点就是只能修饰后续相邻的一个选择器（切记是后续，在其头上也不行）且优先级比后续兄弟选择器高*/
    {
      background-color: brown;
    }
  </style>
</head>

<body>
 <div class="box1">
    <div>后代选择器</div>
    <p>子一代选择器
    </p>
    <div>
      <p>无效</p>
    </div>   
 </div>
 <p>我是在box2上面的p，所有没有被修饰</p>
 <div class="box2">

 </div>
 <p>我是在box2下面(后续)且和box2是兄弟盒子关系的p,所有被修饰了</p>
 
 <div class="box3">
  <p>我是在box2下面(后续)但是在box3里的p,所有没被修饰了</p>
 </div>
 
 <p>我是在box2下面的p,所有被修饰了</p>
 <p>我是在box2下面的p,所有被修饰了</p>
</body>

四属性选择器

属性选择器更像自定义选择器，表达形式更加丰富。

  <style>
    *
    {
      margin: 0px;
      padding: 0px;
    }
    html,body
    {
      height: 100%;
    }
    [title] 
    /* title只是默认字符串，可以是其他的字符串 。以下选择器都是title的衍生。*/ 
    {
      width: 100%;
      height: auto;
      background-color: rgb(211, 15, 233);
    }
    [title=hh] /* 有值属性选择器 */
    {
      background-color: rgb(205, 235, 12);
    }
    [title~=kk] /* 属性多值选择器 */
    {
      background-color: black;
      color: white;
    }
    [title*=lc] /* 属性值的字母可以多次出现，但不能出现别的字母 */
    {
      background-color: rgb(150, 69, 232);
    }
    [title|=num] /* 只能出现属性值或者属性值+"-数字" ，应用于同一类型的不同型号进行编号*/
    {
      background-color: coral;
    }
    [title$="end"] /* 属性的后几个字母是end即可 */
    {
      background-color: brown;
    }
    [title^="sta"] /* 属性的前几个字母是sta即可 */
    {
      background-color: darkgreen;
    }
  </style>
</head>

<body>
 <div title>
  我是属性选择器定义盒子
 </div>
 <div title="hh">
  我是属性有值选择器定义盒子
 </div>
 <div title="kk ll etc..."> <!-- 特定的那个名字必须空格独立呈现 -->
  我是属性多值选择器定义的盒子
 </div>
 <div title="llllccccccccccccccccccccccccccc"><!-- 但凡title="lillllllccccccc"都不行 -->
  我是你超哥！！！
 </div>
 <div title="num-1">
  我和下面那个盒子一样
 </div>
 <div title="num-2">
  我和上面那个盒子一样
 </div>
 <div title="kgfdnbgvfcdxk,jmhngb543end">
  属性的后几个字母是end即可
 </div>
 <div title="sta345678umjhngbfv">
  属性的前几个字母是sta即可
 </div>
</body>

五伪类选择器

伪类选择器的形式多种多样，不同的伪元素修饰在盒子里的位置，状态，性质不一样。
以下代码并没有概括完全。

<style>
   *
   {
     margin: 0px;
     padding: 0px;
   }
   html,body
   {
     height: 100%;
   }
   div
   {
     width: auto;
     height: auto;
     background-color: aqua;
   }
   /* 动态伪类选择器 必须以link visited hover active 的顺序写*/
   .box1 a:link /* 初始链接状态 */
   {
     background-color: rgb(16, 172, 120);
   }
   .box1 a:visited /* 访问后的链接状态 */
   {
     background-color: bisque;
   }
   .box1 a:hover /* 鼠标悬浮此处时的链接状态 */
   {
     background-color: blue;
   }
   .box1 a:active /* 点击那一瞬间的链接状态 */
   {
     background-color: blueviolet;
   }

   /* 结构类的伪类选择器 */
   .box2
   {
     width: auto;
     height: auto;
     background-color: rgb(243, 244, 241);
   }
   .box2 li:first-child
   {
     background-color: violet;
   }
   .box2 li:last-child
   {
     background-color: rgb(201, 23, 23);
   }
   .box2 li:empty
   {
     background-color: aquamarine;
   }

   /* 与表单相关的伪类选择器 */
   .box3
   {
     background-color: cadetblue;
     width: auto;
     height: auto;
   }
   .box3 input:enabled /* 没有修饰disabled的input会呈现的的效果 */
   {
     background-color: white;
   }
   .box3 input:disabled /* 修饰了disabled的input会呈现的效果 */
   {
     background-color: violet;
   }
   .box3 input:focus /* 鼠标选择的input会呈现的效果 */
   {
     background-color: aquamarine;
   }
   .box3 input:checked /* 针对于选择框，选择之后会呈现的效果 */
   {
     width: 100px;
     height: 100px;
   }
 </style>
</head>
<body>
 <div class="box1">
   <a href="./CSS笔记/">动态伪类选择器</a>
 </div>
 <div class="box2">
   <ul>
     <li>111</li>
     <li>222</li>
     <li>333</li>
     <li></li>
     <li></li>
     <li></li>
     <li>999</li>
   </ul>
 </div>
 <div class="box3">
   <form action="">
     <input type="text" name="" id="" disabled>
     <input type="text" name="" id="">
     <input type="text" name="" id="">
     <input type="text" name="" id="">
     <input type="radio" name="" id="">
   </form>
 </div>

关于`element:nth-of-type(n)`与`element:nth-child(n)`的区别

对此语法的理解我们可以分为三个过程：
1.以父盒子的什么子元素为什么单位，2.然后以单位去计索引的数(n)，3.然后n对应的子元素与单位匹配。
前者说的是以element所在的父盒子内的element为type单位，在此元素所在的盒子里只对element类行计索引数选取。
后者说的则是以element所在的父盒子内的每一个元素为child单位，也就都需要计索引数，然后在看对应索引的子元素是否为element，是才选择。

 <style>
    .box2
    {
      width: auto;
      height: auto;
      background-color: rgb(243, 244, 241);
    }

    .box2 p:nth-of-type(3)  p2变黑色black
    {
      background-color: black;
    }
    .box2 p:nth-child(3)  p3变橙色chocolate
    {
      background-color: chocolate;
    }
  </style>
</head>
<body>
 
  <div class="box2">

    <ul>
      <li>111</li>
      <li>222</li>
      <li>333</li>
      <li>444</li>
    </ul>    ul为第一个child    

    <p>p1</p>p为第二个子child    第一个type为p的elemrnt
    <P>p2</P>p为第三个子child    第二个type为p的elemrnt
<div>66</div>div为第四个子child
    <p>p3</p>                   第三个type为p的elemrnt

  </div>
  
  <body>

锚点配合目标伪类选择器:target的使用

    <style>
    div
    {
      width: auto;
      height: 100px;
      
    }
    div.con
    {
      display: none;
    }
    #hh
    {
      background-color: aqua;
    }
    #jj
    {
      background-color: blue;
      
    }
    #kk
    {
      background-color: brown;
    }
    div.con:target
    {
      display: block;
    }
  </style>
</head>
<body>
  <a href="#hh">gfvdc</a>
  <div id="hh" class="con">
    Lorem ipsum dolor sit amet consectetur 
    adipisicing elit. Quod maiores saepe, minus 
    accusantium inventore nostrum, eius iste non temp
    oribus ab, animi quae laborum. Ea quae ad tempora sequi nesciunt eos.
  </div>
  <a href="#jj">gf</a>
  <div id="jj" class="con">
    Lorem ipsum dolor, sit amet consectetur 
    adipisicing elit. Rem dolore, dicta ipsa 
    architecto quisquam iure quidem atque tenetur sunt 
    fugit voluptas est doloribus in laborum minima tem
    poribus vero, corporis ipsum.
  </div>
  <a href="#kk">gfvdc</a>
  <DIV id="kk" class="con">
    Lorem ipsum dolor sit amet consectetur 
    adipisicing elit. Ut iure adipisci culpa sunt, a 
    dignissimos dolorem iusto facilis laudantium veniam at, m
    aiores tempore nisi aperiam reprehenderit earum! Ducimus, nulla dolorum.
  </DIV>
<body>

七 CSS属性积累

文本属性

<body>
   <style>
.classname
      {
       text-align:/* 文本排列属性 */;
       text-decoration:/* 文本修饰线位置属性 */;
       text-transform:/* 文本字母大小写属性 */;
       text-indent:/* 文本首行缩进距离 */;/* 正数为向左缩进，负数为向右缩进 */
       color: /* 定义文本颜色 */;
       background-color: /* 定义元素边框border以内背景颜色 */
       word-break: break-all;/* 文本换行属性 */
      }
   </style>
</body>

字体属性

   <body>
    <style>
    .classname
    {
     
      font-weight: /* 描述字体粗细 */;
      font-size: /* 描述字体大小尺寸 */;
      font-family: /* 字体系列 */;
      font-style: /* 字体是否倾斜与正常 */;
      
    }
    </style>
  </body>

链接属性

<body>
 <style>
   .classname
   {
     a:link {属性;}     /* 未访问链接*/
     a:visited {属性;}  /* 已访问链接 */
     a:hover {属性;}  /* 鼠标移动到链接上 */
     a:active {属性;}  /* 鼠标点击时 */
   }

 </style>
</body>

关于表单属性属性积累

<body>
  <!-- 
  表单form的action属性值表示此表单信息传递到的地址。

  input标签的相关属性及相关属性值：
    type属性值：
      text表示文本输入框，
      radio表示单选按钮属性，
      checkbox表示复选按钮属性，
      file表示进行文件选择，
      submit表示提交按钮，
      image表示相当于submit,只不过换成了图片
      password表示密码输入。

  name属性值相同的一类input中只能选择一个，
  vaule属性值为对应标签需要传递给后端的值，
  id值对应label属性的for的值时，label标签与相应input对应
  checked属性表示默认选择的input按钮标签
  readonly属性表示标签只读
  disabled属性表示标签禁用-->

  
    
    <div>
      <form action="表单传送给后端的数据的地址">
        <div>
          <!-- input使用 -->
    <input type="radio" name="a" id="1" checked>
    <label for="1">非常满意</label>
    </div>
    <div>
      <input type="radio" name="a" id="2">
      <label for="2">满意</label>
    </div>
    <div>
      <input type="radio" name="a" id="3">
      <label for="3">一般</label>
    </div>
    <div>
      <input type="radio" name="a" id="4">
      <label for="4">不满意</label>
    </div>
    
    <h2>我擅长的技术：</h2>
    <div>
      <input type="checkbox" name="b" id="HTML">
      <label for="HTML">HTML</label>
      <input type="checkbox" name="b" id="CSS">
      <label for="CSS">CSS</label>
      <input type="checkbox" name="b" id="JS">
      <label for="JS">JS</label>
    </div>
      <input type="file">
      <input type="image" name="" id="" src="./个人中心.png" >
      <input type="text" value="文本输入的默认值">
      <input type="text" placeholder="显示的输入提示信息" disabled >
      <input type="text" readonly>
      <input type="submit">

      <!-- select & option的使用 -->
      <div>
       <!-- 选项列表 -->
      <select name="" id="" size="表示select显示几个option标签" multiple="表示可以多选的数值（shift+鼠标右键）">
        <option value="x">西瓜</option>
        <option value="c">草莓</option>
        <option value="p">葡萄</option>
        <option value="y">杨梅</option>
      </select>
      </div>

      <!-- 定义一个边框 -->
      <div>
        <fieldset>
          <legend>
            边框的内容的定义
          </legend>
          <input type="radio" name="c" id="">
          <input type="radio" name="c" id="">
        </fieldset>
        
        <!-- 
          定义一个多行文本输入框 
          textarea属性：
            resize设置边框固定情况：
              both,none,horizontal：垂直方向固定，vertical:水平方向固定-->
        <div>
          <textarea name="" id="" cols="30" rows="10" style="resize:horizontal;">框内默认值 注意textarea标签换行问题</textarea>
        </div>
      </div>
    
    <!-- 以下是HTML5新增加的表单属性 -->
      </form>  
      <form action="">
          <input type="date" name="" id="">
          <input type="color" name="" id="">
          <input type="email" name="" id=""autofocus（默认锁定此input） required（定义必填的input） pattern="文本格式（正则表达式）">
          <input type="number" name="" id="" max="8" min="2" step="2">
          <input type="range" name="" id="" max="800" min="2" >
          <input type="submit" name="" id="">
          <input type="search" name="" id="" list="食物">

          <!-- 数据列表 -->
          <datalist id="食物">
            <option value="炒面"></option>
            <option value="炒粉丝"></option>
            <option value="炒辣椒"></option>
          </datalist>
          </form>
    </div>
</body>