HTML+CSS学习笔记

HTML Notes

Lesson 1 2023/3/18

文件类型： html

遵守w3c规范

一、文档版本：

docType HTML1.0 HTML4.0 XHTML1.0 HTML5

1.首先要表明这是一个什么版本的网页文档

<!doctype html>

! ( 强调声明 ) doctype 文档类型 空格 为 html

####二、标签

单标签

<!doctype html>

设置网页的展示语言 设置字符集编码

meta 标签 设置网页信息，设置网页编码集 utf-8

utf-8 是国际编码万国码 gb2312

设置能搜索到网页的关键字，建议不超过三十个，字节不超过150个

设置网页简介

双标签、结构性标签，其内部需要包裹内容或者其他标签

​ 网页的大包围，所有的网页文档都要·写在html标签内

​ 网页的基本信息

​ 网页的标题标签

​

文件编码和文档编码不统一，打开网页就是一堆乱码

• 网页三要素 让搜索引擎能够收录网页

  <title></title>
  <meta name='description' content="" >
  <meta name = "keywords" content="I,You,me">
  

• 标签里需要包含 meta charset , keywords, description, title （这属于属性标志）

标签 网页的主体内容

三、书写格式

1. 编程符号都要使用英文半角符号
2. 单双引号没有区别，但保证风格统一，单引号不配双引号
3. 标签层级下级要针对上级，要缩进一个TAB ，缩进有4空格 2空格

LESSON 2 2023/3/20

一、一些基础标签

1. 标签 1>2>3>4>5>6 ·

   h1 大标题，每个网页有且只有一个标签 ，只能有一个h1标签

   h2 网页的分块标签 ， 2-5个

   h3 主页详细分块内容的标题，个数根据需求而定

   h4 非主页下的列表内容标题，相对于h3权重低

2. 
   换行标签，单标签不加闭合符，不推荐

3. 段落标签 语义化标签

4. ---

   标签 分割符

5. 超链接标签

   href 跳转目标地址，属性名称 href=“属性值”

   target 打开标签的位置（目标）：当前 _self| 新开 _blank

   id #表示id符，在id前面加#

   <a href="www.baidu.com" target="_blank">amamam</a>
   

   ​

6. 路径：通俗来讲就是地址

   ​ 相对路径 …/ 表示上一级文件夹 （以自身为基准去其他地方寻址的过程）反斜杠

   ​ / 表示进入一个文件夹

   ​ 绝对路径（以客观地址为基准进行寻址） 比如 “D:\program(×86)\Tencent” 斜杠

   ​ 在windows

<a href="E:\班长&学生会" target="_blank">amamam</a>

html不会去解析多余的空格、制表符、

3月27日

一、属性标签（属性名称=“属性值” ）//键值对的写法

1. lang属性 :html的lang属性，是指内容语言的。目的是让浏览器知晓这个页面的主要展示语言是什么

   主要展示语言如果是英语： en 中文： zh-cn （提供给翻译的）

2. base 标签 加在head标签里

二、转义符号

1. 浏览器对于文本之间的空格只能识别一个，转义符号： &转义符字节；  

   ​

   特殊字符	描述	转义符
   	空格	 
   <	小于号	&lt;
   >	大于号	&gt;
   &	和号	&amp;
   ￥	人民币	&yen;
   ©	版权	&copy;
   ®	商标	&reg;

   ​

   [转义符对照表][https://tool.oschina.net/commons?type=2]

ctrl+/

三、文本格式化标签（小标签）

1. 字体加粗

2. 斜体

3. 删除线

4. 下划线

   b i u s 是没有语义性的， strong,em, ins, del 是有语义性的

四、图片标签

1. src 图像 插入图片 能复制绝不手写

2. width 宽度 height 高度 ，用图片属性值，不可以擅自更改，不能加单位 。px：指像素

3. alt 图片加载不出来了就会显示引号里面的文本，也作为爬虫辨识图片内容的关键字

   src width height alt 图片四要素

4. title 文本 鼠标悬停显示的内容

5. border 数字（非常规） 设置图片默认边框的宽度

属性||属性值||描述

五、列表

1. • **无序列表**

• ul里面只放li标签，li里面可以嵌套其它标签

  list-style:none; 可以清除默认小圆点

  2. 1. **有序列表**

  3. **分块列表**

  名词1
  名词解释1
  名词解释2
  名词2
  名词2解释1

  六、div标签（盒子）

  div标签是没有语义的 ， 是DIV+CSS时代的核心标签，单纯进行内容标签的容纳

  div是division 的缩写，意思是分割、分区，我们可以利用DIV来给页面划分不同区域，呈现不同内容

  语法

  <div>
    <p>我是P标签，我在div里面</p>
  </div>
  

  七、span标签

  span 标签是没有语义的，通常组合行内元素，以通过样式来格式化它们。

  span没有固定的格式表现，当对它应用样式时，它才会产生视觉上的变化。

  <p><span>some text.</span></p>
  

  CSS层叠样式表 3月28日

  一、行内式（内联样式）

  内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签style属性来设置元素的样式，其基本语法格式如下：

  <p style="属性1：属性值1；属性2：属性值2；属性3：属性值3；">
    内容
  </p>
  

  style 是标签的属性，任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。

  ###二、内部样式表

  内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：

  <head>
    <style type="text/CSS">
      选择器{属性1:属性值1;属性2:属性值2;属性2:属性值3;}
    </style>
  </head>
  

  三、外部样式表（外链式）

  链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签外部样式表文件链接到HTML文档中，其基本语法格式如下：

  <head>
    <link href="CSS文件的路径" rel="stylesheet" />
    
  </head>
  

  注意：link是个单标签

  该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下

  href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

  type：定义所链接的文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。

  rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

  三种样式表总结

  样式表	优点	缺点	使用情况	控制范围
  行内样式表	书写方便，权重高	没有实现样式和结构分离	基本为0	控制一个标签（少）
  内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面（中）
  外部样式表	完全实现结构和样式相分离	需要引入	最多，强烈推荐	控制整个站点（多）

  CSS样式规则 4月6日

  事例

  <head>
    <style type="text/CSS">
      font-size:18px;
  /*属性名称:属性值（单位）;*/
  /*选择器 {属性名称:属性值(单位);}*/
  //选择器和后面的花括号之间有一个空格！每一个属性设置好了之后都要加分号（英文）
    </style>
  </head>
  

  属性与属性值是以键值与键值对的形式存在的

  一、选择器

  1. 标签选择器：按照标签样式分类设置样式

     p {color: red;}//这样所有p标签中的文本都变成了红色
     

  2. 类选择器

     首先对body中的标签板块设置属性

     1234567

     再在head中的style里对其设置属性

     <head>
       <style type="text/CSS">
       .man{
       color= blue;
       }
       </style>
     </head>
     

     ​

  3. id选择器

     同样对正文中的标签设置属性

     <p id="number">1234</p>
     

     再在head里面对其进行属性设置

     <head>
       <style type="text/CSS">
       #number{
       color: blue;
       }
       </style>
     </head>
     

     W3C标准规定，不允许有相同名字的id对象出现，但是允许相同名字的class

  4. 通配符选择器

     页面内所有的标签都选择到，优先级最后，

     <head>
       <style type="text/CSS">
         *{
           font-size:20px;
         }
       </style>
     </head>
     

  选择器优先级 id>类>标签>通配符

  5. 命名规范
     1. 命名需要语义性的词，不能是数字，符号，拼音
     2. 命名需要多个单词连接eider情况下，标记语言中可以用_-进行链接，不能直接单词拼接，不能用驼峰命名。注意：书写风格必须统一，不允许- _ 一起使用的情况，推荐使用-
     3. 命名需要进行适当的缩写

  标签可叠加

  <p class='f1 f2 f3 f4'>//这个标签里的文本将同时拥有f1 f2 f3 f4中的属性
    
  </p>
  

  二、基础样式字体

  1. font-size 字号大小，有相对长度和绝对长度之分

     相对长度单位：px 像素单位，以像素点个数为基础，最常用的单位

     ​ em 相对于当前对象内文本的字体尺寸

     绝对长度单位使用较少

     很多浏览器不支持10px以下的字体

  2. font-family 字体

     PS：

     1. 现在网页中普遍使用14px+

     2. 尽量使用偶数数字字号。ie6等老式浏览器支持奇数会有bug。

     3. 各种字体之间必须用英文状态下的逗号隔开

     4. 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体是，英文字体名必须位于中文字体名之前。

     5. 如果字体名中包含空格、#、￥等符号，则该字体必须加英文状态下的单引号或双引号，

        例如 font-family:“Times New Roman”;

     6. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

     CSS Unicode 字体

     ​ 对各种字体编码使用，这样更规范

     ​ Unicode编码转换 - 站长工具 (chinaz.com)

     ​ 从这个网站转译unicode码，复制过去，注意要加引号，去掉u

     ​ 为了照顾不同电脑字体安装问题，我们尽量只使用宋体和微软雅黑中文字体

  3. font-weight 字体粗细

     可用属性值为：normal, bold, bolder, lighter, 100~900(一定是百的整倍数)

     数字400等于normal, 700等于bold.但是我们更喜欢用数字表示，一般情况下就这两个值

  4. font-style 字体风格

     字体倾斜除了用i u 标签来使用，还可以用CSS来实现，但是CSS是没有语义的。

     normal:默认值，浏览器会显示标准的字体样式

     italic: 浏览器会显示斜体的字体样式

     oblique: 浏览器会显示倾斜的字体样式

  5. font 综合

     选择器 {font: font-style font-weight font-size/line-weight font-family; }//中间用空格隔开
     

     使用font属性是，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size 和 font-family 属性，否则font属性将不起任何作用。

     书写规范：一个属性排一行

  三、CSS外观样式

  1. color: 文本颜色

     直接写名称、十六进制写法、rgb

     如果使用rgb代码每一个都需要用百分号，就算是0也要用百分号

     rgba 最后的a表示设置透明度，用.5表示0.5,节省内存

  2. line-height 行间距/行高

     行高是一个区域，文本放在区域的中央。单位可用px也可用%, %表示相对大小，相对于字号的大小。

     默认字体大小为16px，此时行间距24比较美观。

  3. text-aligh 水平对齐方式

     text-aligh 属性用于文本内容的水平对齐，相当于html中的aligh对齐属性。

     left 左对齐

     right 右对齐

     center 居中对齐

  4. text-indent 首行缩进

     缩进两字符 text-indent: 2em ; em表示相对大小

  5. **text-decoration **

     大多是标签有默认样式

     • none 默认，定义标准的文本
     • underline 定义文本下的一条线，下划线，也是我们链接自带的
     • overline 定义文本上的一条线
     • line-through 定义穿过文本下的一条线

  4月11日

  一、块元素的基本特性

  1. 块元素的特点：默认宽度100%。划分好区域、可以设置宽高，这决定了块元素可以搭建区域。独占一行。

  ###二、行内元素(inline-block)的基本特性

  ​ 行内元素：

  ​ 特性： 默认宽度根据内容来。显示宽度根据内容长度改变。不能设置宽高，不具备结构能力。不会独占一行。行内元素里面不能放块元素。

  ​ a标签比较特殊。扩展热区，用户交互。

  ​ inline-block:和相邻行内元素在一行上，但是之间会有空白缝隙。默认宽度就是它本身内容的宽度。高度、行高、外边距以及内边距都可以控制。

  <style>
    div{
      display:inlineblock;
    }
  </style>
  

  把标签之间的空格删掉，就可以让block之间没有间隙

  通过display可以修改标签原本的属性，行变块，块变行。修改之后就不会呈现原标签的属性了

  图片与文本可以在同一行显示

  行变块 display:block;

  块变行 diaplay:inlineblock;

  三、盒子模型div

  1. width 盒子宽度：默认100%

  2. height 盒子高度 默认0

  3. margin 盒子与页面边框的距离

     ​

  4. padding 内容与盒子边框的距离,设置之后会额外增加盒子的大小

     padding-left padding-right padding-top padding-bottom

     //padding  设置
     //2个参数
     padding:10px  20px;/*上下  左右*/
     //3个参数
     padding: 10px 20px 30px;//上  左右  下
     padding: 10px 20px 10px 20px;//上 右 下 左
     

     ​

  5. border 盒子边框

     border:3px solid blue;
     

     具体设置：

     • solid 单实线
     • dashed 虚线
     • dotted 点线
     • double 双实线
     • 上边框 border-top-style 样式
     • 上边框颜色 border-top-color
     • 下边框 border-bottom
     • 右边框 border-right
     • 左边框 border-left-style border-left-width
     • 样式综合设置 border-style:(left/right/bottom/top) none solid dashed dotted double
     • 宽度综合设置 border-width
     • 颜色综合设置 border-color

  持续更新中…

  ​