一、 本周完成任务
2022.10.17 认识html，并手写html的标准结构
2022.10.18 html的常见文本标签(列表标签 滚动标签 块元素)和超链接标签及各自的应用场景
2022.10.19 表格标签 表单标签及常见的表单标签的表单元素
2022.10.20 框架标签和css常用的选择器
2022.10.21 css伪类选择器 常用的样式属性 文本样式 安装jdk
二、 本周总结
html的标准结构
<html> 根标签
<head> 头标签
<title>标题标签</title>
</head>
<body>
浏览器的主体部分
</body>
</html>html常见的文本标签
标题标签 h1-h6 从大到小的标题
水平线标签(分割线) hr
段落标签 p 前后会加入空行
换行标签 br 在浏览器中标记一个空行
常见的一些文本格式化标签:
i标签,b标签,strong标签,em标签
b和strong的区别：都是加粗，strong表示一种语义上的强调
i标签和em同上: 都是斜体，em表示语义上的强调
引用标签 短引用,q元素 被引入的元素加入引号
引用标签 长引用 blockquote,将它包括内容进行"缩进"处理
列表标签
无序列表 ul 和li，ul是父标签li是列表项(子标签)
ul属性
type:给列表项前面的标记值(默认disc,实习圆点) 不写就是默认值
circle:空心圆点
square:实心的小正方形
有序列表ol和li
li是ol子标签,列表项元素
ol的默认属性type,默认值值1
自定义列表
自定义列表以 <dl> 标签开始。
每个自定义列表项以 <dt> 开始。
每个自定义列表项的定义以 <dd> 开始
块元素
滚动标签 marquee
背景色bgcolor
behavior:滚动的方式 默认值scroll :连续滚动滑动一次到浏览器边框停止掉 slide
alternate:来回滚动
direction:滚动的方式 :默认属性值 left(从右到左)right:(从左到右)
scrollamount 表示运动速度，值是正整数 ,默认值是6
scrolldelay 表示停顿时间，值是正整数，默认为0，单位是毫秒
div:块元素,占一行空间,多个div之间会自带换行效果
span:行内标签 ,
pre 原样输出标签
相当于在敲了一个空格 (代表一个空格)
  相当于两个空格
> 在浏览器将 ">"进行转义
< "<" 进行转义
© 转义成 ©
® 转义成 ®
超链接
通过使用 href 属性 - 创建指向另一个文档的链接，href="url" url 称为 "网络资源定位符号"，可以使用本地地址也可以是网络地址
target:打开资源地址的方式
_self（当前窗口直接打开新地址）
_blank :新建一个窗口打开
超链接的第二种用法:
通过使用 name 属性 - 创建文档内的书签，作为"锚链接来使用"
在同一个html下
1)打锚点---(创建一个锚点(标记/书签))
<a name="锚点名称"></a>
2)创建跳转链接(需要从某个位置跳转到上面的锚点位置)
<a href="#锚点名称">跳转到锚点</a>
在不同页面下进行锚点跳转
1)在另一个页面的某个位置
打锚点---(创建一个锚点(标记/书签))
<a name="锚点名称"></a>
2)当前页面创建跳转连接,跳转到另一个页面的那个锚点位置
<a href="文件地址#锚点名称">跳转到锚点</a>
创建一个锚点(标记/书签)
<a name="foot"></a><br/>
跳转到上面位置的连接
<a href="#top">跳转顶部</a>
表格标签
表格:使用table表示
tr:行 属性:align:将td中的内容进行对齐方式
行的子标签
caption:给表格中设置标题
td:一行指定的单元格 (普通单元格)
th:给单元格设置表头信息(自动居中加粗效果)
table属性
border:表格边框线 单位为像素大小(指定1-5px,值越大,边框线越粗)
cellspacing:设置表格单元格和边框之间的空隙,设置0,将单元格边框和表格的边框合并了
width和height:宽度和高度 像素大小或者占整个分辨率的百分比
align:给表格设置对齐方式 center 中间对齐
bgcolor:设置背景颜色
单元格合并
td属性
rowspan:行合并(合并行) 你当前这个单元格行合并所占的格子数量
colspan:列合并(合并列) 你当前这个单元格列合并所占的格子数量
get提交和post提交有什么区别?
get提交:
1)会将用户的信息提交到地址栏上
2)get提交,不适合提交用户的私密数据(像登录密码,需要进行处理加密)
3)get提交由于在地址栏上的,所以提交的数据大小有限制!
post提交:
1)不会将用户信息提交到地址栏上
2)相对get安全,安全一些,但是密码的信息还需要加密的(后期通过工具加密)
3)相对get来说不会将信息提交地址栏上,所以提交数据大小无限制的!
placeholder h5的新增属性:提示信息
自带一种效果:当鼠标点击进去写 内容时候,提示文字消失了
value:设置输入框的默认值 没有上面的那种效果
表单项的所有标签 都需要加上name属性，给后端服务器程序标记 用户输入的内容值是什么
表单标签中的元素
都需要必填name属性="值" ,服务器地址就能够知道了用户输入的信息是什么
输入类型元素input
属性:
type="text" 文本输入框
type="password" 密码输入框
type="radio" 单项按钮
type="checkbox" 复选框
type="date" 日期组件
type="file"文件上传组件
type="button" 普通按钮 结合value去使用 ,给按钮默认值
type="submit" 结合value属性="登录/注册" 特殊的提交按钮,
type="reset" 重置按钮
type="hidden" 隐藏域,没有效果,但是可以提交数据
下拉菜单select标签
子标签 option:下拉选项
文本域:textarea
rows:指定书写的行数
cols:一行有多个字符
radio 单项按钮
css
CSS使用方式1:行内样式
html的每一个标签都有style属性:设置样式的
style="样式属性名称1:属性值1;样式属性名称2:属性值2;..."
弊端:一次只能控制一个标签去进行修饰(如果在实际操作过程中,仅仅给某个标签去设置,就直接用这个方式)
CSS使用方式第二种:内联样式(内部样式)
在head标签体中书写<style>
使用css选择器{ //可以直接是标签名称(标签选择器)
样式属性名称1:值1;
样式属性名称2:值2;
样式属性名称3:值3;
...
}
</style>
CSS使用方式3:
外联样式(外部样式)
前端开发人员:这种推荐,将css样式代码和html标签代码分离了
1)单独需要在项目下创建css文件夹,然后里面创建后缀名.css文件
2) css文件书写
选择器{
样式属性名称1:值1;
样式属性名称2:值2;
样式属性名称3:值3;
...
}
3)在当前html页面中导入css文件
<link href="css文件地址" rel="stylesheet"/>
rel:关联样式库中的样式(关联层叠样式表):固定写法
CSS常用的选择器
常用的选择器
1.标签名称选择器{
样式属性名称1:值1;
样式属性名称2:值2;
....
}
2 class选择器(类选择器)
需要在 你的标签指定class属性="值"
.class属性值{
样式属性名称1:值1;
样式属性名称2:值2;
....
}
同一个页面中的class属性值是可以同名的!
class(类)选择器 :同一类元素 优先级 > 标签名称选择器
3 id选择器
在标签中指定id="值",注意:id选择器的id的值,必须唯一的!
(id属性值唯一,能够解决浏览器中部分标签的兼容性问题)
但是我们现在没有学习js(javascript),所以id值重复,也可以展示被id选中的效果;
#id属性值{
样式属性名称1:值1;
样式属性名称2:值2;
....
}
上面三个选择器是设置css的最基本选择器
id选择器 > class选择器 > 标签名称选择器
组合选择器
4 并集选择器
选择器1,选择器2,选择器3....{ 选择器可以是上面id,class类,标签名称选择器
样式属性名称1:值1;
样式属性名称2:值2;
....
}
5 子元素选择器
选择器1 选择器2 { 选择器2选中的标签是选择器1的子标签
样式属性名称1:值1;
样式属性名称2:值2;
....
}
6 后代选择器:
选择器1 > 选择器2 { //选择器2选中的元素是选择器1的后代元素
样式属性名称1:值1;
样式属性名称2:值2;
....
}
<style>
css伪类选择器
伪类用于定义元素的特殊状态
状态:
1)link状态:鼠标未访问状态
2)hover状态(使用居多):鼠标经过状态
3)avtive状态:鼠标获取焦点状态
4)visited状态:鼠标访问过了状态
css代码书写格式:
选择器:状态名称{
样式属性名称1:值1;
样式属性名称2:值2;
...
}
注意:
1)状态名称不区分大小写,但是建议小写
2)注意： 规定这个先后顺序: 才能出现循环的效果
a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！
a:active 必须在 CSS 定义中的 a:hover 之后才能生效！
css文本样式
文本颜色 color
文本对齐样式 text-align
文本修饰 text-decoration 属性用于设置或删除文本装饰。
underline:设置下划线
none:不设置任何修饰
overline:上划线
line-through:中划线(电商平台:打折之后原件上面的中划线)
text-transform:文本转换
capitalize:将每个单词首字母大写
uppercase:将英文单词转换成大写
lowercase:将英文单词转换成小写
text-indent:文本缩进
letter-spacing:指定文本中字符之间的间距。
text-shadow文本阴影
7916
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
