html css第二天
一、HTML常用标签
1.1 图像标签
<img src="" alt=""/>
src属性（source 资源） ： 设置图像的资源路径
alt属性： 当图像资源不显示时的提示文本
title属性：当鼠标悬停在图像上，设置标题
路径：
网络路径 url
绝对路径： 资源在文件系统中的真实路径
C:/a.png
/
相对路径：
从代码所在的文件开始寻找
## 1.2超链接图像
<a href="">
<img src=""/>
</a>
1.3 表单和表单元素
表单： 在网页中用于采集用户数据，并将用户数据提交给后台服务器
<form> -- 表单标签
<input /> -- 输入型表单元素标签
<select> -- 下拉列表表单元素标签
<option></option> -- 列表选项标签
...
</select>
<textarea> -- 多行文本域
</textarea>
</form>
1.3.1 input输入型的表单元素
input标签：
type属性：指定是什么类型的输入元素标签
常用的值：
- text 单行文本框 默认
-value属性：文本框的文本内容
-required属性：是否必填
-readonly属性：是否只读
-disabled属性： 是否禁用 （不设置disabled属性就是可用enabled）
-maxlength属性：设置最大字符数
-placeholder属性：设置占位符（文本提示）
-autocomplete属性：是否自动提示框 on|off
-passworld 密码框
-file 文件域（上传）
-hidden 隐藏域 (商品编号隐藏发送，不让用户看到的数据)
-radio 单选按钮
如果希望一组单选按钮是互斥的，需要设置
单选按钮的属性 name的名称一致
-checked属性 ：设置是否被选中
checked = "checked"
标签中如果某个属性的名称和值是一致的
可以只写属性名称，不推荐
<input id="male" type="radio" name="gender">
<label for="male">男</label>
<input id="female" type="radio" name="gender" checked>
<label for="female">女</label>
-checkbox 复选框
-submit 提交按钮
value属性：设置按钮的文本
当点击提交按钮时，将整个表单的 数据提交到action指定的服务器
-reset 重置按钮
value属性：设置按钮的文本 -image 图像按钮
src属性：设置图像的路径
-button 普通
value属性：设置按钮的文本
-date 日期选择器（了解）
通常使用第三方
-email 邮件输入框
对邮件地址的格式做初级判断
-number 数字选择器
value设置值
max设置最大值
min设置最小值
step设置步长
-color 颜色选择器
1.3.2 下拉列表（下拉框）
<select>
<option></option>
</select>
1.3.3多行文本框
<textarea>
</textarea>
二、CSS层叠样式表
2.1CSS样式表的语法
选择器 {
样式的属性名称: 样式的值;
....
}
选择器：选取网页中需要添加样式的元素（标签）
样式的属性：
字体样式
- color: 设置字体颜色
值: 颜色的单词（学习期间用）
颜色的十六进制（大多数公司的用法）
rgb() 三原色函数（部分公司）
2.2 基本选择器
* 通配符选择器 选择出所有标签，学习期间中使用，开发中不使用，效率低
#id id选择器 类似vip定制衣服 选择出指定id属性的值的标签
标签名称 标签选择器 类似校服 选出某种名称的所有标签
.类名 类名选择器 类似专卖店 通过标签的class属性
2.3 HTML网页如何引入CSS技术
2.3.1 行内样式表
<标签 style="样式属性名称: 属性的值"></标签>
优点：样式的目标非常明确
缺点：HTML代码和CSS代码杂糅了，没有分离，不好维护，不推荐使用
2.3.2内部样式表
<head>
<style>
css语句
</style>
</head>
优点：HTML代码和CSS代码分离，好维护
缺点：内部样式表只能针对当前页面，其他页面无法共享样式表
补充：CSS代码段部分注释 /* 注释内容 */
HTML代码部分注释 <!-- 注释内容 -->
JavaScript代码部分注释 // 单行注释 和 /* 注释内容 */多行注释
通配符选择器
/* 内部样式表 */
/* 通配符选择器,不推荐使用 */
* {
color: red; /* 设置文本的颜色*/
}
标签选择器
/* 标签选择器 */
p {
color: mediumblue;
}
id选择器
/* id选择器 */
#firstH1 {
color: crimson;
}
2.3.3 外部样式表
<head>
<link href="外部样式表的路径"/> -- 引入外部样式文件 *.css
</head>
优点：
HTML和CSS分离，好维护
可以多个网页共享同一个样式表
缺点：
外部样式表可能会样式层叠
CSS 引入的优先级（就近原则）
行内>内部>外部
选择器的优先级（选择器的权重）
id选择器>类选择器>标签选择器
浙公网安备 33010602011771号