HTML基础知识和CSS常见操作

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

目录

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

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

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

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

二、HTML基础知识

1、HTML的加载顺序

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

3、控件大全

---

 

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

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

有这些东西可以定义：

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

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

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

• 设置选项
  • border-style 边框样式
    • 
  •  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;}  !!有个点
• 第二步：

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; /* 或者
*/
}

（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
• 具体分析（不考虑太复杂的情况）

	css	jQuery	js
推荐位置	放在中 先公共css，再独立css	js之前 页面底部 先公共，再独立	jQuery之后 页面最底部 先公共，再独立
原因	打开网页时，浏览器先下载好 CSS 样式表，之后下载的网页内容，就会立刻加上 CSS 的样式效果。 如果不先加载css，则可能出现FOUC（无样式闪烁），加载出一堆凌乱内容，等加载到样式时才慢慢变成正常样式。	jQuery 是一个比较常用的 JavaScript 库，我们写的js代码可能就基于它，所以一定在js之前引入。	JavaScript 文件通常比较大，浏览器下载比较费时间。 所以放在底部，网页先显示内容，再加载js对当前页面进行处理

• 标签顺序的模板

    //声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。
  //所用语言为英语

     //  meta可提供有关页面的元信息（meta-information），如编码、关键词、描述、作者信息
  
  
  
  
    //让IE使用最新的渲染模式
   //针对移动设备,网站显示宽度等于设备屏幕显示宽度,内容缩放比例为1:1
    //可以让部分国产浏览器默认采用高速模式渲染页面
  
   // css


  

3、控件大全

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