目录
HTML结构
一个HTML文件分为head和body两部分,主要内容在body里面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>热门活动页面</title>
</head>
<body>
</body>
</html>
<! DOCTYPE html>:文档声明,用来告诉浏览器当前的版本,不区分大小写,放在开头。
<title>:title标签的内容会作为搜索结果的超链接显示在标题栏
<meta charset="utf-8">:字符编码,utf-8
HTML注释
注释:<!--注释内容 -->,快捷键CTRL+/,注释内容不会显示在页面中,//和/* */在html里也是常用的注释,但只能用在js和CSS语言,不对HTML语言起作用
HTML转义字符
- <(<)
- >(>)
- ( )(空格)(html空格space无论多少个都只显示一个,想要多个空格只能使用转义字符)
- ' 表示单引号(' ')
- "双引号(" ")
- &与(&)
HTML基础标
一些基础常见标签:
标题标签:一级标题<h1></h1>,二级标题<h2></h2>...六级标题<h6></h6>
换行标签:<br />换行
横线标签<hr/>:横线
段落标签<p>:<p>段落内容</p>
span标签:<span> 用于对文档中的行内元素进行组合。
div标签:<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。
超链接标签:<a href=""></a>,""里填写跳转路径,#代表跳转本页面
图片标签:<img src="" alt="" title=" " />,src填写图片地址,alt填写图片未加载成功显示的内容,title填写鼠标悬停图片上方要显示的文字
音频标签:<audio src=""></audio>,音频,src填写地址
视频标签:<video src=""></video>,视频,src填写地址
长文本标签:<textarea></textarea>设置长文本
文本格式化标签:
左边的标签自带强调含义,优先使用左边
更多标签可参考其他网站:HTML 标签参考手册 (w3school.com.cn)
HTML列表
有序列表
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
type="1/A/a/I/i",无样式:style="list-style-type:none"
无序列表
<ul>
<li>第一项</li>
<li>第二项</li>
</ul>
圆点:style="list-style-type:disc",圆圈:style="list-style-type:circle",正方形:style="list-style-type:square",无样式:style="list-style-type:none"
定义列表
<dl>
<dt>标题</dt>
<dd>详情</dd>
</dl>
HTML表格
<table border="1px" cellspacing="0px" >
<thead>
<tr>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>总计</td>
<td colspan="3"></td>
</tr>
</tbody>
</table>
<caption>
:设置表格标题;<thead>
:页眉,表示表格头部,用来放头部的tr,th;<tbody>
:表示表格主要内容;<tfoot>
:表示表格底部;- tr: 是 table row 的缩写,表示表格的一行。
- td:是 table data 的缩写,表示表格的数据单元格。
- th:是 table header的缩写,表示表格的表头单元格,th和theader有区别。
thead和tbody不能合并,删除单元格是指把后面被合并的<tr>或<td>删除
border="1px" cellspacing="0px" 可添加外边框取消内边框(html5里这些行内属性都过时了,建议用css修改样式)
HTML表单
<form action="#" method="">
<label>电子邮箱:<input type="email"/></label><br/>
<label>设置密码:<input type="password"/></label><br/>
<label>真实姓名:<input type="text"/></label><br>
性别:<input type="radio" name="sex" checked/>男
<input type="radio" name="sex"/> 女<br/>
生日:<select name="" id="">
<option>1999</option>
<option>2000</option>
</select>
年
<select>
<option>1</option>
<option>2</option>
</select>
月
<select name="" id="">
<option>1</option>
<option>2</option>
</select>
日<br/>
<img src=""/><a href="#">看不清换一张?</a><br/>
<p>验证:<input type="text"/></p>
<input type="image" src=""/>
</form>
action:跳转页面路径
method:get/post
input类型:
文本框 type="text";
- 将表单的数据提交到服务器必须要为表单项指定一个name属性;
- disabled属性:设置该文本框不可输入任何内容;
密码框:type="password";
label标签:<label></label>:绑定文字和表单控件的关系,增大表单控件的点击范围
单选框:type="radio";
- name属性:将单选按钮进行分组,name相同则为同一组按钮,相同name下单选生效;
- checked属性:默认选中该选项;
多选框:type="checkbox";
- value属性代表该选项的值;
- name属性代表该选项的名称,名称要相同;
- checked属性:设置默认选中项;
邮箱框:type="email"
文件:type="file"
日期:type="date":可以设置min等
下拉列表
- select标签创建下拉列表,需要name
- option标签添加列表项,不需要name
- name属性指定给select标签,value属性指定给option
- selected属性设置默认选项
- 设置多选:multiple,ctrl+单击选择多个
按钮:type="button"
- <button type="submit">提交按钮
- <button type="reset">重置按钮
- <button type="button">普通按钮,配合js