web基础Day01
web概述
新建一个TXT文件,编写完成之后,将后缀改为html即可。
html文件不分大小写
HTML不是一门编程语言,是一门标签语言。 a.
HTML本质是一个文档。 b.
HTML文档是由标签组成的文档。 c.
HTML Hyper Text Markup Language(超文本标记语言) d.
HTML概述 1.
font标签
color属性:
颜色名称 red green
Hex #AAAAAA 6为16进制数值
rgb rgb(0,255,255);
size属性: 1~7 默认大小为3
属性:
- type 图标样式 disc 实心圆 square 实心方块 属性:
square 实心方块
circle 空心圆
i.
src 图片路径
alt 代替图片出现的文字
width 宽度 px %
height 高度 px %
属性:
img图片标签 d.
a标签可以作为一个超链接的标签使用。
创建一个包含id或name属性的a标签。
埋下书签 a)
创建一个包含href属性的a标签,href属性值位#name
提供跳转标签 b)
在页面内部跳转 ------ 书签 1)
百度一下
在页面间跳转 2)
a标签的功能:
name 标签名称
href 跳转的目标地址
target _self 在当前窗口打开页面 _blank新打开创建打开页面
属性: i.
a锚标签 e.
table表示一个表格,需要在其中添加代表行和列的子标签
table ○
tr ○
td ○
th ○
border 边框宽度
cellspacing 单元格之间的空白距离
cellpadding 边框与单元格内容之间的距离
bgcolor 背景颜色
table的重要属性: ○
table表格标签 f.bgcolor 背景颜色
定义表格的标题
bordercolor 边框颜色
width 宽度
align 对齐方式
align 对齐方式
bgcolor 背景颜色
tr重要属性: ○
align 对齐方式
bgcolor 背景颜色
width 宽度
height 高度
colspan 可横跨的列数 column
rowspan 可竖跨的行数 row
th/td重要属性: ○在地址栏中手动拼接参数。这种方式如果遇到较多的参数和较复杂的参数值,
action: form表单提交的地址 method: 提交方式 属性: 参数拼接在地址栏中 安全性较低 参数拼接的长度一般不超过1KB get提交特点: 在底层以流的形式提交 安全性较高 在理论上传递的参数长度不收限制 post提交特点: method:一共有7种提交方式。常用的有两种 get post 文本框 text 输入的文本信息直接显示在框中 密码框 password 输入的文本以圆点或者星号的形式显示 单选框 radio 进行单项的选择 如性别选择 多个radio的name属性相同会被当 作一组来使用 必须用value为选项指定提交的值 复选框 checkbox 进行多项选择,爱好的选择。 多个checkbox具有相同的name属 性时会被当作一组来使用 必须用value为选项指定提交的值 隐藏字段 hidden 如果有一些信息,不希望用户看见,又希望表单能够提交,就 可以用隐藏字段隐含在表单中 提交按钮 submit 实现表单提交操作的按钮 可以通过value属性指定按钮显示的文 字 type属性 重要属性: ○ type属性: input输入框 a. form使用 2. form表单标签
会难以拼接,如果拼接很有可能出现错误。所以不推荐直接在地址栏中书写参
数。
i.
利用form表单提交数据。在form表单中书写的内容,提交时会自动拼接在浏览
器的地址栏中。
ii.
提交数据的方式:
form表单标签 1.submit
北京 南京 成都 天河北 中关村 下拉框: b. 这是一个文本域 文本域: c. 作业:练习注册表单。 3.
字
重置按钮
reset
重置表单到初始状态
按钮
button
普通按钮, 没有任何功能 需要配合JavaScript为按钮指定具体的
行为。可以用value属性指定按钮显示的文字。
文件上传
项 file
提供选择文件进行上传的功能。
图像
image
利用一张图片替代提交按钮的功能, 不常用
name 标签名称。并且在form表单中需要被提交的数据标签身上必须要
包含一个name属性。否则不会被提交。
value 当前标签具有的值
重要属性:页面构建初期,使用table组成页面,但是面对复杂页面组成是,table难以完成
对应的布局格式。
a.
后来产生新的页面组成方式,利用div+css两门技术实现页面的组成和样式的修
改
b.
页面构成与样式修改 1.
div 块级元素 每个元素自己独占一行
span 行内元素 多个元素同在一行
p 块级元素 每个元素自己独占一行
div 盒子模型 2.
css就是层叠样式表。
页面中的多个元素都需要进行相同的样式修改,若一个一个修改则会造成代码
冗余和维护的不便利性。
a.
页面中大量标签可以通过层叠样式表来完成批量修改。 b.
css注释: /**/
css语法 c.
css 3.
标签身上书写style属性,添加样式 i.
css引入的四种方式:
css在页面中的引入: 4.
#div1{
}
#id选择器
.class1{
}
类选择器
元素名{
}
元素名选择器
基本选择器
div中所有的span元素选中
div span{
后代选择器
扩展选择器
css选择器 5.
CSS概述}
div中所有的子元素span
div>span{
}
子元素选择器
div的下一个相邻的兄弟span
div+span{
}
相邻兄弟选择器
选择包含name属性的div
div[name]{
}
选择包含name='ls’属性的div
div[name=‘ls’]{
}
属性选择器
#id,.class1,span{
}
多元素选择器(分组选择器)
其实就在html中预先定义好的一些选择器。称为伪元素。是因为CSS的术语。
:link 未点击的状态
注:在不设置visited状态时active生效,否则会出现visited覆盖active效果
:visited 被点击过的状态
:hover 鼠标移动到元素之上但是仍然未点击的状态
:active 被鼠标点击着的状态
伪元素选择器: