HTML笔记汇总

HTML知识笔记

1、结构生成语法

直接使用 英文感叹号(!)+tab键 生成下面的结构：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  11. </body>
  12. </html>

2、网页结构修改必须知道的知识

title标签的作用

网站叫什么名字，都是在<title></title>内输入网站标题实现。

body标签的作用

网页看到的内容都是在<body></body>标签内编写代码实现。

3、

表单标签的语法使用

form+tab键 实现生成表单
它的参数：
action =>地址，用于传参给它
method => 提交方式 GET （通过网址传参，参数会在网址上显示） 示例：https://www.baidu.com/s?ie=utf-8&f=8
POST （浏览器内部传） 它更安全，它传得更多

input + tab键 生成一个文本表单

  1. <input type="文本框的类型，改的值是这里" />
  2. type的值可以取的有：
  3. text 文本
  4. password 密码
  5. number 数字
  6. date 日期
  7. email 邮箱
  8. radio 单选
  9. checkbox 多选
  10. reset 按钮重置
  12. 下拉框：
  13. select
  14. 里面的选项用的是 option  
  16. 多行文本：
  17. textarea

CSS的三种适用方式

  1. <!-- 第二种：内嵌式 ：只能被当前网页使用，不能被别的网页引用，它不能共用 -->
  2. <!-- style + tab生成 -->
  3. <style>
  4.     /* 标签名{ 属性名:属性值 } */
  5.     h1{
  6.         color:aqua;
  7.         font-size: 90px;
  8.     }
  9. </style>
  10. <!-- 第三种：导入式 => 工作中用它比较多 -->
  11. <!-- 导入式的代码可以共用，所以工作都是用它最多 -->
  12. <link rel="stylesheet" href="./style.css">
  14. <!-- 1、CSS的用法 行内式 -->
  15. <!-- style => 样式，风格 -->
  16. <h1 style="color: rgb(182, 94, 94);text-align: center;">这是一个标题</h1>
  17. <!-- 
  18.     如果用行内式，每个标签都要重复写一样的CSS代码才能修饰，这样代码很冗余，所以不推荐使用行内式
  19.  -->

css中的三种基本选择器

  1. /* 1、id选择器
  2.     #id名{
  3.         属性:值;
  4.     }
  5. */
  6. #box{
  7.    background-color: olivedrab; 
  8.    width:200px;
  9. }
  10. /* 2、类名选择器
  11.     .类名{
  13.     }
  14. */
  15. .title{
  16.     /* 文字居中 */
  17.     text-align: center;
  18.     color:red;
  19. }
  20. /* 3、标签选择器
  21.     标签名{
  23.     }
  25.     它会选择全部名称一样的标签都会修改！！
  26. */
  27. #box li{
  28.     height:40px;
  29. }

css中的扩展选择器

  1. /* 组合选择器 */
  2. h1,
  3. .intro,
  4. #division{
  5.     color:red;
  6. }
  8. /* 包含关系 */
  9. #box ul li{
  10.     height:40px;
  11.     color:tomato;
  12. }
  13. #box ul li a{
  14.     color:turquoise;
  15. }
  17. /* 
  18. 如果说想限制标签和名称的组合，才有样式，可以用交集选择器
  19. */
  20. li#list{
  21.     background:violet;
  22. }
  23. li.title{
  24.     font-size:60px;
  25. }
  27. /* 伪类选择器 */
  28. a:hover{
  29.     color:red;
  30.     font-size:60px;
  31. }
  32. #divs{
  33.     width:200px;
  34.     height:200px;
  35.     background:violet;
  36. }
  37. #divs:hover{
  38.     width:400px;
  39.     height:400px;
  40.     background:red;
  41. }

css的继承性

也就是父级标签拥有的样式，子标签也会拥有，并且生效。

标签拥有优先级。

  1. <h1 style="background: aqua;" id="title" class="in">这是一个h1标签</h1>
  2. <style>
  3. /* 行内样式 > ID类名选择器 > 类名选择器的优先级 > 标签选择器 */
  4. h1{
  5.     background:#ccc;
  6. }
  7. .in{
  8.     background:yellow;
  9. }
  10. #title{
  11.     background:red;
  12. }
  13. </style>

css的常用字体样式修饰

  1. h1{
  2.     /* 设置字体 */
  3.     font-family: "宋体";
  4.     /* 设置字体大小 */
  5.     font-size: 40px;
  6.     /* 设置颜色 */
  7.     color:brown;
  8.     /* 加粗 */
  9.     font-weight: bolder;
  10.     /* 演示行高设置 =》 主要用于文字垂直居中 */
  11.     height:100px;
  12.     /* 垂直居中的关键：标签的高度是多少，行高就给多少！！！ */
  13.     line-height: 100px;
  14.     background-color: burlywood;
  15.     /* 水平对齐 */
  16.     text-align: center;
  17.     /* 文字间距 */
  18.     letter-spacing: 50px;
  19.     /* 下划线 */
  20.     text-decoration: underline;
  21. }

盒子的内外边距使用

  1. /* 向上走10像素 */
  2. /* 1、单独写外边距 */
  3. margin-top: 10px;
  4. margin-left: 10px;
  5. margin-right: 20px;
  6. margin-bottom: 40px;
  8. /* 2、同时设置四个方向 */
  9. /* 顺时针写 上右下左 */
  10. margin:40px 50px 60px 70px;
  11. /* 3、同时设置上下 左右 */
  12. margin:20px 60px;
  13. /* 4、三个值的情况 : 上 左右 下 */
  14. margin: 10px 20px 30px;
  16. /* 盒子居中方法 最经常用！！ */
  17. margin:0 auto;
  19. /* =============== 内边距的使用方法 ============= */
  20. /* 1、单独写内边距 */
  21. padding-top: 10px;
  22. padding-left: 10px;
  23. padding-right: 20px;
  24. padding-bottom: 40px;
  26. /* 2、同时设置四个方向 */
  27. /* 顺时针写 上右下左 */
  28. padding:40px 50px 60px 70px;
  30. /* 3、同时设置上下 左右 */
  31. padding:20px 60px;
  33. /* 4、三个值的情况 : 上 左右 下 */
  34. padding: 10px 20px 30px;

边线和圆角

  1. #box{
  2.     width:100px;
  3.     height:100px;
  4.     /* 边线 border */
  5.     /* 边线的大小  边线的颜色 边线的类型（实线 solid 和虚线 dashed） */
  6.     border:1px #ccc solid;
  7.     /* 1、圆角使用 四个角都是20px */
  8.     border-radius: 20px;
  9.     /* 2、对圆的左上和右下设置10px，右上和左下设置0px */
  10.     border-radius: 10px 0;
  11.     /* 3、分别对 左上 右上 右下 左下设置圆角 */
  12.     border-radius:10px 20px 30px 40px;
  13.     /* 4、设置图案为圆形 */
  14.     /* 必须是正方形的物体 才能使用 border-radius: 50%; 变圆形 */
  15.     width:100px;
  16.     height: 100px;
  17.     /* 变成圆形 */
  18.     border-radius: 50%;
  20.     /* border-top: 1px red dashed;
  21.     border-bottom: 10px #000 solid; */
  22. }

visual studio code编辑器红快捷键汇总

生成网页结构结构

英文感叹号(!) + tab键

生成标签快捷键

标签名 + tab键 （标签不需要加任何的符号！）

注释快捷键（HTML和CSS都适用，其他代码都适用）

选中要注释的代码，按ctrl+/

生成多个标签

标签名*数量 + tab键

嵌套生成标签

假设要生成一个嵌套的表格，表格三行两列：

  1. <table>
  2.     <tr>
  3.         <td></td>
  4.         <td></td>
  5.     </tr>
  6.     <tr>
  7.         <td></td>
  8.         <td></td>
  9.     </tr>
  10.     <tr>
  11.         <td></td>
  12.         <td></td>
  13.     </tr>
  14. </table>

生成的语法：table>tr3>td2

说明： 大于号（>）代表的是包含或者嵌套的意思，也就是说table包含tr标签，然后tr包含td，其中有三个tr标签，每个tr都有2个td。

须知：以上的这种语法在存在嵌套关系的标签中也适用。例如ul>li*3>a 。

快捷选中相同元素

如果要快捷选中相同元素编辑，可以先用鼠标选中要选择相同的元素，然后按ctrl+d快捷键，每按一次就选中一个相同元素。

选择完后，你就可以做相同的操作列。

复制当前行代码

当光标在当前行时，按ctrl+c即可复制当前行，然后换一行，再按ctrl+v粘贴出来即可。

本教程会出电子书，后续敬请期待。

↓↓↓学完本课，快来写博客整理你的学习笔记吧。

相关课程推荐

本文版权归71muke所有，如果有错漏欢迎留言指正。如需转载需71muke授权。联系方式：330168885@qq.com
TOP