HTML基础知识和CSS常见操作

谁借莪１个温暖的怀抱￠ 2021-09-28 11:58 326阅读 0赞

在一个项目的开发中，由于没有专门做前端的同学，于是自己简单粗暴地学习了一些前端的基础知识，可以做一个简单的页面啦！把之前的笔记贴出来和后台开发的兄弟们共勉！

**目录**

一、css基础知识与常用操作

1、HTML元素可以看作盒子，"box model"

2、如何将元素与样式关联

3、常用元素及其样式设置

二、HTML基础知识

1、HTML的加载顺序

2、css、jQuery、js文件的位置与引入顺序

3、控件大全

--------------------

## 一、css基础知识与常用操作 ##

### **1、HTML元素可以看作盒子，"box model"** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTE1NTg1_size_16_color_FFFFFF_t_70][]

有这些东西可以定义：

**（1）margin：外边距，没有背景颜色，是完全透明的；**

*  **设置方式**
    
     *  margin:25px 50px 75px 100px;（上右下左）；3个值（上|左右|下）;两个值（上下|左右）
     *  margin-top/bottom/right/left: 25px
 *  **取值：**
    
     *  auto：设置为浏览器边距，这样做的结果会依赖于浏览器
     *  length：定义一个固定的margin（使用像素，pt，em等）
     *  %：定义一个使用百分比的边距

**（2）border：边框，指定一个元素边框的样式和颜色**

*  **设置选项**
    
     *  border-style 边框样式
        
         *  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTE1NTg1_size_16_color_FFFFFF_t_70 1][]
     *   border-width 边框宽度：两种方式，1-指定长度值（px, pt, cm, em） ；2-使用关键字（thick 、medium 和 thin，不具体
     *  border-color 边框颜色：三种方式，1-颜色的名称（如 "red"）；2-RGB 值（如 "rgb(255,0,0)"）；3-Hex - 指定16进制值,（如 "\#ff0000"）
 *  **分别设置**
    
     *  边框分别设置样式：border-style:dotted solid double dashed;
     *  宽度：指定某条边框：border-left-width:15px;
     *  颜色：分别设置颜色：border-color:\#ff0000 \#00ff00 \#0000ff rgb(250,0,255);
 *  **特殊的：**
    
     *  边框圆角：border-radius: 8px

**（3）padding 填充：元素边框与元素内容之间的空间，即上下左右的内边距，没有颜色哦**

*  **设置方式：**
    
     *  padding-top/bottom/right/left: 25px
     *  padding:25px 50px 75px 100px;
 *  **取值情况：**length 和 %

### **2、如何将元素与样式关联** ###

（1）body：直接body\{ xxxx:xxxx; \}

（2）通过元素的id：

*  \#元素ID \{xxx: xxx; yyy:yyyy;\}
 *  \#元素A的ID,\#元素B的ID,\#元素C的ID \{xxx: xxx; yyy:yyyy;\}

（3）通过标签类型

*  input\[type="number"\] \{xxx: xxx; yyy:yyyy;\}
 *  input\[type="number"\] ,input\[type="password"\] \{xxx: xxx; yyy:yyyy;\}

（3）在标签中写class="xx"

*  第一步：. myhref\{xxx: xxx; yyy:yyyy;\}  !!有个点
 *  第二步：<button class="myhref"   ..... >

### **3、常用元素及其样式设置** ###

**（1）body：**背景颜色、背景图（链接、位置、大小、重复）

body
    {
    background-color:#ffffff;
    background-image:url('hhbd/images/codeInitialization/lansebeijing.png');
    background-repeat:no-repeat;    /* 背景图片小于屏幕事，不重复平铺，只显示一次 */
    background-position:top;
    background-size:100% 40%;     /* 中间没有逗号隔开的*/
    }

**（2）div**（和body差不多，都是背景性质的）

#back_style{
    width:90%;   /* 占屏幕宽度的百分比*/
    height:80%;
    background-image:url('hhbd/images/recharge/beijing.png');
    background-repeat:no-repeat;
    background-position:top;
    background-size:cover; /*等比扩展图片来填满元素*/
    }

**（3）文字**

*  颜色、字号、加粗、对齐
 *  装饰text-decoration（上划线overline、删除线line-through、下划线underline、闪烁blink、无none）

#title{
    color: #ffffff;
    font-size: 2.1em;
    font-weight:bold;
    text-align:center; /* 或者<h1 align="center">*/
    }

**（4）输入框**

*  box-sizing:更改元素的默认css模型，建议都用border-box，则这个元素的实际宽=width-(border+padding)
 *  长宽、背景颜色、圆角、字号、字体颜色、字体对齐、边框颜色
 *  其他细节：生成框类型display、去掉默认设置、元素边框外画线outline

input[type="id"] {
    box-sizing: border-box;
    width:90%;
    height:2.7em;
    background-color: #2364b2;
    border-radius:10px;
    font-size:1.4em;
    color:#ffffff;
    text-align:center;
    text-decoration:none;
    -web-kit-appearance:none;
    -moz-appearance: none;
    display:block;  block指块级元素，前后有换行符
    outline:0;
    padding:0 1em;
    }

**（5）按钮**：长宽、圆角、位置、背景颜色、圆角、文字颜色、对齐、字号、按钮阴影

#myButton
    {
    margin:0 auto;
    width: 90%;
    height:3em;
    background-color: #ffffff;
    border-radius:6px;
    padding: 10px 40px;
    border: none;
    
    color:#318fff ;
    text-decoration: none;
    text-align: center;
    font-size: 1.5em;
    font-weight:bold;
    
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    }

## 二、HTML基础知识 ##

### **1、HTML的加载顺序** ###

*  **从上到下**，依次加载
 *  重要的内容应该先加载，由此产生HTML代码排序问题。

### **2、css、jQuery、js文件的位置与引入顺序模板** ###

*  宏观上先后：**css --> jQuery --> js**
 *  具体分析（不考虑太复杂的情况）

<table> 
 <tbody> 
  <tr> 
   <td style="width:99px;"> <p>&nbsp;</p> </td> 
   <td style="width:298px;"> <p><strong>css&nbsp;</strong></p> </td> 
   <td style="width:234px;"> <p><strong>jQuery</strong></p> </td> 
   <td style="width:218px;"> <p><strong>js</strong></p> </td> 
  </tr> 
  <tr> 
   <td style="width:99px;"> <p>&nbsp;</p> <p>推荐位置</p> </td> 
   <td style="width:298px;"> <p>放在&lt;head&gt;中</p> <p>先公共css，再独立css</p> </td> 
   <td style="width:234px;"> <p><span style="color:#3399ea;"><strong>js之前</strong></span></p> <p>页面<span style="color:#3399ea;">底部</span></p> <p>先公共，再独立</p> </td> 
   <td style="width:218px;"> <p>jQuery之后</p> <p>页面最底部</p> <p>先公共，再独立</p> </td> 
  </tr> 
  <tr> 
   <td style="width:99px;"> <p>原因</p> </td> 
   <td style="width:298px;"> <p>打开网页时，浏览器先下载好 CSS 样式表，之后下载的网页内容，就会立刻加上 CSS 的样式效果。</p> <p>如果不先加载css，则可能出现FOUC（无样式闪烁），加载出一堆凌乱内容，等加载到样式时才慢慢变成正常样式。</p> </td> 
   <td style="width:234px;"> <p>jQuery 是一个比较常用的 JavaScript 库，我们写的js代码可能就基于它，所以一定在js之前引入。</p> <p>&nbsp;</p> </td> 
   <td style="width:218px;"> <p><span style="color:#3399ea;">JavaScript 文件通常比较大，浏览器下载比较费时间。</span></p> <p>所以放在底部，网页先显示内容，再加载js对当前页面进行处理</p> </td> 
  </tr> 
 </tbody> 
</table>

*  标签顺序的模板

<!doctype html>    //声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。
    <html lang="en">  //所用语言为英语
    <head>
      <meta charset="UTF-8">   //  meta可提供有关页面的元信息（meta-information），如编码、关键词、描述、作者信息
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">  //让IE使用最新的渲染模式
      <meta name="viewport" content="width=device-width, initial-scale=1"> //针对移动设备,网站显示宽度等于设备屏幕显示宽度,内容缩放比例为1:1
      <meta name="renderer" content="webkit">  //可以让部分国产浏览器默认采用高速模式渲染页面
      <title>标题</title>
      <link rel="stylesheet" type="text/css" media="screen" href="style.css"/> // css
    </head>
    <body>
      
    <script src="hhbd/staticsjs/jquery-2.1.4.js"></script>
    
    <script type="text/javascript" src="jquery/插件.js"></script>
    <script type="text/javascript" src="自己编写的js/js.js"></script>
    
    </body>
    </html>

### **3、控件大全** ###

*  文字、输入框、显示框、按键、列表什么的，推荐看菜鸟教程：[【菜鸟教程】HTML5][HTML5]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTE1NTg1_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTE1NTg1_size_16_color_FFFFFF_t_70]: /images/20210923/09f57b78018940419ece3f5ac6c3a2cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTE1NTg1_size_16_color_FFFFFF_t_70 1]: /images/20210923/155fd466db1b4bee9acc0370ea9bf00b.png
[HTML5]: http://www.runoob.com/html/html5-intro.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTE1NTg1_size_16_color_FFFFFF_t_70 2]: /images/20210923/d527ccf184014e20a1561eca66cbe0e8.png