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编码后的结果
HTML
原文地址：https://www.cnblogs.com/wangjintao-0623/p/9127408.html