标签：浏览器 请求 标签 单元格 基础 表单 HTML 属性
HTML基础
01.HTML基础
什么是HTML
HTML是超文本标记语言,专门在浏览器编译与执行的语言
1.可以加入图片,视频,音频等(超越文本限制)
2.可以和世界各地主机进行文件连接(超级链接文本)
常用浏览器
谷歌,火狐,EDGE,欧朋,Safari...
Web标准
W3C组织(万维网联盟)和其他标准化组织制定
使开发更加标准,统一
Web标准的构成:结构(HTML)、表现(CSS)、和行为(JavaScript)
相当于鸟的骨架,羽毛和行为
开发最佳方案：结构、表现、行为相分离
02.语法规范
基本语法
1.HTML编程语言中所有命令都是声明在标签中,比如<br>
2.HTML编程语言中所有命令都是预先定义好，不允许开发人员自行创建新的命令
3.HTML编程语言中所有命令不区分英文字母大小写，比如<BR> <br> <Br> 都是合法命令
4.HTML编程语言中命令开发时主要通过对命令中属性进行赋值实现开发目的,属性赋值时内容可以包含一个""中，也可以包含在'',也可以省略双引号与单引号，此时属性之间必须采用空格进行隔离
<input type="text" name="one"/>
<input type='text' name='one'/>
<input type=text name=one/>
5.HTML编程语言中命令根据书写方式分为：双目标签命令与单目标签命令
6.双目标签命令书写命令分别出现在开始标签与结束标签，比如 <tr></tr>
双目标签命令在书写时结束标签是不能省略的,比如<tr>,由于没有书写结束标签因此是一个非法命令
7.单目标签命令书写命令出现一个标签之内，比如：<br/>
单目标签命令用于表示结束"/"可以省略不写，比如 <br/>, <br> 这两个都是合法单目标签命令
标签关系
双标签可以分为两类：包含关系和并列关系
包含关系(父子关系)
<head>
<title></title>
</head>
并列关系(兄弟关系)
<head></head>
<body></body>
03.基本结构标签
第一个HTML网页
<html>
<head>
<title>Title</title>
</head>
<body>
123456
</body>
</html>
| 标签名 | 元素类型 | 定义 | 说明 |
|---|---|---|---|
| <html></html> | 块级元素 | HTML标签 | 是最大的标签,称为根标签 |
| <head></head> | 块级元素 | 文档的头部 | 注意head标签中必须要设置title标签 |
| <title></title> | 无 | 文档的标题 | 让页面有一个网页标题 |
| <body></body> | 块级元素 | 文档的主体 | 元素包含文档的所有内容,基本都是放到body里的 |
04.网页开发工具
Vscode,HBuilderxX,webstorm...
开发工具自动生成标签
| 标签名 | 定义 | 说明 |
|---|---|---|
| 文档类型声明标签 | 不属于HTML标签,说明当前页面采取的是html5来显示网页 | |
| 英文网页 | 声明网页为英文网页 | |
| 中文网页 | 声明网页为中文网页 | |
| 字符集 | 规定HTML文档该使用哪种字符集 |
05.常用标签
标题标签=块级元素
<!-- 作为标题使用,一个标题独占一行 -->
<h1>一级标签</h1>
...
<h6>六级标签</h6>
段落标签=块级元素
<!-- 另起一个段落,有较大的空隙 -->
<p>段落标签</p>
换行标签=标记
<!-- 单标签 -->
<!-- 强制换行,没有较大的空隙 -->
换行<br />单标签
文本标签=行内元素
| 语义 | 标签写法一 | 标签写法二 |
|---|---|---|
| 加粗 | <b></b> | <strong></strong> |
| 倾斜 | <i></i> | <em></em> |
| 删除线 | <s></s> | <del></del> |
| 下划线 | <u></u> | <ins></ins> |
div标签=块级元素
<!--大盒子-->
<!--div是典型的块级元素:表示独占一行-->
<div>块级元素</div>
span标签=行内元素
<!--小盒子-->
<!--span是典型的行内元素:表示一行内可以存在多个span标签-->
<span></span>
图像标签=行内元素
<!-- 单标签 -->
<!--src是必须属性，用于指定图像文件的路径和文件名-->
<img src="img.jpg" />
<img src="img.jpg" alt="图片错误时显示文本" title="鼠标悬浮提示文本" width="500" border="15"/>
<!--宽度和高度设置一个即可-->
| 属性 | 属性值 | 说明 |
|---|---|---|
| scr | 指定图片路径 | 必须属性 |
| alt | 文本 | 替换文本,当图像不能正常显示时显示文字 |
| title | 文本 | 提示文本,将鼠标放到图像上显示文字 |
| width | 像素 | 宽度 |
| heigth | 像素 | 高度 |
| border | 像素 | 边框粗细 |
超链接标签=行内元素
<!-- 单标签 -->
<!--href是必须属性，用于指定连接地址-->
<a href="http://www.baidu.com">百度</a>
<a href="#" target="目标窗口的弹出方式">###</a>
链接方式:
1.外部链接
<a href="http://www.baidu.com">百度</a>
2.内部链接
<a href="内部链接.html">内部链接</a>
3.空链接
<a href="#">空链接</a>
4.下载链接:zip或者exe文件...
<a href="xxx.zip">下载链接</a>
5.网页元素链接:图片,视频,音频...
<a href="http://www.baidu.com"><img src="img.jpg"/></a>
6.锚点链接:同一页面的快速定位
1.<a href="#two">第二季</a>
2.<h3 id="two">第二季介绍<h3>
| 属性 | 作用 |
|---|---|
| herf | 必须属性:用于指定链接目标的url,具有超链接的功能 |
| target | 用于指定链接页面的打开方式:_self为当前页面打开,_blank为新窗口中打开 |
06.注释和特殊字符
注释
<!--注释语句--> ctil+/
特殊字符
必须记住,其余查阅文档
  制表符
空格
< 小于号
> 大于号
07.表格标签
表格标签=块级元素
<table align="center" cellspacing="1" cellpadding="1" border="1" width="60%">
<tr>
<th>表头单元格</th>
<th>表头单元格</th>
<th>表头单元格</th>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
表格属性
cellpadding cell:单元格 padding:内边距 ==>规定的是单元格与单元格中的内容的边距
cellspacing cell:单元格 spacing:空间 ==>规定的是单元格与单元格的边距
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | center=居中;left=靠左;right=靠右 | 规定表格对齐方式,默认左对齐 |
| border | "" | 规定表格单元边框,默认无边框 |
| cellpadding | 像素值 | 规定单元格边沿与其内容之间的空白,默认1像素 |
| cellspacing | 像素值 | 规定单元格之间的空白,默认2像素 |
| width | 像素值或百分比 | 规定表格的宽度 |
表格结构
<thead></thead>:用于定义表格的头部
<tbody></tbody>:用于定义表格的主体
(重点)合并单元格
跨行合并:rowspan="合并单元格的个数" --->最上侧单元格作为目标单元格
跨列合并:colspan="合并单元格的个数" --->最左侧单元格作为目标单元格
<table align="center" border="1" cellspacing="0" width="60%" height="260px">
<tr>
<td></td>
<td colspan="2"></td><!-- colspan跨列合并-->
<!-- <td></td> 被合并的代码-->
</tr>
<tr>
<td rowspan="2"></td><!-- rowspan跨行合并-->
<td></td>
<td></td>
</tr>
<tr>
<!-- <td></td> 被合并的代码-->
<td></td>
<td></td>
</tr>
</table>
合并三部曲
1.确定跨行还是跨列
2.找到目标单元格,比如<td colspan= "2" ></td>
3.删除多余单元格
08.列表标签
无序列表=块级元素
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
有序列表=块级元素
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
自定义列表=块级元素
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>联系我们</dd>
</dl>
09.表单标签
收集用户信息
组成结构
⭐表单域
表单控件:表单元素
提示信息
基本语法
<form action="url"地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 将信息提交的地址信息 |
| method | get/post | 表单数据的提交方式:post/或get |
| name | 名称 | 用于指定表单的名称,以区分一个页面中的多个表单域 |
get提交显示在地址栏=不安全,post提交显示在后台=安全
表单元素=行内元素
作用:用于收集用户信息
<input type="属性值" />
单标签
type属性设置不同的属性值用来指定不同的空间类型
| 属性值 | 描述 |
|---|---|
| button | 可点击按钮(通过JS启动脚本) |
| checkbox | 复选框 |
| flie | 输入字段和浏览按钮,供文件上传 |
| hidden | 隐藏输入字段 |
| image | 图像形式的提交按钮 |
| password | 密码字段,密码字段中字符被掩码 |
| radio | 单选按钮 |
| reset | 重置按钮,清空表单中所有数据 |
| submit | 提交按钮,表单数据上传服务器 |
| text | 单号的输入字段,用户可在其中输入文本,默认宽度20字符 |
<form action="#" method="get">
<!-- text 文本框 -->
用户名: <input type="text" name="username" value="请输入用户名" maxlength="6"><br>
<!-- password 密码框 -->
密码: <input type="password" name="pwd" ><br>
<!-- radio 单选按钮 -->
<!-- checked="checked"是默认选中的意思 -->
性别:男<input type="radio" name="sex" value="男">
女<input type="radio" name="sex" value="女">
人妖<input type="radio" name="sex" value="人妖" checked="checked"><br>
<!-- checkbox 复选框 -->
爱好:
吃饭<input type="checkbox" name="hobby" value="吃饭">
睡觉<input type="checkbox" name="hobby">
打豆豆<input type="checkbox" name="hobby" checked="checked"><br>
<!-- 点击了提交按钮,可以把"表单域form"里面的表单元素"里面的值"提交给后台服务器 -->
<input type="submit" value="免费注册">
<!-- 重置按钮 -->
<input type="reset" value="重新填写">
<!-- 普通按钮 button 后期结合js 搭配使用-->
<input type="button" value="获取短信验证码"> <br>
<!-- 文件域 使用场景 上传文件 上传头像 -->
上传头像:<input type="file" >
</form>
表单属性
| 属性 | 属性值 | 描述 |
|---|---|---|
| name | 由用户定义 | input元素的名称 |
| value | 由用户定义 | input元素的值 |
| checked | checked | input元素首次加载时应当被选中(单选和复选框可以设置) |
| maxlength | 正整数 | 输入字段中字符的最大长度(使用较少) |
⭐name是提交数据的必选项,所以一般要提交数据的表单元素必写name属性,不然数据无法提交
要求单选按钮和复选框要有相同的name值
label作用域控件
label标签绑定一个表单元素的id,可以扩大点击作用域,
当点击label绑定的表单元素的"提示信息"时,会自动对应到表单元素上
作用:增加用户体验
<form action="#">
<!-- 文本 -->
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
<!-- 单选框 -->
<input type="radio" name="sex" id="female">
<label for="female">男</label>
<input type="radio" name="sex" id="male">
<label for="male" id="male">女</label>
</form>
select下拉框控件
多个选项选择
在<option>中定义selected="selected"时,当前即为默认选中项
<form action="#">
籍贯:
<select name="#">
<option>山东</option>
<option>北京</option>
<option>天津</option>
<option selected="selected">火星</option>
</select>
</form>
textarea文本域控件
特大号的文本框
cols是每行字符数
rows是的行数
<textarea rows="3" col="20">
文本内容
</textarea>
10.查阅文档
W3C
MDN
https://developer.mozilla.org/zh-CN/
补充内容:【作为服务端工程师必须背住的知识点】
01.浏览器发送请求三要素:
1.控制浏览器发送请求地址
2.控制浏览器发送请求采用请求方式
3.控制浏览器发送请求携带请求参数
02.控制浏览器发送请求地址:
1.超链接标签命令:
1)格式: <a href="请求地址">提示信息</a>
2)工作原理:超链接标签命令不会被浏览器自动执行。在用户使用鼠标单击超链接标签命令时，此时这个命令才会执行，执行要求浏览器立刻按照href属性地址发送请求
2.表单标签命令
1)格式:
<form action="请求地址">
<input type="submit"> <!--提交按钮-->
</form>
2)工作原理:表单标签命令不会被浏览器自动执行。在用户单击提交按钮时，此时表单标签命令被触发执行。执行时要求浏览器立刻按照action属性地址发送请求
03.控制浏览器发送请求采用请求方式:
1.请求方式：决定浏览器在发送请求时行为特征
2.浏览器可以选择请求方式：7种，目前为止只考虑【POST请求方式】和【GET请求方式】
3.GET请求方式:
1) 要求浏览器发送请求时，携带的【请求参数数量】不能超过4K，[百度输入字符限制]
2) 要求浏览器发送请求时，必须在浏览器地址栏上将【请求参数信息】展示出来
3) 要求浏览器发送请求时，必须将请求参数信息保存在Http请求协议包中【请求头】
4) 要求浏览器在接收到服务器返回的资源文件内容后，必须将资源文件内容保存在浏览器的缓存[泰山日出照片,呵呵呵]
4.POST请求方式：
1）要求浏览器发送请求时，可以携带任意数量的【请求参数】
2）要求浏览器发送请求时，必须在浏览器地址栏上隐藏请求参数信息
3）要求浏览器发送请求时，必须将请求参数信息保存在Http请求协议包中【请求体】
4）禁止浏览器将服务器返回资源文件内容进行保存【阅后即焚】[股票, 实时刷新啊, 不能缓存啊, 哈哈哈]
5.控制浏览器发送请求时采用GET请求方式
1.超链接标签命令在执行时，要求浏览器必须采用GET方式发送请求
2.表单标签存在一个method属性，通过这个属性可以要求浏览器采用对应请求方式发送请求
<form action="请求地址" method="get"></form> || <form action="请求地址" method="post"></form>
***method属性默认值是GET
<form action="请求地址"></form>---->当不写method属性时,浏览器以GET方式发送请求
6.控制浏览器发送请求时采用POST请求方式
<form method="post"></form>
403 Forbidden 拒接接受post请求
7.请求方式适用场景【面试】
1.考虑到POST请求方式，用户可以将【病毒文件内容】发送到服务器上进行攻击。
因此绝大多数门户级网站拒绝接收POST请求，日常开发过程绝大多数请求都是GET
2.在某些特殊场景下必须使用POST
1)文件上传，必须使用POST
2)发起登录验证请求，必须使用POST
3)索要服务器中实时变化数据时（股票价格，车票数量。。。），必须采用POST
04.控制浏览器发送请求携带请求参数:
1.请求参数作用:
比如用户通过浏览器访问服务端计算机动态资源文件Student.class
class Student{
public int add(int n1,int n2){
//请求处理
int sum = n1 + n2;
return sum;
}
}
Http服务器：
Student stu = new Student();
stu.add(?,?)//add方法运行时需要实参，需要由用户通过浏览器以请求参数方式提供
浏览器发送请求时需要携带调用方法需要实参（请求参数）
http://www.baidu.com?n1=100&n2=200 [n1=100&n2=200]就是浏览器发送请求参数
2.请求参数格式
浏览器发送请求时 请求地址?请求参数名1=值1&请求参数名2=值2
3.浏览器发送请求时携带的请求参数来源:
1).通过超链接标签命令指定请求参数
2).通过表单域标签命令指定请求参数
4.通过超链接标签命令指定请求参数
<a href="http://www.baidu.com?userName=mike&password=123">百度</a>
5.表单域标签命令:
1)一组声明在form标签内部的标签命令
2)提示用户填写对应的【请求参数内容】，用于提供相对灵活的请求参数内容
3)所有的表单域标签都拥有两个属性【name,value】
name属性声明【请求参数名】,value属性声明【请求参数内容】
<form action="http://www.baidu.com">
<input type="text" name="userName" value="mike"/>
<input type="submit">
</form>
当用户单击submit后，浏览器发送请求信息 http://www.baidu.com?userName=mike
6.表单域标签分类：
1）<input />
2）<select></select>
3）<textarea></textarea>
7.表单域标签value属性默认值
1)大多数表单域标签value属性默认值是空字符串 userName=''
2)对于radio与checkbox来说，value属性默认值'on'字符串
8.表单域标签作为请求参数条件
对于大多数表单域标签来说，只要同时满足一下两个条件，就可以作为请求参数
1)必须声明在form标签内部
2)必须声明name属性(相当于对象的属性名)
对于radio标签与checkbox标签来说在满足上述两个条件同时，还必须满足第三个条件
才可以作为请求参数，第三个条件radio与checkbox必须在【被选中】的情况下才可以作为请求
参数
如果表单域标签使用disabled来修饰时，失去作为请求参数条件
***readOnly与disabled区别：
readOnly：要求当前标签中value属性只能看但是不能被修改，readOnly不会影响表单域,标签作为请求参数条件
disabled：设置当前标签为不可用状态，此时标签中value属性内容不能被修改的.
disabled修饰的表单域标签是永远都不能作为请求参数标签：浏览器,请求,标签,单元格,基础,表单,HTML,属性 来源： https://www.cnblogs.com/klrss/p/15205079.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。