Web前端（二）-图片标签、超链接、表格、表单、分区标签、CSS层叠样式表（CSS引入方式、选择器、颜色赋值、背景图片）
标签
-
src: 资源路径:
-
相对路径:
-
资源和页面在同一目录: 直接写图片名即可
-
资源在页面的上级目录: ../图片名
- 资源在页面的上上级目录:.././图片名
-
资源在页面的下级目录: 文件名/图片名
-
-
绝对路径: 一般访问站外资源时使用, 也称为图片盗链(存在找不到图片的风险)
-
-
alt: 图片不能显示时显示的文本
-
title: 图片标题, 鼠标停在图片上显示的文本
-
width/height:设置图片宽高 , 如果只设置宽度,高度会等比例缩放
-
像素值
-
百分比
-
超链接a
-
href: 资源路径 作用类似图片标签中的src属性
-
a标签包裹文本为文本超链接,包裹图片为图片超链接
-
页面内部跳转, 在目的地位置元素里面添加id属性 在超链接里面href="#id"
表格table
-
包含标签: table tr表示行 td表示列 th表头 caption表格标题
-
属性: table(border边框) td(跨行rowspan 跨列 colspan)
表单form
-
-
学习form表单主要学习的就是有哪些控件
-
控件包括: 文本框,密码框,按钮,单选,多选,下拉选,日期,文件等
-
相关代码:
<form action="http://www.tmooc.cn">
<!--placeholder站位文本 maxlength最大字符长度
value设置默认值 readonly只读-->
用户名:<input type="text" name="username"
placeholder="请输入用户名" maxlength="5"
value="abc" readonly="readonly"><br>
密码:<input type="password" name="password"><br>
<!--checked默认选中 value必须添加 否则提交的是on -->
性别:<input type="radio" name="gender"
value="m" id="r1">
<label for="r1">男</label>
<input type="radio" checked="checked"
name="gender" value="w">女<br>
兴趣爱好:<input type="checkbox" name="hobby"
value="cy">抽烟
<input type="checkbox" checked="checked"
name="hobby" value="hj">喝酒
<input type="checkbox" name="hobby" value="tt">烫头<br>
生日:<input type="date" name="birthday"><br>
靓照:<input type="file" name="pic"><br>
所在地:<select name="city">
<option>北京</option>
<option selected="selected">上海</option>
<!--value设置提交内容 如果没有则提交标签体内容-->
<option value="guangzhou">广州</option>
</select><br>
<input type="reset">
<input type="submit" value="注册">
<!--自定义按钮-->
<input type="button" value="按钮">
<hr>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">自定义</button>
</form>
分区标签
-
作用: 类似容器, 对多个相关标签进行统一管理
-
一个页面至少分为三大区,头/体/脚 每个大区里面又有n个小的分区
-
有哪些分区标签?
-
块级分区标签: div, 特点:独占一行
HTML5标准中新增分区标签(header头,footer脚,article正文/文章, nav导航, section区域)作用和div一样
HTML5之前版本:
<div>头</div>
<div>体</div>
<div>脚</div>
HTML5版本后: 提高了代码可读性
<header>头</header>
<article>体</article>或<section>体</section>
<footer>脚</footer> -
行内分区元素: span 共占一行
-
CSS层叠样式表
-
作用: 美化页面
CSS的引入方式
-
如何在HTML页面中添加样式代码:
-
内联样式: 在标签的style属性中添加样式代码, 这种写法不能复用
-
内部样式: 在head标签里面添加style标签, 在标签体内通过选择器选择到元素 然后添加样式代码, 只能当前页面复用
-
外部样式: 创建单独的css样式文件,通过link标签引入到html页面中, 这种写法可以多页面复用, 而且可以将html代码和css代码分离开
-
-
引入方式优先级: 后执行的会覆盖先执行的, 内联因为标签内容都在开始标签中, 所以肯定是最后执行的,因此优先级最高.内部样式与外部样式的优先顺序按照就近原则,执行最后的样式代码.
选择器
-
通过选择器选择到页面中的元素,然后添加样式代码
-
标签名选择器
-
格式: 标签名{样式代码}
-
-
id选择器:通过元素id选择元素, 页面中元素的id要保证唯一
-
格式: #id{样式代码}
-
-
类选择器: 给多个元素添加相同的class属性值,一次选择多个元素
-
格式: .class{样式代码}
-
-
分组选择器: 将多个选择器合并成一个选择器
-
格式: div,#id,.class{样式代码}
-
-
属性选择器: 通过元素的属性选择元素
-
格式: [属性名]{样式代码} [属性名='值']{样式代码}
-
-
任意元素选择器: 选择页面中所有的元素
-
格式: *{样式代码}
-
-
子孙后代选择器: 通过元素之间的关系选择元素
-
格式: body div p{样式代码} 匹配body里面的div里面的所有p
-
-
子元素选择器: 通过元素之间的关系选择元素
-
格式: body>div>p{样式代码} 匹配body里面的div里面的子元素p
-
-
伪类选择器: 选择的是元素的状态
-
格式: a:link未访问/visited访问过/hover悬停/active点击{样式代码}
-
综合练习:
1.修改张学友为绿色
-
修改刘德华,刘备为蓝色
-
修改刘关张和曹操背景黄色
-
提交按钮背景红色
-
所有元素添加蓝色边框
选择器练习:
1.刘备背景色为粉色
2.张飞,沙僧,黄焖鸡字体绿色
3.所有吃的和超链接背景蓝色
4.超链接默认状态绿色,访问
过蓝色,悬停红色,点击黄色
5.文本框字体红色,
密码框背景绿色
6.p2,p3,p4字体绿色
7. p2,p3背景红色
颜色赋值
-
三原色: rgb Red Green Blue 取值范围:0-255
-
赋值方式:
-
颜色单词赋值: red/green/blue/pink....
-
6位16进制赋值: #ff0000
-
3位16进制赋值: #0f0
-
3位10进制赋值: rgb(255,0,0)
-
4位10进制赋值: rgba(255,0,0,0-1) a=alpha透明度 值越小越透明
-
背景图片
-
background-image:url("路径") 设置背景图片
-
background-size:200px 100px 设置背景图片尺寸
-
background-repeat:no-repeat 禁止重复
-
background-position: 横向百分比或像素 纵向百分比或像素 控制图片位置
晚课任务:
