HTML基础笔记
HTML基础语法
1.html结构
（html5）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
(xhtml)
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
</head>
<body>
</body>
</html>
2.html中的基础标签
1.标签类型
1.单标签
比如：<br> <hr>
2.双标签
比如：<title></title>
2.标签之间的关系
1.父子关系
2.兄弟关系
3.hr相关属性
| 属性值 | 解释说明 |
|---|---|
| color | 颜色 |
| width | 宽度 |
| size | 粗细 |
| align | 对齐（已废弃） |
4.font相关属性
font(字体)
| 属性值 | 解释说明 |
|---|---|
| color | 颜色 |
| size | 字号 |
| face | 字体 |
5.背景的相关属性
| 属性名 | 解释说明 |
|---|---|
| background | 背景图片 |
| bgcolor | 背景颜色 |
3.html的注释
语法：
<!-- 内容 -->
作用：提高代码的可读性，方便后期维护。
快捷键：ctrl+/
4.html常用标签
1.文本样式标签
| 标签名 | 解释说明 |
|---|---|
| h1-h6 | 文本标题标签 |
| b | 文本加粗 |
| p | 段落 |
| br | 换行 |
| hr | 分割线 |
2.标题之间的区别
1.样式不同
2.SEO权重问题，在数据爬虫爬取的时候，会按照权重来分配爬取前后。
3.文本格式化标签
| 标签名 | 解释说明 |
|---|---|
| sub | 下标 |
| sup | 上标 |
| s | 删除线 |
| u | 下划线 |
| i | 加粗 |
4.特殊字符（W3C手册查找）
| 符号 | 解释说明 |
|---|---|
| | 空格 |
| < | < |
| > | > |
| © | © |
5.图片标签
图片标签属于文本标签。可以跟文本显示在同一行。
语法：
| 属性 | 解释说明 |
|---|---|
| src | 图片路径 |
| width | 图片宽度 |
| height | 图片高度 |
| alt | 图片加载失败时显示里面的内容 |
| title | 图片标题（当鼠标移动放置的时候会出现内容） |
| align | 图片与文本位置（已废弃）left right top 默认值：bottom |
6.超链接
超链接的三种状态：
1.未点击时 蓝色
2.点击时 红色
3.点击后 紫色
target ：_blank默认值 打开新窗口页面_self在当前页面打开窗口 。
7.多媒体标签
embed标签 相当于是一个容器。用来嵌入音频跟视频。
| 属性 | 解释说明 |
|---|---|
| src | 引入路径 |
| width | 设置宽度 |
| height | 设置高度 |
| type | 设置导入文件的MIME类型 |
8.列表
1.有序列表
| 标签名 | 标签介绍 |
|---|---|
| ol | 定义有序列表的容器 |
| li | 定义有序列表的列表项 |
ol标签属性:
| 属性值 | 属性说明 |
|---|---|
| type | 1(默认)：以数字的形式进行列表项编号 A、a、I、i：以大写的英文字母、小写英文字母、大写罗马数字、小写的罗马数字进行列表项排序 |
| start | 设置有序列表的起始数字 |
li标签属性：
| 属性值 | 属性说明 |
|---|---|
| type | 同ol的type |
| value | 设置当前列表项的列表编号 |
2.无序列表
| 标签名 | 标签介绍 |
|---|---|
| ul | 定义无序列表 |
| li | 定义无序列表的列表项 |
标签属性:
| 属性值 | 属性说明 |
|---|---|
| type | desc(默认)：以实心原点的形式进行列表项编号 circle、square：以圆圈、实心方块进行列表项排序 |
3.自定义列表
`
- 列表项
- 列表项
- 列表项
- 列表项
列表标题
…
5.表格
1.基础表格
<table>
<tr>
<td></td>
</tr>
</table>
| 标签名 | 解释说明 |
|---|---|
| table | 声明表格 |
| tr | 表格当中的行 |
| td | 单元格 |
| th | 表头 |
属性：
| 属性名 | 解释说明 |
|---|---|
| border | 表格边框 |
| width | 表格宽度 |
| height | 表格高度 |
| cellspacing | 单元格与单元格之间的间距 |
| cellpadding | 文本内容与边框的距离 |
| align | 在table标签里面代表表格在页面的位置 在tr里面表示这一行文本的位置 在td里面表示单个单元格中文本位置 |
| bgcolor | 背景颜色 |
| background | 背景图片 |
2.表格中的合并
| 属性名 | 解释说明 |
|---|---|
| rowspan | 行合并 |
| colspan | 列合并，单元格合并 |
3.表格补充
| 标签名 | 解释说明 |
|---|---|
| caption | 表格的标题 |
| thead | 表格头部 |
| tbody | 表格的表体内容 |
| tfoot | 表格的底部 |
6.表单
1.表单里面的属性
| 属性名 | 解释说明 |
|---|---|
| action | 提交给后台的路径，称之为接口 |
| method | 表单的提交方式 |
get请求与post请求的区别
get请求方式：
1.通过地址栏提交数据，数据不安全。
2.响应速度快。
3.提交的数据内容大小有限制。
post请求方式：
1.通过form Data(实体内容)提交数据据，数据比较安全。
2.对提交数据大小没有限制。
3.要求后端的表单method方式也是post。
2.input表单
表单里面属性：
| 属性名 | 解释说明 |
|---|---|
| type | 输入类型 |
| name | 数据名 |
| value | 初始值 |
| maxlength | 最大长度 |
| minlength | 最小长度 |
| placeholder | 提示信息 |
| disabled | 禁用 |
| readonly | 只读 |
| required | 必填 |
| id | 标记标签 |
| autofocus | 获取焦点 |
2.1文本输入框
<input type="text" name="text">
2.2密码框
<input type="password" name="pwd">
2.3隐藏框
<input type="hidden" name="id" value="5">
2.4单选按钮
男：<input type="radio" name="sex" checked>
女：<input type="radio" name="sex">
| 属性名 | 解释说明 |
|---|---|
| checked | 表示默认选中 |
2.5提交按钮
<input type="submit" value="登录">
2.6button提交按钮
<input type="button" value="提交">
2.7button标签
<button type="button">登录</button>
2.8重置按钮
<input type="reset" >
2.9文本域
<textarea name="" id="" cols="50" rows="20"></textarea>
文本域中的属性
| 属性名 | 解释说明 |
|---|---|
| cols | 列宽 |
| rows | 行高 |
2.10下拉框
| 属性名 | 解释说明 |
|---|---|
| optgroup标签 | 分组 |
| selected | 第一个显示此元素 |
2.11颜色输入框
<input type="color">
2.12数字输入框
请输入数字：<input type="number" min="10" max="50" step="5">
| 属性名 | 解释说明 |
|---|---|
| min | 最小值 |
| max | 最大值 |
| step | 步长 |
2.13邮箱输入框
邮箱：<input type="email" name="email"><br>
2.14网址输入框
网址：<input type="url" name="url">
2.15文件上传
<input type="file" name="file" multiple>
2.16图片作为提交按钮使用
<input type="image" src="img/tt.jpg">
2.17 label标签的使用
<label for="user">
用户名：<input type="text" id="user">
</label>
2.18 数据列表
<input type="text" list="li" id="kecheng">
<datalist id="li">
<option value="java">java</option>
<option value="web">html</option>
<option value="python">python</option>
</datalist>
3.日期输入框
| 属性 | 解释说明 |
|---|---|
| data | 日期 |
| week | 周 |
| month | 月 |
| datetime-local | 本地日期时间 |
| time | 时分 |
| datetime | 日期时间 |
7.框架
1.水平框架
把当前页面分割成多个页面，必须写在head中。
语法：
`<farmeset>`
<frame src="网址" framebord="0" scrolling="no">
</framest>
| 属性 | 解释说明 |
|---|---|
| frameborder | 边框【设置0就是没有边框】 |
| scrolling | 滚动条【no就是没有滚动条】 |
| noresize | 固定大小 |
| rows | 水平 |
| cols | 垂直 |
2.导航框架
1.给frame设置name属性值
2.设置超链接target属性
3.垂直框架
1.分割的方向 垂直【cols】
2.分割的个数
3.分割页面的大小
cols:属性值的作用
1.确定分割的个数
2.确定分割页面的大小
4.混合框架
水平框架+垂直框架
5.内联框架
内联框架和框架集的区别
框架集：把body分割成多个body页面
内联框架：往body中插入多个页面，类似于img
iframe内联框架里面常用属性**
| 属性 | 解释说明 |
|---|---|
| src | 引入的路径 |
| frameborder | 框架边框的显示方式 1是有边框，0是没有 |
| width | 宽度 |
| height | 高度 |
| scrolling | 值为 yes/no/auto 是否显示滚动条 auto 自适应 |
231
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
