一,HTML的使用
下载html的编辑器 vscode
- vscode是前端轻量化服务器
- 用于展示html页面
- 可以热更新,保存之后效果立马更改,不需要要重新运行
1.1,html的标签
基础标签
- html 根标签
- head 头标签
- body 身体标签
html的其他标签可以分为6部分
第一部分 - div 块标签 可是我们最常用的标签可以铺满多行
- h1-h6 一级到六级标题 是一个行级元素 航机元素不能嵌套行级标签 它的具体变现就是字体大小变化 加粗 加黑 有行距的一个效果
- p 段落标签 行级元素
- span 隔离标签
- br 强制换行
- hr 水平分割线
第二部分
第二部分是对于文本来构建 都可以单独选择 - b 粗体 加粗
- stong 加粗
- i 斜体
- em 斜体
- del 删除线
- u 下划线
- sub 下标
- sup 上标
第三部分 列表标签 - ol 有序列表 块级标签 也就是外框架
- ul 无序列表 块级标签 外框架
- li 列表项目 一般不会单独出现
- dl 自定义列表 块级标签 外框架
- dt 自定义列表项 顶格出现
- dd 自定义列表项说明 缩进出现 一般写在dd下方
第卅部分
标签属性
在开始标签对标签进行修饰
table标签属性 - border 外边框
- cellspacing 单元格之间的大小
- cellpadding 单元格中字体与单元格之间的距离
- width 表的宽度
- align 表的位置 可以使用center 进行居中
tr/th/td 的标签属性 - rowspan 列合并
- colspan 行合并
- tr 每一行 外框架的下一层框架
- th 表头单元格
- td 普通数据单元格
第四部分 - img 图片的插入
src 图片的地址可以是本地插入 也可以其他服务器地址插入
alt 可以不写 图片加载失败的提示信息 - audio 音频
src 地址
controls 控件 - a 超级链接
点击 其中的内容,跳转到其中的网址
herf 连接地址 支持外部服务器地址 和本地服务器地址
target _blank 新空白页打开
target id 锚点 - video 视频
src 地址
controls 控件 显示
第五部分 - iframe 内联框架
嵌入其他页面
src 地址路径
第一次请求原始页面 第二次请求iframe页面
第六部分 - 表单标签
可以将瀛湖驶入的诗句提交到服务器
from 表单域
action 服务器地址
method 提交方式 默认是get
post 参数是以表单的形式进行提交
免费服务器测试地址
http://httpbin.org/get
表单标签 input 一般配合lable lable的id要和input一致
type类型 - text 文本
- password 密码
- submit 提交
- reset 重置
- checkbox 多选
- color 颜色
- file 文件
select 下拉选项
textarea 自定义文本
表单按钮
input - submit
input -reset
input属性 - placeholder 提示信息
- requires 必填项目
- checked 默认选中
- select 下拉默认选择
隐藏域
看不见的也会提交到服务器
type为hidden
HTML的语义化标签 - header 头部
- nav 导航栏
- footer 底部栏
- main 主体
- section 区域
- article 文章
- aside 侧边栏
HTML的标准属性
所有标签都可以使用的属性 - id 单个html文件内部 一定要唯一
- class 一个标签可以有多个类名 使用空格隔开
- style 样式
- title 鼠标划入提示信息
HTML结构快速生成 -
嵌套
- *重复
-
- 追加同级别
- {} 内容
- $ 递增数字
- () 代表分组
- lorem 速记内容