版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_37527943/article/details/85484404
导读
1.HTML简介
2.常用标签
HTML简介
html基本结构:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
根:html
head:头,主要放标题,编码,语言等属性
body:内容
元素:<标签 属性名='属性值' 属性名='属性值'>内容</标签>
常用标签
常用块级标签
内容独占一行
h1~h6:标题,一级~六级
p:段落
hr:水平线,<hr/>:如果标签没有内容,那么可以在开始标签快速结束,其他标签也是如此
列表:
ul:无序列表
ol:有序列表
li:列表项
定义描述列表:（相当于一个二级列表）
dl:定义列表
dt:描述标题
dd:具体描述
div:没有具体含义的块级元素,页面布局经常用到,div+css
常用行级标签
一行没有摆满,接着摆
a:超链接
属性:
（1）href:资源地址,可以外部资源也可以是本网站资源
外部资源:URL
内部资源:
相对路径,相对于当前页面
..:切换到上一级路径
.:当前页面所在的路径,默认就是,可以不写
和当前页面在同一个路径下,可以直接往下写,不同路径下需要切换
html01项目:
dir1:
first_page.html
second_page.html
dir3:
third_page.html
dir2:
tt.html
在first_page.html中,href访问second_page.html
second_page.html
在first_page.html中,访问third_page.html
dir3/third_page.html
在first_page.html中,访问tt.html
../dir2/tt.html
在third_page.html中,访问tt.html
../../dir2/tt.html
也可以直接从项目路径开始写
/工程名/具体路径
target: 指定资源打开的位置
_self（默认）,覆盖当前页面
_blank:新建一个标签页
img:图片标签(将图片放在超链接标签里，可以实现图片超链接)
src:图片的路径,参考超链接的路径
alt:提示文字,如果图片无法显示,则用文字替代,浏览器通过描述来了解图片的内容
span:没有具体语义的行级标签
意义:方便css修饰样式
br:换行
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的页面</title>
</head>
<body>
<h1>我是标题一</h1>
<p>我是一个段落</p>
<h2>我喜欢足球</h2>
<ul>
<li>巴塞罗那</li>
<li>利物浦</li>
<li>尤文图斯</li>
</ul>
<hr/>
<h2>我喜欢足球</h2>
<ol>
<li>巴塞罗那</li>
<li>利物浦</li>
<li>尤文图斯</li>
</ol>
<hr/>
<h2>我喜欢足球</h2>
<dl>
<dt>巴塞罗那</dt>
<dd>梅西</dd>
<dd>苏亚雷斯</dd>
<dt>利物浦</dt>
<dd>萨拉赫</dd>
<dd>范戴克</dd>
<dt>尤文图斯</dt>
<dd>罗纳尔多</dd>
<dd>迪巴拉</dd>
</dl>
<hr/>
<!--这是注释-->
<a href="http://www.baidu.com">（访问外网站资源）百度一下</a>
<a href="hala2.html" target="_blank">(访问本网站资源)第二个页面</a>
<img src="https://02.imgmini.eastday.com/mobile/20170510/20170510115831_cce7580dc873e800ada92a0e22b087a5_4.jpeg"
alt="Clark"
width="300px" height="100px">
</body>
</html>
Iframe内嵌标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page1</title>
</head>
<body>
<iframe src="hala2.html"
name="我的页面2"
scrolling="yes"
frameborder="1">
</iframe>
</body>
</html>
表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page1</title>
</head>
<body>
<!--cellspacing的作用是设置单元格之间的空隙-->
<table border="1px" cellspacing="0" width="200px" bgcolor="aqua">
<caption>我的歌单</caption>
<thead>
<tr>
<th>歌名</th>
<th>歌手</th>
<!--这里用<td>也可以-->
</tr>
</thead>
<tbody>
<tr>
<td>海阔天空</td>
<td>Byond</td>
</tr>
<tr>
<td>纸短情长</td>
<td>烟把儿</td>
</tr>
<tr>
<td>温柔</td>
<td rowspan="2">五月天</td>
</tr>
<tr>
<td>倔强</td>
</tr>
<tr>
<td>童话镇</td>
<td>陈一发</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">总计：5首歌曲</td>
</tr>
</tfoot>
</table>
</body>
</html>
表达颜色:
#rrggbb:每一个位16进制, 两位一个颜色,0~255
#rgb: 0~15
一部分有名字的内置颜色,red,green,yellow
表单标签
（1）action:表单提交地址,交给谁去处理,如果不指定，会默认交给表单页面所在的服务器
（2）method:提交方式, 主要post,get,默认是get
get方式:把请求的参数和值拼接到请求地址之后,
地址栏值会暴露出来,
值最多不能超过2KB
例子：https://www.baidu.com/s?wd=%E6%9F%AF%E5%8D%97&rsv_spt=1&rsv_iqid=0x9fea5bfb0000f1fb&issp=1&f=8&rsv_bp=0&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_sug3=8&rsv_sug1=8&rsv_sug7=101
post方式:把请求的内容放在请求正文传递过去,
不会改变URL,值不会暴露
基本可以认为无上限,除非做特定限制
例子：http://cloud2.oracleoaec.com/course/54/player?chapter=2891
搜索,get
登录,注册,post
（3）enctype:编码
application/x-www-form-urlencoded:默认的编码方式，将表单控件中的值处理成URL编码方式。
mutipart/form-data:以二进制流的方式来处理表单数据。
text/plain:当表单的action属性值为 mailto:URL 的形式时使用。
input表单元素:
【属性】
type:指定类型
name:用来指定表单元素的名字,提交表单后,通过元素名来获取对应的值
value:提交的值,和name是一套的，比如text类型，就是用户输入的内容,可以作为属性写默认值
disable:不可用
maxlength:最多允许输入的字符个数
readonly:只读
size:可视化字符个数
单行文本框:type->text
密码框:type->password
单选框:type->radio,
注意:如果多个单选框是一组,要使用同一个名字,
每个元素要给一个value
可以设置默认选中,checked
多选框:type->checkbox
注意点同单选框
隐藏域:type->hidden
不可见,只是用来携带数据给服务器
图片域:type->image
src:图片路径
可以点击图片完成提交
文件上传域:type->file
注意enctype的值,要改为二进制流的形式
提交按钮:type->submit,点击时提交表单给服务器处理程序
value:指定按钮上显示的文本内容
重置按钮:type->reset,点击时,所有的表单元素值恢复为默认值
普通按钮:type->button,点击默认无行为,可以指定行为
button:按钮,
比input的按钮更强大
input显示的只能是普通的文本
button按钮上可以显示图片,文字,格式化的文字
【属性】name ,type disable
<button type="submit|reset|button">按钮上显示的内容</button>
select:列表框
【属性】
name
size:可见行数
multiple:多选,默认是单选
option:一个项
value
disabled:禁用
selected:默认选中
optgroup:把option分组
disabled:把一组禁用
label:组名称
<select name="" size="" multiple>
<option value="" selected>展示内容</option>
<option value="" selected>展示内容</option>
<option value="" selected>展示内容</option>
...
</select>
select:下拉框,与列表框大致相同
size是1,不能使用mutiple
<select name="">
<option value="" selected>展示内容</option>
<option value="" selected>展示内容</option>
<option value="" selected>展示内容</option>
...
</select>
textarea:多行文本框
cols:宽度
rows:高度
readonly:只读
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单demo</title>
</head>
<body>
<form action="" method="get">
名字：<input type="text" name="username" value="123"/><br/>
密码：<input type="password" name="password"/><br/>
<!--性别里的value作用是提交给服务器的-->
性别：<input type="radio" name="sex" value="male" checked/>男
<input type="radio" name="sex" value="female"/>女<br/>
爱好：<input type="checkbox" name="hobby" value="basketball"/>篮球
<input type="checkbox" name="hobby" value="football" checked/>足球
<input type="checkbox" name="hobby" value="tennis"/>网球<br/>
<input type="file" /><br/>
地点：
<select name="city">
<optgroup label="北方">
<option value="beijing" selected>北京</option>
</optgroup>
<optgroup label="南方">
<option value="shanghai" >上海</option>
<option value="hangzhou" >杭州</option>
</optgroup>
</select><br/>
<textarea name="ins" cols="60px" rows="5px">请介绍自己</textarea><br/>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</form>
</body>
</html>
