标签：标记 targe select tab span 规范 disabled 格式化 bsp
HTML 简述-HTML概念及作用
一、概述
1、HTML概念：（Hyper Text Markup Language），超文本标记语言。
超文本：比普通文本功能要强（能够展示图片、不同颜色或者粗细的文字、能展示按钮。。。）
语言：汉语、英语都属于语言，说白了就是一种表达方式、沟通方式。
标记：标签。
标记语言：语言是标签。
2、作用：能够展示丰富多彩的效果，用来设计网页的
HTML的语言规范
a)Html标签可以有属性，在开始标签里面添加，格式为：属性名=“属性值”。
例如：<font color=”red”>我们都是有理想的人</font>，那么内容展现出来的就是红色的。
b)Html可以包裹嵌套，但是不能交叉嵌套
<html>
<head>
<title> 这是标题 </title>
</head>
<body>
这是网页内容
</body>
</html>
HTML基本标签-字体标签
一、概述
A.标签格式
<font 属性名="属性值">内容</font>
可以通过font标签的属性来设置字体颜色、字体大小、字体类型等
B.三个属性作用
color 属性: 控制字体颜色可以是英文单词也可以是6位16进制数
size 属性: 控制字体大小,取值范围 1~7 超过则无效
face 属性: 控制字体类型,例如: 宋体、微软雅黑...
HTML基本标签-格式化标签
一、概述
A.标签格式
<br/>
<p align = "center"> </p>
<h1> </h1>
<!-- 注释内容 -->
B.属性
p标签有 align 属性
标题标签有 h1 ~ h6 取值,字体依次减小
二、注意事项
A.换行标签用<br/>表示：每一个<br/>表示换一行，可以多个一起使用
B.段落标签用一组<p>段落内容</p>标签表示，页面展示的时候段落前后各有一个空行。<p></p>标签还有一个常用的属性：
align属性：取值有：
left：表示居左显示，也是默认的。
center：表示居中显示。
right：表示居右显示。
C.标题标签用一组<h1></h1>标签，有h1~h6可选，其中h1标签表示字体最大，h6最小。字体会默认加粗，换行
D.空格标签用 表示。浏览器会把代码中的多个空格合并成一个。
E.html中的注释使用<!—注释内容-->表示，浏览器不会把注释内容显示到页面上，但是可以在源代码中看到。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>格式化标签</title>
</head>
<body>
<!-- 这是毛爷爷老人家的诗 -->
<h1>《沁园春·长沙》</h1>
<h2>现代诗人 毛ZE东</h2>
<h3>字 润之</h3> 独立寒秋，湘江北去，橘子洲头。
<br />
<br /> 看万山红遍，层林尽染；漫江碧透，百舸争流。
<br /> 鹰击长空，鱼翔 浅底,万类霜天竞自由。
<p> 怅寥廓，问苍茫大地，谁主沉浮?</p>
<p algin="center">携来百侣曾游,忆往昔峥嵘岁月稠。</p>
<p align="right">恰同学少年，风华正茂；</p>
<p align="left">书生意气，挥斥方遒。</p>
<p>指点江山，激扬文字，粪土当年万户侯.</p>
曾记否，到中流击水，浪遏飞舟?
</body>
</html>
HTML基本标签-图片标签
一、概述
A.标签格式
<img src="" width="" height="" />
B.属性
src 路径问题
width
heigth
alt
二、注意事项
A.必须属性 src 表示图片的路径
绝对路径:不提倡使用,从盘符开始
相对路径:推荐使用 要记住 ../ 的使用
外网路径:必须 http:// 开头
相对路径
在同一级目录下面
<img src="c_1.jpg">
<img src="./c_1.jpg">
在上一级目录当中
<img src="../img/c_1.jpg">
B.可选属性
width属性：表示图片宽度
height属性：表示图片的高度
说明：宽度和高度的单位默认是 px（像素）也可以使用 百分比 表示
如果使用百分比，那么表示占父标签的百分之几，是动态可变的。如果是直接使用多少px，那么宽高是固定的。
alt属性：代替图片的文本，当图片没加载出来时会显示该属性的属性值。
HTML基本标签-列表标签
一、概述
A.列表标签
a.有序列表 ol 列表项 li
b.无序列表 ul 列表项 li
B.type属性
type="1" 1,2,3,4...
type="a" a,b,c,d...
type="A" A,B,C,D...
type="i" i,ii,iii,iv...
type="I" I,II,III,IV...
type="disc" 默认值,实心圆
type="cicle" 空心圆
type="square" 实心方块
HTML基本标签-超链接标签
一、概述
A.超链接标签的格式
<a href="http:\\www.baidu.com"> 百度一下</a>
B.相关属性
href属性 以及路径问题
target属性
HTML基本标签-表格标签（一）
一、概述
A.定义表格标签 <table> </table>
B.定义行标签 <tr> </tr>
C.定义单元格标签 <td> </td>
A.关于 table的几个属性
border 边框的粗细
bordercolor 边框的颜色
width 表格宽度的百分比或者像素
cellspacing 边框的间隙宽度.设置为0px去掉间隙
B.表头标签 <th> </th>
里面的字体默认为 居中加粗 这里是和<td>标签的区别
A.合并单元格两个属性
a.合并行,使用在<td>上面的属性 rowspan
b.合并列,使用在<td>上面的属性 colspan
B.实现步骤:
a.确定合并几个单元格,合并行还是合并列
b.保留第一个单元格位置.使用合并属性
c.删除掉不需要的单元格.
C.注意事项
如果遇到复制的单元格合并，先去拆分成简单的合并,多次合并单元格完成
HTML基本标签-块标签
一、概述
A.块标签的分类
a. <div> </div> 块级块标签
b. <span> </span> 行级块标签
B.两种快标签的区别
a. div 用于大量数据的展示,默认独占一行，会自动换行
b. span 用于少量数据的展示,默认有多大空间就占用多大空间,不会自动换行
HTML基本标签-表单的介绍
一、概述
表单标签的作用:
把用户输入的数据提交到后台服务器，是前台页面跟服务器之间的桥梁，是web程序的入口
A.表单的基本操作步骤
a.定义一个表单
<form> 表单内容 </form>
b.定义表单输入项
<input /> 表单项
<select> 下拉列表项
<textarea> 文本域
B.注意事项
a.任何一个表单项都有name属性,（button除外）否则数据无法提交到服务器，表单也就没有意义。
b.单选按钮和复选按钮想在同一组，就需要有相同的name属性，默认选中使用 checked 属性
c.携带参数格式是: ?参数名1=参数值1&参数名2=参数值2&参数名3=参数值3... (注意有个问号)
d.value属性表示值用户输入的值或者默认值。对于单选按钮和复选框来说 还必须要有不同的value值，因为无法输入只能选择。
详细代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
姓名:<input type="text" name="username" /><br />
密码:<input type="text" name="password" value="123"/><br />
<!--
单选按钮,男女只能选择一个,需要达到互斥效果,只能放在同一组
如果设置 name 属性相同的时候,就在同一组当中显示.
如果设置 checked="checked" 表示默认选中
-->
性别:<input type="radio" name="sex" value="man" checked="checked" />男
<input type="radio" name="sex" value="woman" />女<br />
<!--
submit表示提交按钮,会把表单中的数据提交到服务器当中.
当数据提交之后.后面会有 ?参数名1=参数值1&参数名2=参数值2&参数名3=参数值3...
例如: 参数名 就是 input的name属性,而参数值 是 input的value属性
如果我们填充完毕数据之后,提交的格式就是 ?username=薇恩&password=123&sex=woman
-->
<input type="submit" value="注册">
</form>
</body>
</html>
具体代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
<!--
复选框：如果在一组，使用的name属性必须一样
如果想要区分服务器数据，value属性必须有，并且不能相同。
默认选中使用 checked属性
-->
爱好 ：<input type="checkbox" name="hobby" value="code" />编程
<input type="checkbox" name="hobby" value="running" />跑步
<input type="checkbox" name="hobby" value="swimming" />游泳
<!-- 复选框 -->
<input type="file" name="image" /> <br />
<input type="submit" value="注册" />
<!-- 重置按钮，点击会恢复到 默认的状态 -->
<input type="reset" value="重置" />
<!-- 普通按钮,需要和js结合使用 -->
<input type="button" id="button" value="这是一个按钮" />
<!-- 隐藏域，如果想向服务器提交数据，但是又不想用户看到，那么就可以使用隐藏域 -->
<input type="hidden" name="hidded" id="hidded" value="你是看不到的哟！" />
<!-- 定义图片式提交按钮 -->
<input type="image" name="imagebutton" src="c_1.jpg" width="100px" height="100px" />
</form>
</body>
</html>
A. radonly 属性
a.只读属性
b.设置方式 readonly="readonly"
c.不能更改,可以提交
B. disabled 属性
a.不可用属性
b.设置方式 disabled="disabled"
c.不能更改,也不可以提交
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
<!-- readonly="readonly" 表示只读不可写,但是数据可以被提交到服务器 -->
姓名：<input type="text" name="username" id="username" value="赵信" readonly="readonly" /> <br />
密码: <input type="password" name="password" /><br />
<!-- disabled="disabled" 表示不可用,数据也不会提交到服务器 -->
别名: <input type="text" name="othername" id="othername" value="菊花" disabled="disabled" /><br />
<input type="submit" value="注册" />
</form>
</body>
</html>
下拉表格标签格式
<select name="province">
<option value="hubei">湖北</option>
</select>
默认选中设置 selected="selected"
设置多选操作 multiple="multiple"
如果多选操作：
1.可以按着 Ctrl键 + 鼠标左键 选择
2.可以点中选项之后，拖动选择
文本域标签的格式
<textarea name=""> </textarea>
文本域和文本框的区别
a.文本框不能换行，文本域可以换行
b.文本框参数值是value属性，文本域参数值是标签的内容体
对于form表单两个重要的属性 action属性 和 method属性
A. action 属性
a.数据提交位置
1. 默认提交到本页
2. 本机内网路径（相对路径和绝对路径）
3. 互联网路径（http://www.baidu.com/xxx）
b.action路径问题
1. 使用外网路径的很少，因为外网网站是别人做的，你也不知道要提交什么参数
2. 一般是提交到自己的web页面或者服务器地址，分为相对路径和绝对路径，推荐使用相对路径
B. method 属性
a.数据提交方式
1. 默认为 get 方式
2. 可以采用 post 方式
b.两种方式的区别
1. get请求参数显示在地址栏上，post提交数据在请求体里面
2. get提交数据不安全，post提交数据相对安全
3. get请求只能携带少量的数据，post请求能够携带大量的数据，所以文件上传使用post请求
HTML基本标签-URL编码的简述及使用原理（了解）
一、概述
A. 为什么有URL编码?
当表单使用 get 请求的时候,参数也是在地址栏传输的.浏览器会对传输的 中文 数据进行编码。
如果提交的参数当中携带了 & 符号。那么浏览器肯定会对&符号进行编码。
如果不编码可能导致数据不完全或者错误，使用IE浏览器测试吧。
B. 例如:
原文: 我&你,心连心
结果: ?username=%E6%88%91%26%E4%BD%A0%EF%BC%8C%E5%BF%83%E8%BF%9E%E5%BF%83
将数据“你好”转换为URL编码的过程
【1】 你好，进行普通的编码,编码成字节数组。（使用的是当前的页面规定的字符集，例如 utf-8 ）
【2】字节数组中的每一个元素，都会从10进制，转换为16进制
【3】把已经转换为16进制的字节数组，以%进行拼接。拼接出来的字符串，就是URL编码后的结果
标签：标记 targe select tab span 规范 disabled 格式化 bsp
原文地址：https://www.cnblogs.com/wangjintao-0623/p/9127408.html
