Document

HTML&CSS学习总结

2023-06-21
dfer
362
html css 学习

在本阶段的学习中，我收获了很多，学习到了很多的新知识。其中不乏简单易懂的基础知识，更有让人晦涩难懂的高级应用知识。本阶段主要的学习内容为两个部分，分别是HTML、CSS知识。

有了收获，自然要学会总结，以下是我在前端部分的知识的学习过程中总结的我觉得难于理解并需要加强练习的知识点:

一.HTML总结

HTML是超文本标记语言的英文缩写，这是一种标记语言，不需要进行编译，接由浏览器执行。HTML文件是一个文本文件，包含了一些HTML元素、标签等。

一）基本标签

1.<title></title>网页标题标签

2.<h1>~<h6>标题标签

加了标题的文字会加粗，字号也会变大
一个标题独占一行

3.<br>换行标签

4.div和span标签

没有语义，就是一个盒子，用来装内容

<div>内容</div>  
<span>内容</span>

二）文本格式化标签

在网页中，有时需要为文字设置粗体、斜体、下划线等效果，突出重要性

语义	标签
加粗	<strong></strong>或者<b></b>
倾斜	<em></em><i></i>
删除线	<del></del><s></s>
下划线	<ins></ins><u></u>

三）图片和超链接

图像标签:<img src=“”>单标签

1)alt属性，图片显子不出来时用文字替换

2)tite 提示文本，标放到圆片上显示时文字

3)width 设置图像宽度

4)height设置图像高度

5)border设置图像的边框粗细

6)src设置图像路径

相对路径:图片相对于HTML页面时位置
同一级:

<img src=“图像.jpg”/>

下一级:

<img src:“文件夹/图像.jpg”/>

上一级:

<img src=“…/图像.jpg”/>

绝对路径 :

<img src=“地址＼图像.jpg”/>

超链接

<a href=“跳转目标” target=“目标窗口的弹出方式”>文本或图像</a>
1、外部链接href＝"http://……"
2、内部链接 href＝"…….html"
3、空链接href=“#”
4、下载链接地址链接的是文件、exe或者是、等压缩包形式
5、锚点链接可快速定位到页面某个位置

四）表格标签

表格用于显示、展示数据

<table>  
   <tr> 
      <td>单元格的内容</td>  
      <td>单元格的内容</td>  
      <td>单元格的内容</td>  
   </tr> 
<table>

表格属性（不常用，后面通过CSS设置）：
align:规定表格相对周围元素的对齐方式；
border:规定表格是否拥有边框；
width:规定表格的宽度；
cellpadding:规定单元边沿与其内容之间的空白；
cellspacing:规定单元格之间的空白
合并单元格（合并后要删除多余的单元格）：
跨行合并：rowspan=“合并个数”
跨列合并：colspan=“合并个数”

五）列表标签

列表用于布局

1.无序列表

<ul>
    <li>内容</li>
    <li>内容</li>
</ul>

2.有序列表

<ol>
    <li>内容</li>
    <li>内容</li>
</ol>

3.自定义列表

<dl>
    <dt>名词1</dt>
    <dd>名词解释1</dd>
    <dd>名词解释2</dd>
</dl>

六）表单标签

收集用户信息

1.表单域

<from>把他范围内的表单元素信息提交给服务器
<from action=“url地址” method=“提交方式” name=“表单域名称”>
各种表单元素控件
</from>

2.input之type属性文本框和密码框

<imput type＝""/>

type属性:

属性值	描述
button	定义可点击按钮。
checkbox	定义复选框
file	定义输入字段和 "浏览"按钮，供文件上传。
hidden	定义隐藏的输入字段。
image	定义图像形式的提交按钮。
password	定义密码字段。该字段中的字符被掩码。
radio	定义单选按钮。
reset	定义重置按钮。重置按钮会清除表单中的所有数据。
submit	定义提交按钮。提交按钮会把表单数据发送到服务器。
text	定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

举例

1）：Password

<input type=“password” /> 定义密码字段。密码字段中的字符会被掩码（显示为星号或原点）。

<input type="password" name="pwd" />

2）：Radio

<input type=“radio” />定义单选按钮。单选按钮允许用户选取给定数目的选择中的一个选项。

<input type="radio" name="sex" value="男" /> Male
<input type="radio" name="sex" value="女" /> Female

3.下拉表单

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    <option>选项4</option>
</select>

二.CSS总结

CSS注释以 /* 开始, 以 */ 结束

一）选择器

1、标签选择器
标签名作为选择器.
2、类选择器
差异化选择不同的标签.单独选一个或某几个标签
一般来说，一个页面中标签的class的名称，可以不唯一且可以重复。

.类名 {

     属性1:属性值1；
     属性2:属性值2；
}

3、id选择器
以id属性来设置

#id名 {
     
     属性1:属性值1；
     属性2:属性值2；
}

4、通配符选择器
表示选取页面中所有标签

*{
     属性1:属性值1；
     属性2:属性值2；
}

5、子代选择器
子代选择器可以选择当前元素的所有儿子元素。定义的时候用 > 隔开。

元素1>元素2 {
     属性1:属性值1；
     属性2:属性值2；
}

6、后代选择器
标签元素除了并列书写还可以嵌套书写，后代选择器就是用于选择嵌套标签元素的一种选择器。定义的时候用空格隔开。

标签1 标签2 {
     属性:属性值;
}

7、并集选择器
多种元素共享某种属性，这时候就可以使用并集选择器。定义的时候用逗号隔开。

元素1，元素2{
      属性:属性值;
}

8、相邻兄弟选择器
二者有相同的父元素，可以使用相邻兄弟选择器。定义的时候用 + 隔开。

标签1+标签2 {
      属性:属性值;
}

二）样式表

1、内联样式：直接在标签上，通过style属性进行使用
2、内部样式：在head标签中，通过<style>css语言<style>标签，使用样式
3、外部样式：通过在head，使用<link href=xx.css"">标签，引入css文件

内联样式：只对当前使用的标签有效
内部样式：在<head>的<style>中写css样式
外部样式：在css文件中（test.css）,写样式。在html文件中<head>中引用文件<link rel=“stylesheet” href＝"css文件路径">
三种引入方式内容属性不冲突：三种方式会同时起作用
三种引入方式内容属性会冲突：
内联式和外联式冲突，内联式位于外联式上方。— 由外联式决定
内联式和外联式冲突，外联式位于内联式上方。— 由内联式决定
三种方式并存且冲突。 — 由行内式决定

三）CSS背景样式

背景颜色
background-color:……;默认为transparent透明色
背景图片
background-image:url(地址)；
背景平铺
background-repeat: repeat /no-repeat /repeat-x /repeat-y
背景位置一方位名词.
background-position:x y;可以使用方位名或精确单位
精确单位.
background-position: 20px 50px;
混合单位
background-position:20px center;
背景固定
background-attachment:scroll| fixed;
scroll表示滚动，fixed表示固定
背景色半透明
background:rgba(0,0,0,0.3);最后一个取值0~1之间. 习惯把0.3的0去掉，写.3

四)文本样式

4.1文本颜色

color:red; 属性值:①颜色值②十进制例:#FF0000 ③RGB例如:rgb(250,0,0)

4.2文本对齐

text-align:center/right/left
只能设置水平对齐方式

4.3文本装饰

可以给文本添加下划线,删除线，上划线等.
text-decoration:none/underline/overline/line-through
none:没有
underline:下划线
overline:上划线
line-through:删除线

4.4文本缩进

text-indent:2em;
em是一个相对单位，就是当前元素1个文字的大小。

4.5行间距

line-height:26Px;

五)css三大特性

1)、层叠性.

样式冲突，遵循就近原则

2)、继承性.

子标签会继承父标签的某些样式

3)、优先级

继承＜元素选择器<类选择器＜伪类选择器＜ID选择器＜行内样式<!Important

六)CSS盒子模型

在CSS中，用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

1.Margin(外边距) - 清除边框外的区域，外边距是透明的。
2.Border(边框) - 围绕在内边距和内容外的边框。(border-radius圆角属性）

属性	作用
border-width	定义边框粗细，单位是px
border-style	定义边框的样式
border-color	定义边框颜色

3.Padding(内边距) - 清除内容周围的区域，内边距是透明的。
4.Content(内容) - 盒子的内容，显示文本和图像。

七）元素显示模式转换

元素模式	设置样式
块级元素	可以设置宽度高度
行内元素	不可以直接设置宽度高度，可以间接设置（转换模式）
行内块元素	可以设置宽度和高度

转换为块元素：display:block(常用）
转换为行内元素:display:inline;
转换为行内块元素：display:inline-block;

八）CSS定位

通过使用position属性，选择四种不同类型的定位：
1.static默认值，没有定位
2.fixed生成绝对定位，相对于浏览器窗口进行定位 postion:fixed;
3.absolute相对于static定位以外第一个父元素进行定位
4.relative相对定位，相对于其正常位置定位

九）溢出

当元素内容超过其指定的区域时，我们通过溢出overflow属性来处理这些溢出的部分。
1、Visible:默认值，溢出部分不被裁剪，在区域外面显示
2、hidden 裁剪溢出部分且不可见
3、scroll 裁剪溢出部分，但提供上下和左右滚动条供显示
4、auto 裁剪溢出部分，视情况提供滚动条

十）浮动

在CSS中，通过float属性设置元素的浮动。
Left向左浮动；none默认值，元素不浮动；right向右浮动；inherit从父元素继承float属性的值

上一篇： HTML之JS

下一篇： CSS基础