本周学习了html,作为超文本标记语言其作用在于使用标签来对网页进行描述,通过浏览器能够识别的标签,渲染成"网页",可以针对图片,字体, 动画,一些文档都可以去进行标记 因此html文档也被称作网页.下列为本周学习的主要内容.
一·编写环境
本周学习前在计算机上安装HBuilderX软件来用作通过代码编写呈现网页的工具,在创建新的页面后可以看到html的标准结构
< 根标签
头标签
标题标签
浏览器中显示的主体部分
因此HB工具是作为一个提高书写效率的工具.
二·常用标签
1. - 从大到小来标记"标题"
2.html中的注释
3.hr 水平线标签(分割线)
4.段落标签 p标签 在插入段落标签时,前后加入空行.
5.常见的文本格式化标签
(1)i标签 作用为文本斜体
(2)b标签 作用为文本加粗
(3)strong标签 作用为文本加粗与b标签类似但是其不同点是b标签用于语义强调
(4)em标签 作用为文本加粗与i标签类似但是其不同点是em标签用于语义强调
(5)q标签 引用标签 短引用, 被引入的元素加入引号
(6)blockquote 引用标签 长引用,用于缩进处理与编辑文本时tab键类似
(7)列表标签
<无序列表 ul 和li
ul是父标签
li是列表项(子标签)
ul标签默认的属性 type:给列表项前面的标记值(默认disc,实心圆点) 不写就是默认值
circle:空心圆点
square:实心的小正方形
< 有序列表
ol和li
li是ol子标签,列表项元素
ol的默认属性type,默认值值1
< 自定义列表
每个自定义列表项以 开始,每个自定义列表项的定义以 开始
< 滚动标签 marquee属性: 背景色bgcolor
滚动的方式: behavior
默认值scroll :连续滚动
slide:滑动一次到浏览器边框停止掉
alternate:来回滚动
direction:滚动的方式 :默认属性值
scrollamount 表示运动速度，值是正整数 ,默认值是6
scrolldelay 表示停顿时间，值是正整数，默认为0，单位是毫秒
(8)块标签
div:块元素,占一行空间,多个div之间会自带换行效果
div应用场景 :结合css(给html标签进行修饰的),完成层级页面布局
span:行内标签 ,不会像div元素处在同一行上的
span应用场景:前端完成表单校验去做的;
(9)pre 原样输出标签
将我们写的文本内容使用pre包裹起来,浏览器就会按照我们文本的格式进行展示
(10)html中常用的转义字符
:相当于在敲了一个空格 (代表一个空格)
&ensp:相当于两个空格
>:在浏览器将 ">"进行转义
<:"<" 进行转义
网站底部会有些版权所有或者注册商品的符号 使用转义字符的
版权所有©转义成 ©
注册商标®转义成 ®
(11)上下标标签
sup和sub
三·图像标签
语法规则
src:连接到的图片地址 url(统一字符定位符)
src:使用相对路径 (当前项目下的路径)
在使用图像标签时可以使用width:宽度 height:高度 以及px(像素或者百分比)来指定图片大小
title:当鼠标悬浮在图片上的文字提示
atl:替代文本 :当图片链接失效了
四·超链接标签
用a标签来表示,通过使用href属性创建指向另一个文档的链接
url 为网络资源定位符号(可以是本地地址或网络地址)
target:打开资源地址的方式(_self为在当前窗口打开
_blank为新建一个窗口打开)
超链接标签在文本文档中可以充当书签使用(在中用name创建锚点)
五·表格标签
使用table表示下面有子标签,table里面有一些属性
border:表格边框线 单位为像素大小(指定1-5px,值越大,边框线越粗)
cellspacing:设置表格单元格和边框之间的空隙,设置0,将单元格边框和表格的边框合并了
width和height:宽度和高度 像素大小或者占整个分辨率的百分比
align:给表格设置对齐方式center中间对齐
bgcolor:设置背景颜色
tr:行
align:将td中的内容进行对齐方式 (center)
行的子标签
caption:给表格中设置标题
td:一行指定的单元格 (普通单元格)
th:给单元格设置表头信息(自动居中加粗效果)
单元格合并td标签的属性
rowspan:行合并(合并行) 你当前这个单元格行合并所占的格子数量
colspan:列合并(合并列) 你当前这个单元格列合并所占的 格子数量
六·表单标签
1. form标签提交数据(form里嵌套table)
其中提交数据又分为两种get与post
get提交:
1)会将用户的信息提交到地址栏上 格式是在action的url地址后面表单项 标签中name属性值
1=输入的内容值1&name属性的属性值2=输入内容.
2)get提交,不适合提交用户的私密数据(像登录密 码,需要进行处理加密(Java中--MD5加密的
工具))
3)get提交由于在地址栏上的,所以提交的数据大 小有限制
post提交:HbuilerX运行,提交,找不到地址 手动方式去运行页面
1)不会将用户信息提交到地址栏上
2)相对get安全,安全一些,但是密码的信息还需要 加密(后期通过工具加密)
3)相对get来说不会将信息提交地址栏上,所以提 交数据大小无限制的
表单标签中所有标签都需要加上name属性用以标记
2.表单标签中的元素每一个被标签都有一个Style属性:行内样式 指定一些样式内容
输入类型元素input属性:
type="text" 文本输入框
type="password" 密码输入框
type="radio" 单项按钮
type="checkbox" 复选框
type="date" 日期组件
type="file" 文件上传组件
type="email" 邮箱组件: 如果你写的内容不包含@符号,不能提交会提示
type="button" 普通按钮 结合value去使用 ,给按钮默认值
type="submit" 结合value属性="登录/注册" 特殊的提交按钮,将用户的信息提交到action="服务器地址"
type="reset" 重置按钮
type="hidden" 隐藏域,没有效果,但是可以提交数据
下拉菜单select标签
子标签
option:下拉选项
textarea:文本域
rows:指定书写的行数
cols:一行有多个字符
若看成同一组信息,指定相同的name属性,给后端标记,用户选的哪些
七·框架标签
框架标签 , 使用 frame 来表示
特点:一个frame包含一个html页面
它可以模拟后台管理系统模板 , 整个结构的组成由多个页面组成 , 不能使用 frame 来表示 , 需要使用
frameset 框架集标签 ;
框架集标签 frameset: 由两个或者两个以上的 html 页面组成
rows: 水平方向 ( 由上而下划分 ) 每一个部分占整个部分权重百分比
cols: 垂直方向 ( 由左而右划分 ) 每一个部分占整个部分权重百分比
(页面占比)
logo 页
(页面占比)
左边菜单页
中间主页
底部信息页
注意事项:
当点击左边菜单页的超链接 ,a标签的target属性指定在具体frame中打开,和frame中的name属性值一致即可!
CSS入门
css:层叠样式表
在使用html时由于频繁利用style使得整体程序繁琐因此利用css中多种不同简便方式来对网页进行修饰
一· css使用方式分为三种:行内样式\内部样式\外部样式(外联式)
1.行内样式
html的每一个标签都有style属性:设置样式的 style="多种样式名称."
弊端:一次只能控制一个标签去进行修饰(如果在实际操作过程中,仅仅给某个标签去设置,就直接 用这个方式)
2.内部样式(内联式)
在head标签体中书写 存在弊端:当前这个html只是写html标签元素的,样式代码style标签
和html标签元素混合了,不利于管理
3.外部样式(外联式)
单独需要在项目下创建css文件夹,然后里面创建后缀名.css文件
css文件书写
选择器{
样式属性名称1:值1;
样式属性名称2:值2;
样式属性名称3:值3; ...
}
在当前html页面中导入css文件
rel:关联样式库中的样式(关联层叠样式表):固定写法
二·css常用选择器(在后端开发过程中的需要使用内部样式)
1.标签名称选择器{
样式属性名称1:值1;
样式属性名称2:值2; ....
}
2 class选择器(类选择器)
需要在标签指定class属性="值"
.class属性值{
样式属性名称1:值1;
样式属性名称2:值2; ....
}
同一个页面中的class属性值是可以同名的
class(类)选择器 :同一类元素 优先级 > 标签名称选择器
3 id选择器
在标签中指定id="值",注意:id选择器的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的后代元素
样式属性名称2:值2;
....
}
三·css内特殊选择器(伪类选择器)
1.用于定义元素的特殊状态
状态:
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文本样式
div后接大括号{
文本样式 color
文本对齐样式 text-align(left center right)
文本修饰 text-decoration 属性用于设置或删除文本装饰。
underline:设置下划线
none:不设置任何修饰
overline:上划线
line-through:中划线(电商平台:打折之后原件上面的中划线)
text-transform:文本转换
capitalize:将每个单词首字母大写
uppercase:将英文单词转换成大写
lowercase:将英文单词转换成小写
letter-spacing:指定文本中字符之间的间距
text-shadow:文本阴影(后面可添加文本颜色)
