HTML语法
前言
这是听课复习和看别人的文章总结的东西，用来自己复习
1.html概念
-
html : hytpertext markup language 超文本标记语言，超链接（实现页面跳转）
- 标记也称标签，放在 < > 中
- 标记是英文单词或者缩写
hyper 超级 text 文本 markup 标记符号(标示计算机文档结构和显示、打印形式)
2,结构标准
<!doctype heml> //声明文档类型，有渲染引擎解析
<html> //跟标签
<head> //头部标签 里面的内容用来给浏览器/搜索引擎看的
<title> //标题标签 网页标题
</head>
<body> //主体标签，给用户、浏览者看的，网页内容，可以是文本、图片等
</body>
</html>
3.简单标签
有 <> 都叫标签，但是为了和以前学的内容相联系，方便记忆，后面就不叫标签了
3.1单标签
- 注释标签： ‘ctrl + /’
- 水平线标签：’
’
3.2双标签
双标签存在的类型，是需要一个结尾的
<>文本内容</>
<>文本内容</>
如果双标签没有结尾，那就会把后面所有的内容都格式化
如果双标签没有结尾，但是碰到了第二个同样的标签，第一个标签就会自动停止
3.3标签关系：
- 包含（嵌套）：
<head><title></title></head>父子关系 - 并列（平行）：
<head></head><body></body>兄弟姐妹关系
4.用的参数
这些参数可以用到其他的标签中，这样方便记忆
对齐：align left/center/right top/middle/bottom
颜色：color
5 注释
<!-- //注释开始
中间内容都会被注释掉
--> //注释结束
6 标题
<h>标题</h>
一个页面只能有一个 h1 ,h 取值为 h1 - h6
7 段落标签
<p align="right">段落内容</p>
英文：paragraph(段落) （可以看作是空行）
align : 设置段落格式 lift 左对齐 right 右对齐 center 居中对齐
特点：上下自动生成空白行
8 换行
文本内容<p>
特点：换行会产生一个空白行
文本内容<br>
特点：不会产生空白行，文本后面发生换行
9 文本格式化
注意只要含有文字的地方都可以用这地方的内容
-
加粗:
<strong>文字</strong>|<b></b>建议使用 strong -
倾斜：
<em>文字</em>|<i></i>建议使用 em -
删除线：
<del>文字</del>|<s><s/>建议使用 del -
下划线：
<ins>文字</ins>|<u></u>建议使用 ins -
居中 ：
<center>居中文字</center>文字整行居中设置 -
文字：
<font face = "微软雅黑" color = "red" size="7">文本内容</font>早期做网站用color : 可以用颜色的英文名称，可以可以用颜色的16进制表示
size : 只能用1-7，高于 7 的显示出来都一样
对齐 ：
双标签中间的文本被格式化，只要在有文本，给他添加标签就可以了，但是必须要在同一个语义块内
-
建议使用的更具有语义化，可读性更强
10 图片标签
<img src=" " alt="" title= "提示文本" width="" height=""/ >
-
img (image : 图片)
-
src: 图片的来源路径，必须要有的 （source：来源）
-
alt: 图片加载失败显示的信息 （alternative : 交换、交替）
-
title: 鼠标停留在图片上显示的内容
-
width ,height :图片的宽和高。（如果不设置就是默认大小，只设置一个，就会按照等比例缩放）
11 a 标签(超链接)
<a href="" title="" target=""> 文本内容 </a>
-
href ：存放目标页面的 url （http references）
-
title : 鼠标放在超链接上显示的内容
-
target : 页面默认打开的方式。（_self 默认原页面打开 _black 打开一个新的页面）
-
优化写法：让页面中所有的标签在点击的时候都打开新的窗口
<head> <base target="_blank"> </head>
12 空链接
当不知道跳转链接时候使用 <a herf="#">空链</a>
13 路径
- 相对路径： 相对于文件本身的路径
- 文件（html文件）和图片在一个文件夹内： 直接写文件名称
- 如果图片在上一级目录里 ： src 就是
文件夹名称 + / +图片名称 - 如果图片在下一级目录里 ： src 就是
../ + 图片名称
- 绝对路径
- 电脑上： 从电脑磁盘符开始 如
F:\document\xuexi\mage.png - 互联网：
http://...
- 电脑上： 从电脑磁盘符开始 如
14 特殊字符
| 特殊字符 | 描述 | 字符代码 |
|---|---|---|
| 空格符 |   | |
| 小于号 | <（little) | < |
| 大于号 | >(great) | > |
| 和号 | & | & |
| 人民币 | ￥ | &ren |
| 版权 | © | © |
| 注册商标 | ® | ® |
| 摄氏度 | ° | ° |
| 正负号 | ± | ± |
| 乘号 | × | time |
| 除号 | ÷ | devide |
| 上标（幂） | ² | &sup 2 |
中级
15 列表标签
-
无序列表
<url type="disc"> <li></li> <li></li> </url> type 有三个取值： square 样式为小方块 circle 样式为空心小圆点 disc 样式是实心小圆点（默认） -
有序列表
<ol type="1" start="3"> <li></li> <li></li> </ol> type 能更改标号样式（1、a、A等），start 设置从哪一个值开始往后排序的 -
定义列表
<dl> <dt>小标题</dt> <dd>解释标题</dd> <dd>解释标题</dd> </dl>
16 音乐标签
<embed src="" hidden="true" />
hidden 设置为 true时，隐藏音乐播放器，比 audio 标签多一块黑色的背景
17 页面自动滚动
<marquee height="80" weight="200" bgcolor="red" behavior="alternate" direction="down">内容</marquee>
-
内容：可以是文字图片，也可以是程序生成的文字图片
-
behavior : 设置滚动的方式
-
alternate : 表示在两端之间来回滚动
-
scroll :表示从一端滚动到另一端，会重复
-
slide : 表示从一端滚动到另一端，不会重复
-
-
direction : 设置滚动方向
- down 表示向下滚动 left 向左滚动 right 向左 up 向上
-
loop : 表示滚动次数 ，-1 无限滚动
-
scrollamout : 设置滚动速度，值越大滚动的越快
-
设置背景音乐
高级标签
18 meta 标签
-
编码格式：在 mata 标签里设置 charset ,
英文：ascII ansi 日文韩文：Unicode 中文：gbk gbk2312 台湾：big5(繁体)
utf-8 基本能解析所有的国家的语言 ：
<meta charset="utf-8"> -
关键字 ： 给搜索引擎看，主用于SEO
<meta name="keywords" content="阳光,帅气">（逗号要用英文的） -
网页描述：网页搜索时会出现的描述
<meta name="description" content="向大佬低头的方式"> -
网页重定向：
<meta http-equiv = "refresh" content= "5";http://baidu.com>过5秒转到设定的页面不常用
-
告诉搜素引擎
<meta name="authour" content="姓名"> -
robots
<meta name="robots" content="all/none/index/noindex/follow/nofollow">all : 文件能被检索，且页面上的链接可以被查询
none : 文件将不被检索，且以页面上的链接不被查询
index : 文件将被检索
noindex : 文件将不被检索，但页面上的链接可以被查询
follow ：页面上的链接可以被查询
nofollow ：文件不被检索，但是页面上的链接可以被查询
19 link 标签
- 链接外部样式表文件
<link rel="stylesheet" href="1.css"> - 设置网站 icon :
meta rel="icon" href="xxx.png"
20 表格标签
<table border="1"(其他参数参见边框参数) >
<tr><td align="对齐方式">数据<td>数据
<tr><td align="对齐方式">数据<td>数据
</tr>
</table>
也可以这样设置
<tr> //第1行
<td> 文本</td> //第1行第1列
<td>文本</td> //第1行第2列
</tr>
<tr> // 第2行
<td>文本</td> //第2行第1列
//这个是完整个表格结构
表格标题
<caption>表格名称</caption>
<thead>
表头
<th>列标题</th> //th会将内容加粗，居中显示
</thead>
<tbody>表格内容</tbody>
<tfoot></tfoot>
-
英文：
table 表格 boder 边框 align 排整齐 tr 表格行 table row td 表格数据 table data （准确解释应该是列，我这里理解成单个的数据单元格） -
参数：
- 边框参数
table boder=“0” 的参数
bodercolor=“red”
width=“100”
height=“100”
cellspacing=“5” 单元格之前的距离
cellpadding=“2” 内容和边框的距离
align=“center” 对齐方式
bgcolor=“orange”
-
行、列参数
整个是整行，整列设置参数
- 整行：
<tr center>可以让整行的数据进行 - 整列：
<td center>设置一个，整列就是集中 - 优先级：td > tr > table
- 整行：
-
单元格合并
<td colspan="n">: 表示合并多少列（行之间不合并）<tr rowspan="n">: 表示合并多少行（列之间不合并）关键是分析是要怎么合并的
-
细线表格
-
设置 border = 1的时候，其实单元格之间的线宽是2
设置思路： 设置表格背景色，然后再设置cellspacing=”1”
-
21 表单标签
1.表单控件
单选按钮 radio
复选框 checkbox
重置按钮 reset
多行文本框 textarea
单行文本框 text
密码框 password
下拉列表 select
提交按钮 submit
2.表单标记
<form name="表单名" action="url" method="post"> //这个必的
控件标记
</form>
-
参数
action : 提交数据到服务器上哪个网页进行后续处理（需要处理数据的网页）
method : 指定向服务器提交问题的方法，包括 post 或 get ,post 方法比较安全，省略不写，默认post
get 传输的数据量有限制
3.控件标记
<input
type="空间类型" //有时候，不用双引号也可以运行的出来
name="控件名称"
value="控件初始值" //初始值，向服务器传输的数据
size="控件初始宽度" //单行文本输入框，最多可以看见的字符宽度
maxlength=空间中最多输入的字符数
事件名="相应代码" （比如：onclick）
style="行内嵌CSS样式" //不同参数之间使用 ; 隔开
class="css类样式名"
>
-
样式表（Casscading Style Sheets , 层叠/级联样式表）
- 用于设置控件属性格式
- 行内嵌入css 样式表：
<标记 style="">
-
stytle固定用法
font-size:16 //字体大小
font-weight :
color :blue
text-align:right ； //文本对齐方式
οnclick=“if(this.value==“请在此输入姓名”) this.value’’ ”
4.文本框控件
<form name="表单名" action="" method="post">
用户名<input
type="text"
name="yhm"
size="20"
>
</form>
附加功能实现
1.实现框内 字体颜色 大小 对齐方式
style="font-size:6; text-align:left;color:red"
2.框内显示提示信息，单击以后，提示信息消失，可以输入内容
value="请输入用户名"
onclick="if(this.value=="请输入用户名") this.value'' "
3.在文本输入框后面显示提示信息，如果文本框非空，则提示信息会消失
onchange="if(this.value=='')"{jg.innerHTML='*用户名不能为空'}
else{jg.innerHTML=''} //什么意思不太懂？？？ 这个地方有问题的
记得在input标签后面添加
<span id="jg">*用户名不能为空</span> //span就是一个区域，一个块；两个空格式增加距离的
5.密码框控件
输入框控件，不显示输入的内容，显示的是小黑点
<form name="reg" action="" method="" >
密码<input
type="password"
name="mm"
value="123456" //框控件的默认值，如果删除，就是默认为空
size="6"
>
</form>
6.单选按钮控件
按下一个按钮，另一个按钮就会弹起来，按过以后不会取消
<input
type="radio" //默认选中，
name="xb" //
value="man" //向服务器传输的值,用户看不到这个
checked //有这个选项，那么这个就是默认选项，如果没有此项，那就不会出现选中项
> 男 //呈现给用户的名字
1.设置两个按钮，如果他们设置的 name 如果是不一样的，那么按下一个按钮以后，再按另一个，不会出现弹出来的情况
2.将展现给用户的男女换成小图片
将最后的 > 后面的文字”男” 改成插入图片
>男 -------》 <img src="图片路径“
7.复选框控件
多个按钮选项，可以同时按下好几个按钮
<intput
type="checkbox"
name="ah" //当有多个框需要同时选择的时候，需要这几个复选的框的名字是一样的
value="sport" //给服务器看的东西，用户看不到的，每个选框是不一样的
checked //有这个选项，那么这个就是默认选项，如果没有此项，那就不会出现选中项
>运动 //用户界面可以看到的东西
8.下拉列表控件
只能单元的
<select name="sheng" style > //识别标识用的
<option value="北京">北京</option> //往后台传输的
<option value="天津“selected>天津市</option> //selected 默认的
</select>
1.还有可以进行填写的，需要查找js
option 选项
9.列表框控件
可以多选的（按ctrl shift）
<select name="sheng" style="" size="5" multiple> //自己标识的
<option value="上海">上海</option> //value 是给服务器后台看的,很多时候是一样的，但是最好不一样
<optiom value="北京">北京</option>
10多行文本框 / 文本区域控件
<textarea name="标识的文字"></textarea cols="40" rows="6" onclick(可有可无的参数) > //6行40个字符宽度的多行文字区域
</textarea>
11.按钮控件
<form name="标识文字" method="get" action=""> //需要form结合提交
控件
<input type="reset" name="Reset" value="重填"> //重置但不是清除，充填在界面上能看到
<input type="sunmit" name="submit" value="提交"> //提交是显示在用户界面上的
<input type="button" name="close" value="关闭" onclick="window.close()">//关闭在界面上能看到
</form>
12.get方法提交和发送数据
<form name="" action="" method="get" > //action不写的话是传给自己。方法也是默认get
这个方法会把控件的内容显示在浏览器的地址输入栏中，过多的时候会显示不出来，由于所有的信息都会展现出来，所以这种方法是很不安全的
13.post方法提交和发送数据
<form name="" action="" method="post"> //action不写的话是传给自己
1.html 是静态网站，是不允许使用 post 方法的
2.如果要获得数据，可以使用 javascrip 去编程获取数据，还可以转为动态网站，所有的动态网站都接受静态代码
-
可以把 asp 动态模拟器放入网站文件夹，把网页的后缀改为 .asp ,然后打开
-
设置
action="text.asp"可以实现在本地创建一个 text.asp 文件来接收 post 传输给服务器的名称，但是需要在 text.asp 中编写代码，来实现接收数据//使用的是 vbs 脚本编程 <% //服务端代码，浏览器没有权利执行 //response 响应 request 请求 ，这是在服务端文件中编写，并在服务端中显示 value 的值 response.write request("控件中设置的 input 的 Value 的值")&”</p>“ //将得到的值给拆分开， kc=request("控件中设置的 input 的 value 的值") & ”</p>“ //split 将得到的值根据 ”，” 拆分开，k2中储存的就是拆分开的， kc2=split(kc,"," ) //循环遍历出 kc2,然后一个一个输出 for each x in kc2 response.write x & "<p>" //响应服务器给客户机发送数据 next //for 和 next 构成一个循环 %>
24 框架集
1.框架标记
-
创建框架中的每个子网页上网窗口
top.html （顶部的网页）
left.html （左边的网页）侧框架
mian.html
2.框架集
将前面所有的 html 文件都集中到一起
// rows 横向拆分框架集，上方占比20% border 指定边框厚度，值为0设置无边框
<frameset rows="20%,*" frameboder="yes" border="1" framespacing="0">
<frame src="top.html" scrolling="no" noresize> //noresize 禁止调节框架大小
//cols 纵向拆分框架集，左侧占20%
<frameset cols="20%,*" >
<frame src="left.html" scrolling="no" noresize > //scrolling=no是不显示滚动条
//name的值，可被超文本链接锚记的 target 属性引用，相当于该网页所在框架别名
<frame src="mian.html" name="rightframe">
</frameset>
</frameset>
-
改变框架内的页面显示
单击left.html的按钮，可在指定的框架中（框架集中那个 target 属性引用的 name ,就是那个网页所在框架）
//target 属性制定了所链接的文件出现在名称为 rightframe 的框架里 //这个是在 left.html 那个文件内部更改的，记得是在什么位置,改一个链接算一个链接 <a href="需要在指定框架内显示的网页，源网页" target="指定的框架的名称 rightframe"> 链接</a>-
target 的不同值代表的意思
rightframe : 你自己在框架子中设置的 name 的框架，这个是自己设置的
_blank : 空白页中打开
_self : 网页本身所在的框架中打开
_parent : 父框架集中打开
_top :在整个窗口中打开，凌驾于所有的框架之上
-
25 http 无状态
http 协议是无状态的，本次请求和上次请求无法判断是不是同一个人操作的，从而 http 本身不会记住“过去的”数据
26 Session
用于解决 http 无状态问题。一般被称为“会话控制”，浏览器在第一次访问服务器的时候，服务器会创建一个 session ,然后同是为该session 生成一个唯一的会话 sessionid
Session 存储特定用户会话所需的属性及配置信息，当用户在应用程序的 Web 页之间跳转时，存储在 Session 中的变量将不会丢失，而是在整个用户会话中一直存下去。当用户请求来自应用程序的 Web 页时，如果该用户还没有会话，则 Web 服务器将自动创建一个 Session 对象。当会话过期或者放弃后，服务器将终止该会话，session 是最常见的一个用法就是存储用户的首选项
session 需要百度实现原理，以后用的话
需百度答案
27 Cookie
有的时候也可以用其复数形式 Cookies ,指某些网站为了辨别用户身份、进行session 跟踪而储存在用户本地终端的数据（通常经过加密）
cookie 是由 Web 服务器保存在用户浏览器上的小文本文件，它包含有关用户信息。当 Web 服务器创建了 Cookies 后，只要在其有效期内，当用户访问同一个 Web 服务器时，浏览器首先检查本地的 Cookies ,并将其原样发送给 Web 服务器
查看 Cookies: Internet ---- 常规|浏览历史记录|设置----当前位置
Cookie 语法实现原理，需要百度 md5 加密存储
需百度答案
服务端代码 ： php aspx jsp cgi
客户端代码 : js vbs html
参考：
原文链接：https://blog.csdn.net/biyuhuaping/article/details/78211589
几种HTML结构的快速搭建
- html:xt + tab，过渡结构；
- html:xs + tab，严格结构；
- ! + tab，html5标签结构
，则 Web 服务器将自动创建一个 Session 对象。当会话过期或者放弃后，服务器将终止该会话，session 是最常见的一个用法就是存储用户的首选项
session 需要百度实现原理，以后用的话
需百度答案
27 Cookie
有的时候也可以用其复数形式 Cookies ,指某些网站为了辨别用户身份、进行session 跟踪而储存在用户本地终端的数据（通常经过加密）
cookie 是由 Web 服务器保存在用户浏览器上的小文本文件，它包含有关用户信息。当 Web 服务器创建了 Cookies 后，只要在其有效期内，当用户访问同一个 Web 服务器时，浏览器首先检查本地的 Cookies ,并将其原样发送给 Web 服务器
查看 Cookies: Internet ---- 常规|浏览历史记录|设置----当前位置
Cookie 语法实现原理，需要百度 md5 加密存储
需百度答案
服务端代码 ： php aspx jsp cgi
客户端代码 : js vbs html
参考：
原文链接：https://blog.csdn.net/biyuhuaping/article/details/78211589
几种HTML结构的快速搭建
- html:xt + tab，过渡结构；
- html:xs + tab，严格结构；
- ! + tab，html5标签结构
扫一扫
1968
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
