我们于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 行内块
行内元素与块元素的特点都存在