文章目录
基本语法
-
所有的html代码都是以<html代码>包起来的
-
名词
用 <> 包起来, 红色标注的单词, 都称之为 “标签”
在 开始尖括号 后面的单词 就是 “标签” -
标签分为: 单标签. <开始标签>
双标签. <开始标签> 内容 </结束标签>
-
注释: ①不会显示在浏览器中
②不能嵌套使用
③提高团队效率,恢复个人记忆
-
浏览器特性
html: 告诉浏览器, 这里面都是html相关的代码
head: 告诉浏览器, 这里面需要加载 css,js文件, 设置语言编码, 网页标题, …
body: 浏览器主要显示的内容区域
<html>
<head></head>
<body></body>
</html>
-
注释: <!-- 注释内容 -->
- 不会显示在浏览器中
- 不能嵌套使用
- 提高团队效率 和 恢复个人记忆
-
属性:
①属性名=“属性值” ②位置: 需要写在开始标签中, 在标签名的后面,
并且标签名与属性和各个属性之间需要至少保留一个空格
-
浏览器特性:
- 默认, 任何的回车 和 连续多个空格, 要么不解析, 要么只解析成一个空格
- 利用 浏览器的特性, 做代码的排版.
- 常用排版键: Tab
-
html 的声明都是写在html代码的最前面
html4声明:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">html5声明:
<!DOCTYPE HTML>
一. 文本标签
| 标签名 | 代码 |
|---|---|
| 标题标签 | h1~h6 |
| 段落标签 | p |
| 加粗 | b |
| 倾斜 | i |
| 下划线 | u |
| 删除线 | del |
| 强调,程度深一点 (加粗) | strong |
| 强调,程度浅一点 (倾斜) | em |
| 上标 | sup |
| 下标 | sub |
| 原样输出 | pre |
| 换行 | br |
| 水平线 | hr |
二.列表标签
场景: 一排排或者一列列的,长得差不多的都可以用列表来实现.
1.无序列表 (输出的时候 后面有 ● □ )
<ul>
<li>.......</li> li中写具体内容
<li>.......</li>
<li>.......</li>
<li>.......</li>
</ul>
2.有序列表(输出的时候前面有1. 2. 3. 等序列)
<ol>
<li>.......</li> 具体内容
<li>.......</li>
<li>.......</li>
<li>.......</li>
</ol>
3.定义列表 (自定义列表 输出的时候前面没有项目符号)
<dl>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dd>内容3</dd>
<dd>内容4</dd>
</dl>
小结: 有标题的用 bl 没有标题的用 ul 或 ol .
例 :
三.实体符号 &实体码;
含义: 在html中有一些符号是无法直接输出的 以下是一些常用的实体符号,可以代为输出这些特殊符号.
功能: 将特殊符号,以普通方式表达出来
格式: &实体符号代码;
| 实体码 | 实体符号 |
|---|---|
| < ; | 小于 |
| > ; | 大于 |
|   ; | 空格 |
| © ; | 版权 |
| ¥ ; | 人民币 |
| & ; | & |
| " ; | 双引号 " |
| ° ; | 度 |
四,超链接
<a></a>
-
作用: 用来跳转其他页面
-
标签名: a 这是一对双标签
-
标签属性:
-
href = “url地址” 跳转至哪一个页面
-
target=" " 以窗口打开网页
- _blank 在新的窗口打开连接
- _self 在本窗口打开链接
- _top 在顶级窗口打开链接
- name 在自定义窗口打开链接
-
注意点:
-
未曾访问过的超链接为蓝色, 曾经访问过的超链接为紫色. 后期可以通过css来统一超链接的颜色
-
在浏览器中,地址栏会隐藏http协议, 并不代表不需要,只是隐藏了而已,(不会隐藏https)
-
url网址: 由七个部分组成
-
简单的url 由协议+域名
-
完整的url 由 协议+ 域名+ 端口+ 目录+ 文件名+ 参数+ 锚点
例: http://www.baidu.com:80/xxx/xxx/xxx/index.html?name=你猜呀&age=18#xxxxURL的组成 组成部分 http 协议 www.baidu.com 域名 80 端口 xxx/xxx/xxx 目录 index.html 文件名 ?name=你猜呀&age=18 参数 #xxxx 锚点
-
-
锚点的使用
- 步骤1: 准备锚点, 在开始标签中,通过属性 id = “锚点名”
- 步骤2: 点击链接,在url最后通过#锚点名来跳转至步骤1.
<a href="前面不写url等于本页面 #one">这是准备的链接</a> <a id="one">这是链接跳转的地方</a>
五.图片
<img>
-
标签名: img
-
标签属性
标签功能 代码 图片来源地址 src 图片加载失败 / 延迟时, 显示的文字 alt 当鼠标悬停在图片上时,显示的文字 title 宽 width 高 height
例:<img src="./03.jpg" height="200px" width="100" alt="加载失败或延迟时显示的文字" title="当鼠标悬停在图片上时 显示的文字">
-
所有文件地址
相对路径: (参照物:正在访问的文件)
1. . 当前目录(默认)
2. … 上一级目录
3. … 不存在三个**.** 最多只有2个
如果返回上上级目录 **…/…/**的方式访问
绝对路径:
网址形式: http://xxx.xxx.xxx.png
盘符形式: C:/wamp/php84/xxx.png
根目录: / 地址的最前面用/开头 域名是什么就代表什么.
六,音频
<audio>
标签名: audio
属性名:
| 属性功能 | 代码 |
|---|---|
| 来源地址 | src |
| 控制器 | controls |
| 自动播放 | autoplay |
| 循环播放 | loop |
例: <audio src="生僻字.MP3" controls loop autoplay></audio>
七,视频
`<video>`
标签名: video
属性名:
| 属性功能 | 代码 |
|---|---|
| 来源地址 | src |
| 控制器 | controls |
| 自动播放 | autoplay |
| 循环播放 | loop |
| 宽 | width |
| 高 | height |
例: <video src="生如夏花.MP4" controls loop autoplay width="200px"></video>
注意点: 宽 高 只要设置一者 会根据设置的属性等比例缩放.
八,表格
<table>
- 表格标签:
<table></table>
| 属性名 | 功能 |
|---|---|
| width | 宽度 |
| height | 高度 |
| border | 边框线 粗细 |
| align | 水平对齐 left-center-right |
| cellspacing | 单元格外边距 (单元格与单元格之间的距离) |
| cellpadding | 单元格与内容之间的距离 |
-
表格标题
<caption> </caption>表格标题( 加粗,居中) -
表行
<tr></tr>属性名 功能 bgcolor 背景颜色 align 水平对齐 left-center-right valign 垂直对齐 top-middle-buttom -
表头(单元格) th (默认: 加粗 居中)
-
单元格(内容) td
| 属性名 | 功能 |
|---|---|
| width | 宽度 |
| height | 高度 |
| align | 水平对齐 left-center-right |
| valign | 垂直对齐 top-middle-buttom |
-
共有属性
table / tr /th /td 共有属性
[ background ] 设置表格背景
-
合并单元格
[colspan] 跨列合并单元格 横向
[rowspan] 跨行合并单元格 竖向
九,表单
<form>
一.表单标签<form></form>
| 属性名 | 功能 |
|---|---|
| [action] | 指定接收数据的 服务器文件(值为一个文件地址 |
| 相对地址: ./form.php | |
| 绝对地址: http://www.baidu.com | |
| [method] | 规定如何发送表单 |
| get | URL传参,地址栏能看到所有数据 |
| post | HTTP POST 方式传参(隐蔽传参) 比较安全 |
| [enctype] | 规定表单在发送到服务器之前应该如何编码 |
| 默认值 | application/x-www-form-urlencoded,进行编码 |
| 文件上传时 | multipart/form-data 不对数据编码,上传文件时使用 |
二.输入框
功能: <input>用来定义一个输入区域 (单标签)
参数: type =" " 有以下属性
| 属性名 | 功能 |
|---|---|
| text | 文本域 |
| password | 密码域(输入的密码显示为* 或 原点) |
| hidden | 隐藏域 (不会显示在页面中,传递重要数据或者不需要显示的数据) |
| radio | 单选按钮–同一组单选框需要设定同样的[name]值–[value] 传递的数据值–[checked]默认选中 |
| checkbox | 多选按钮—复选框的[name]值不能相同,除非数组.—[value]传递的数据值—checked默认选中 |
| file | 文件上传–提交方式必须是POST,并且[name]必须设置,file域不允许出现value属性,表单需要设置,enctype="multipart/form-data"使其不进行编码 |
| submit | 提交按钮 用于向服务器提交表单中的数据,数据会发送到 [action] 指定的地址 |
| reset | 重置按钮 重置整个表单,不是清空! |
| button | 普通按钮 [value] 必须指定此值 |
| number | 限定输入的是数字 |
| time | 限定输入的是时间格式 |
| 限定输入的是邮件格式 |
-
[ name ] 必须要设置, 给表单项 起个名字,作为数据的标识,只有设置了name属性的表单元素才能在提交时被传递他们的值.
-
[ value ] 为input 元素设定值
①text / password / hidden
定义输入框的初始值
②radio / checkbox
定义与输入相关联的值
③submit / reset /button
定义按钮的功能
-
[placeholder] 文本域未输入文字时,显示浅色的背景字
提供可描述的提示信息
-
[maxlength] 输入字符的最大长度
-
[minlength] 输入字符的最小长度
-
[ size ] 宽度, 可以设置 显示输入总长度
-
[ readonly] 只读
-
[ disabled] 禁用
-
[ max ] 输入的数值范围 最大值
-
[ min ] 输入的数值范围 最小值
三. 标签
<label></label>
-
为 input元素定义备注, 多用于 单选 / 多选时, 与input 组合使用
-
[for] 转向到 指定元素的id属性
-
label标签将单选或者多选按钮包起来,让 点其中的文字也可以选中选框
四. 下拉框 标签
<select></select>
[ name ] 下拉列表的数据标识
[ size ] 显示下拉个数
[ multiple] 下拉多选
五. 下拉选项
<option></option>
[ value ] 提交到服务器中的值
[ selected] 默认选中
六. 多行文本域
<textarea></textarea>
[ name ] 标识
[ cols ] 列数(宽度)
[ rows ] 行数(高度)
[ placeholder] 提供描述信息 背景字
[ maxlength ] 输入字符的最大长度
七. 按钮
<button></button>
[ type ]
submit 提交
reset 重置
button 自定义按钮
十, GET与POST的区别
GET 与 POST 的区别
- get会把所有数据显示到浏览器地址栏上,post是通过HTTP POST机制，所以不会显示。
- get传送数据量较小，一般不能大于2KB，post传送的数据量较大理论上不受限制。
- post比get相对安全一些，
- get通常传递不太重要的小量信息
HTTP请求
- HTTP协议是无状态协议,无状态是指浏览器和Web服务器之间不需要建立持久的连接，这意味着当一个客户端向服务器端发出请求，然后Web服务器返回响应，连接就被关闭了，在服务器端不保留连接的有关信息.
- 建立TCP连接—发送请求命令—浏览器发送请求头信息—服务器应答—服务器发送应答头信息—服务器向浏览器发送数据—服务器关闭TCP连接
十 一, 分帧 (HTML 框架)
解释: 就是把浏览器分成多个窗口来显示不同网页
- 大分帧:
<frameset></frameset>- 属性
- 与body有冲突,无法共存.
- [ cols ] 按列划分
- [ rows ] 按行划分
- 可以使用 %, 像素px , 使用*表示剩余部分
- frame 标签 单标签
- 将大分帧中分出的窗口加载内容
- [ src ] 加载指定的url内容
- [ name ] 页面标识
- [ frameborder ] 0/1 是否显示边框
- [ noresize ] 设置无法调整框架大小
- [ scrolling ] yes/no/auto 是否显示滚动条
- 属性
- 小分帧:
<ifarme>双标签- 可以与body共存
- [ src ] 内容来源地址
- [ name ] 标识
- [ width ] 宽度
- [ height] 高度
- [ frameborder ] 0/1 是否显示出框架的边框
- [ scrolling ] yes/no/auto 是否显示滚动条
十二, head内的功能标签
-
<title></title>标题 -
<base>基底网址标签 使得页面中的所有a标签 都在指定的模式下打开
[ href ] 规定了 之后a标签打开的网址都是在整个地址之后.
[ target ] 规定打开以什么样的窗口
<!-- 所有的网站头使用www.21cake.com 窗口打开模式为新窗口 --> <base href="http://www.21cake.com" target="_blank"> <!-- a标签 --> <a href="./goods-8.html"></a> -
**
<meta>元信息标签 ** (定义了与文档相关联的属性)
| 属性名 | 代码 |
|---|---|
| 字符集 | charset |
| 网页简介描述 | description |
| 关键字 | keywords |
| 重定向 | refresh |
<!-- 字符集万国码 -->
<meta charset="UTF-8">
<!-- description 描述,在搜索网页的时候显示在后面 -->
<meta description="则是一个Nb的网站">
<!-- keywords关键字 -->
<meta keywords="XDL,IT,种地">
<!-- 重定向: <meta http-equiv="refresh" countent="秒数; url='网址' "> -->
<meta http-equiv="refresh" counent="3;url='http://www.21cake.com' " >
<link>外链文件标签
| 属性功能 | 代码 |
|---|---|
| 导入文件的类型,例: stylesheet 告诉我们导入的是一个外部样式表 | rel=“stylesheet” |
| 地址 | href |
<!-- rel告诉我们导入的是一个 stylesheet外部样式表 href是地址-->
<link rel="stylesheet" href="./test.css">
<!-- 导入一个图标文件 -->
<link rel="stylesheet" href="./ico">
扫一扫
6703
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
