2021/08/03笔记

我们于2021/08/03 的学习目标是: HTML与CSS，核心任务为:

1、学习技术:

1）、HTML基础语法

2）、table表格

3）、form表单

4）、CSS层叠样式表

5）、CSS基础选择器

6）、CSS组合选择器

7）、display属性

2、文档总结

1）、HTML基础语法

img：图像标签

属性：

src：图片的路径（绝对路径|相对路径）

alt：当图片无法正常显示时，显示的提示字

title：当鼠标悬停在内容上时，显示的提示字

<a href="https://sm.ms/image/wAOufXnMa2hpes8" target="_blank">
<img src="https://i.loli.net/2021/07/22/wAOufXnMa2hpes8.jpg" alt="IMG_0468.JPG" title="图片"></a>

span帮助更方便的为元素添加样式

<p>这是<span style="color: aqua">水蓝色</span></p>

div：块 块元素

前后换行，内容正常显示，可以嵌套任意标签元素（行内|块）

路径：

路径名/

进入到某个路径下

../

回到上一层

所有的块元素都存在一个属性：水平对齐方式align

left 左对齐

right 右对齐

center居中

justify 两端对齐

列表标签：

无序列表ul

<h3>列表标题</h3>
 
<ul>
 
   <li>无序列表项1</li>
 
   <li>无序列表项2</li>
 
   <li>无序列表项3</li>
 
<u1>

ul标签上有属性type，代表列表项标记：

square实心方块■

circle空心圆○

desc实心圆（默认）●

有序列表ol

<h3>列表标题</h3>
 
<ol>
 
   <li>有序列表项1</li>
 
   <li>有序列表项2</li>
 
   <li>有序列表项3</li>
 
<o1>

ol标签上有属性type，代表列表项标记：

1: 1 2 3...

a: a b c...

A: A B C

i: i ii iii...

I: I II III...

列表可以嵌套：

有序嵌套无序

无序嵌套有序

有序嵌套有序

无序嵌套无序

注意：

所有的内容在列表中必须定义在列表项中

ul|ol标签中直接子元素只能包含li，li中可以包含任意内容

块元素中可以包含任意内容（普通文本、其他块元素、其他行内元素）

行内元素中可以包含任意内容（普通文本、其他行内元素）

2）、table表格

table标签定义一个表格的范围

tr定义行

th定义表格头单元格，默认居中加粗

td定义表格体单元格

<table>
 
   <tr>
 
      <th>A1</th>
 
      <th>A2</th>
 
   </tr>
 
   <tr>
 
      <th>B1</th>
 
      <th>B2</th>
 
   </tr>
 
</table>

属性样式：

border边框

bordercolor 边框颜色

style="border-collapse:collapse"

双线变单线

colspan 跨列

rowspan 跨行

height 高度

width 宽度

align 对齐方式

<table border="1" width="640px" height="480px" style="border-collapse: collapse" bordercolor="blue" bgcolor="#9acd32">
 
    <tr>
 
        <th colspan="2">跨行</th>
 
    </tr>
 
    <tr>
 
        <td rowspan=2>跨列</td>
 
        <td></td>
 
    </tr>
 
    <tr>
 
        <td></td>
 
    </tr>
 
</table>

注意：

先有行再有列

内容需要放在单元格中

3）、form表单

form表单标签：收集用户输入的数据

属性：

action 提交位置

name form 表单名

method 提交方式

   get数据拼接到url地址栏中进行发送 不安全 大小有限制 默认提交方式 效率高

   post 数据再请求体中 安全 需要做修改

表单元素：定义在form标签中的元素

大部分的表单元素都是通过input标签定义

input标签的type属性：

text 普通文本框

其中的name属性代表定义名，value代表默认值

<p>
 
   文本框：
 
   <input type="text" name="input_text" value="default">
 
</p>

password 密码框

输入的字符不可见，有加密效果

<p>
 
密码：
 
<input type="password" name="pwd">
 
</p>

ratio单选框

一组中多个单选框只能选中一个，name属性值相同即同一组。

默认选中：checked

<p>
 
性别：
 
   <input type="radio" name="gender" value="man" checked> 男
 
   <input type="radio" name="gender" value="woman"> 女
 
</p>

checkbox多选框

一组多选框可以选中多个，name属性值相同分为一组

默认选中：checked

<p>
 
   爱好 :
 
   <input type="checkbox" name="hobby" value="code"> 敲代码
 
   <input type="checkbox" name="hobby" value="read"> 读书
 
   <input type="checkbox" name="hobby" value="basketball"> 篮球
 
</p>

file 文件上传

注意修改from标签的entype属性值为"multipart/form-data"

<p>
 
   上传文件： <input type="file" name="file_upload">
 
</p>

submit 提交按钮

reset重置按钮

button按钮

<p>
 
   <input type="submit" value="提交">
 
   <input type="button" value="自定义按钮">
 
   <input type="reset" value="重置">
 
</p>

hidden 隐藏框

不可见，数据能提交

<p>
 
   <input type="hidden" name="隐藏框的name" value="隐藏框的值">
 
</p>

textarea 多行文本框

<textarea name="info" placeholder="提示字"></textarea>

select下拉框

option 下拉列表选项

默认选中：selected

<p>
 
   下拉选项：<select name="wifetype" multiple>
 
      <option value="1">3</option>
 
      <option value="2">4</option>
 
      <option value="3" selected>5</option>
 
      </select>
 
</p>

fieldset 分组

legend 分组标题

<fieldset>
 
   <legend>隐私信息</legend>
 
   体重 <input type="text" name="weight">
 
   身高 <input type="text" name="height">
 
</fieldset>

label 添加标注

文本内容与表单标签进行绑定

<p>
 
   性别 :
 
   <input type="radio" name="gender" value="man" id="man" checked> <label for="man">男</label>
 
   <input type="radio" name="gender" value="woman" id="woman"> <label for="woman">女</label>
 
</p>

readonly 只读：不能修改可以提交

disabled 禁用：显示为黑色，不能修改不能提交

placeholder：提示字

required:必填属性

maxlength：最大长度（字符个数）

4）、CSS层叠样式表

添加：

选择器 {
 
    样式 -> 样式名 : 样式值;
 
    属性名 : 属性值;
 
    ....
 
}

分类：

行内样式表：在元素行的内部为元素添加样式

优先级最高，为多个元素添加相同样式时操作繁琐，不便于后期维护

<!--行内样式表-->
 
<div style="color:green;font-size: 20px;background: hotpink">TEST</div>

内部样式表：在html的内部为html添加样式

在head中添加一对style标签，在标签对中添加样式

外部样式表：在html的外部为html添加样式

5）、CSS基础选择器

在CSS中，选择器是一种模式，用于选择需要添加样式的元素。

选择器分类：

基础选择器

   id选择器 : #   id属性唯一的,不可重复，根据元素的id属性选择1个元素

   类选择器 : .   class属性值可以重复的,可以在值列表中添加多个属性值，根据与元素的class属性值选择1个或者1组元素

   元素选择器 : 标签名 根据元素 标签名选中一个或者一组元素

   通配符 : *

   优先级 : id>类>元素>通配符

6）、CSS组合选择器

注意：CSS样式中存在继承

   字体样式,颜色样式,背景样式等等都会默认继承

   边框,内外边距等样式不会继承

组合选择器：

   后代选择器：选中所有的子元素包括孙子元素

   子元素选择器：用于选择指定标签元素的所有第一代子元素，以大于号分隔

   相邻兄弟选择器：可选择紧接在另一元素后的元素，且二者有相同父元素。以加号分隔

   普通兄弟选择器：选择紧接在另一个元素后的所有元素，而且二者有相同的父元素，以波浪线分隔

群组选择器：

选择器1,选择器2..{
 
    样式;
 
}

伪类选择器：

   a:link a标签未访问

   a:visited a标签已访问

   :hover 当鼠标悬停在元素上时候,作用的样式

   :active 当鼠标按下时候显,作用的样式

   :first-child 当元素作为父级的第一个子元素时候被选中

   :last-child 当元素作为父级的最后一个元素时候被选中

   :nth-child(num) 当元素作为父级的第n个子元素的时候选择

文本样式：

text-align: center;

块元素|行内块元素中内容在元素中的水平对齐方式

7）、display属性

标签：

行内元素：

宽度有内容撑起

可以与其他元素同行展示

不能设置宽高

可以包含行内,普通文本

不能设置上下内外边距

块元素：

独占一行

可以设置宽高

可以包含行内,块,文本

可以设置元素的内外边距

display：

none 元素消失

block 块元素

inline 行内元素

inline-block 行内块

    行内元素与块元素的特点都存在