浏览器——推荐谷歌 解析css,js速度快 支持功能多
HTML 定义一个页面显示什么东西
css 层叠样式表 作用:美化形态
Js 能让页面动起来
第一个HTML页面
<!DOCTYPE html>
<html>
<head>
<title>这是我的第一个html页面</title>
</head>
<body>
HelloWorld!!!!
</body>
</html>
1.html 超文本标记语言
2.<!DOCTYPE html>html文档版本声明->htmls的声明方式必须存在于html页面的首行
3.head中定义的内容是给浏览器识别的一些设置 body中的内容给用户看的显示在页面中的
4.<meta charset="utf-8"> 解码格式 告诉浏览器使用哪一种字符编码格式解析html页面中的内容
编码与解码保持一致不会出现乱码
5.title标签
是head中唯一一个能被用户看到内容的标签对
html文档的标题
有利于搜索引擎的优化
在收藏页面的时候,标签名默认title标签对中的内容
6.分类:
双标签|闭合标签 : 标签对中需要定义内容
单标签|自闭和标签 : 标签对中不需要定义内容
7.属性: 帮助更完整的展示标签
属性名 = "属性值"
可以为一对'',可以为一对""
属性要存在空格
8.元素: 标签+内容
1.a 超链接标签
属性:
href : 链接地址 必填属性
相对地址
绝对地址
# 回到顶部但不刷新
title : 当鼠标悬停在内容上时候显示的 提示字
target : 打开方式
_self : 本页面打开 -> 默认
_blank : 新页面打开
样式:
下划线
字体颜色:
连接未访问: 蓝色
连接已访问: 紫色
2.img 图像标签
属性:
src : 图片地址 -> 必填属性
相对地址
绝对地址
alt : 当图像无法正确加载,显示提示
title : 当鼠标悬停在内容上时候显示的提示字
width : 宽度
单位: 大小长度等单位为px
高度没有设置会等比进行缩放,保证图像不失真
height : 高度
border : 设置边框大小
路径指定:
进入某个路径下 文件夹名字/
回到上一层路径 ../
3.h* 标题标签
h1~h6
根据权重的不同,大小会一次缩小
样式:
字体大小不同
加粗
独占一行,前后换行
4.p标签
段落标签
前后换行
语义化
正常显示
标签的分类
行内元素 : 可以与其他行内元素或者文本同行显示
行内元素不可以设置宽高
宽高有内容撑起
行内元素可以嵌套其他行内元素或者普通文本
不能设置上下的内外边距
块元素 : 独占一行,前后换行
可以设置宽高
可以嵌套块元素,行内元素,普通文本
可以设置上下左右内外边距
5.span 帮助方便的展示元素
行内元素
正常显示
6.div 块
div+css 实现布局
块元素
7.hr 水平线
8.br 换行
注意: p只能嵌套其他行内与文本
列表
无序列表
ul标签
有序列表
ol标签
li 列表项
列表项标记修改 : 在ul|ol标签上使用type属性修改
无序列表的列表项标记 : type : circle空心圆圈 desc实心圆形 square黑心方块
有序列表的列表项标记 : type : 1 A a I i
ul,ol,li都是块元素,独占一行
ul,ol中的直接子元素只能为li,li中可以嵌套任意内容
各种列表都可以任意实现嵌套
list-style: none; 去除列表项标记
表格 :
table 表格标签
tr 行
th 表格头单元格 默认加粗居中
td 表格体单元格
内容定义在单元格中
单元格要定义在行中
先有行,再有单元格,再有内容
单元格中可以定义任意内容
属性:
border="1" 边框
align 对齐方式
left 左对齐
right 右对齐
center 居中对齐
width : 宽度
height : 高度
style="border-collapse: collapse;" 双线变单线
合并单元格: *****
rowspan 跨行
colspan 跨列
表单: 收集用户输入的数据
form 表单标签
form标签的属性
action 标签的提交位置
name 表单的名字,区分标签
method 提交方式
get 默认 地址栏 不安全 效率高 具有大小限制
post 请求头 安全 没有大小限制
enctype : 属性规定在将表单数据发送到服务器之前如何对其进行编码。
application/x-www-form-urlencoded 默认。在发送前对所有字符进行编码 (将空格转换为 "+" 符号,特殊字符转换为 ASCII HEX 值)。
multipart/form-data 不对字符编码。当使用有文件上传控件的表单时,该值是必 需的。
表单元素 : 使用在form标签中的元素
大部分的表单元素都是通过input标签定义
type属性的不同,input标签的作用不同
input type :
text : 普通文本框 name必填
password : 密码框 加密效果 name必填
radio 单选框
一组内的单选框只能选择一个
name属性值相同为一组
checkbox : 多选框
相同作用的多选框设置一组,name属性值相同为一组
file : 文件上传
hidden 隐藏框
submit 提交
button 按钮
常见的属性:
id 前台区分元素的唯一,常配合js,css一起使用
class 配合css,js一起使用
name 后台区分元素的唯一
表单元素以键值对的形式发送后台,键值对的key->表单元素的name属 性值 键值对的value->就是输入框锁接收到的值
value : 表单元素的值,默认值
reset : 重置
注意: 如果表单元素想要具有提交能力,必须存在name属性
fieldSet 元素集
legend 元素集提示信息
textarea 多行文本域 name必填
select 下拉列表
option 下拉列表选项
label 定义标注
属性:
maxlength 最大长度
required 必填属性
autofocus 自动聚焦
checked 默认选中(单选,多选)
selected 默认选中(下拉列表)
placeholder 提示信息
readonly 只读 不能修改,可以提交
diabled 禁用 显示为灰色 不能聚焦 不能提交
HTML 超文本语言
学习各种不同作用的标签
标签的作业 特点 属性 属性值
常用标签 h p div span a ing...
列表标签
表格标签
表单标签 bgcolor