HTML简介
HyperText Markup Language:超文本标记语言
W3C标准:网页主要由三部分组成
- 结构:HTML
- 表现:CSS
- 行为:JavaScript
<!--HTML文件基本结构-->
<html>
<head>
<title></title> <!--指定html文档的标题-->
</head>
<body> <!--主体的位置-->
</body>
</html>
<!--
标签不区分大小写
语法松散
-->
基础标签
<h1> - <h6>:标题
<font>:定义文本字体、尺寸、颜色
<b>:定义粗体文本
<i>:定义斜体文本
<u>:定义文本下划线
<center>:定义文本居中
<p>:定义段落
<br>:定义拆行
<hr>:定义水平线
转义字符:
< <
> >
& &
" "
® 已注册标识
© 版权标识
™ 商标
不断行的空白
<!--
html表示颜色:
1. 英文单词
2. rgb(值1,值2,值3) 0~255
3. #值1值2值3 0~255
-->
图片音频视频标签
<!--
URL:资源路径指定方式
1. 绝对路径:完整的路径
2. 相对路径:相对位置关系
./xxx 相同目录,./可以省略
./xxx/xxxx
../xxx/xxxx
尺寸单位:
1. px:像素
2. %:占父元素的百分比
-->
<img src="" height="" width=""> <!--定义图片-->
<!--
src:URL
height:定义图片高度
width:定义图片宽度
-->
<audio src="" controls="controls"> <!--定义音频-->
<!--
src:URL
controls:显示播放控件
-->
<video src="" controls="controls"> <!--定义视频-->
<!--
src:URL
controls:显示播放控件
height:定义视频高度
width:定义视频宽度
-->
超链接标签
<a href="" target="">
<!--
href:指定访问资源的URL
target:
_self:默认值,在当前页面打开
_blank:在空白页面打开
-->
列表标签
<!--有序列表-->
<ol type="">
<li></li> <!--列表项-->
<li></li>
</ol>
<!--无序列表-->
<ul type="">
<li></li>
<li></li>
</ul>
<!--
type:设置项目符号
-->
表格标签
<table> <!--定义表格-->
<!--
border:规定表格边框的宽度
width:规定表格的宽度
cellspacing:规定单元格之间的空白
-->
<tr> <!--定义行-->
<!--
align:定义表格行的内容对齐方式
-->
<td> <!--定义单元格-->
<!--
rowspan:规定单元格可横跨的行数
colspan:规定单元格可横跨的列数
-->
<th> <!--定义表头单元格-->
<table border="1px" cellspacing="0px" width="500">
<tr align="center">
<th>id</th>
<th>name</th>
<th>age</th>
</tr>
<tr align="center">
<td>1</td>
<td>Ziping</td>
<td>21</td>
</tr>
<tr align="center" rowspan="2" colspan="2">
<td>2</td>
<td>Ziping</td>
<td>21</td>
</tr>
<tr align="center">
<td>3</td>
<td>Ziping</td>
<td>21</td>
</tr>
</table>
布局标签
<div> <!--定义html文档中的一个区域部分-->
<!--占一整行-->
<span> <!--用于组合行内元素-->
<!--不会占整行-->
表单标签
<form> <!--定义表单-->
<!--
action:规定当提交表单时向何处发送表单数据,URL
* 表单项数据想要被提交,必须指定表单项的name属性
method:规定用于发送表单数据的方式
get(默认值):浏览器会将数据直接附在表单的action URL之后,大小会有限制
post:浏览器会将数据放到http请求消息体中,大小无限制
-->
表单项标签
<input> <!--输入-->
<!--
type属性:
text(默认值):定义单行输入字段
password:定义密码字段
radio:定义单选按钮
checkbox:定义复选框
file:定义文件上传按钮
hidden:定义隐藏的输入字段,如:id
submit:定义提交按钮,提交按钮会把表单数据发送到服务器
reset:定义重置按钮,重置按钮会清除表单中的所有数据
button:定义可点击按钮
-->
<select> <!--下拉列表-->
<option> <!--定义下拉列表项-->
<textarea> <!--文本域-->
<form action="#" method="post">
<!--隐藏字段,不在表单中显示,但数据会提交-->
<input type="hidden" name="id" value="1">
<!--使用label标签实现文本与输入框的关联:点击文本可选中输入框-->
<label for="username">用户名:</label>
<input type="text" name="username" id="username"><br>
<label for="password">密码:</label>
<input type="password" name="password" id="password"><br>
<!--
使radio的name属性一致达到互斥的效果
使用value属性指定提交的值,不使用value属性的话,提交的值为on
-->
性别:
<input type="radio" name="gender" value="1" id="male"><label for="male">男</label>
<input type="radio" name="gender" value="2" id="female"><label for="female">女</label><br>
<!--
使checkbox的name属性一致表示为一组
使用value属性指定提交的值,不使用value属性的话,提交的值为on
-->
爱好:
<input type="checkbox" name="hobby" value="1">旅游
<input type="checkbox" name="hobby" value="2">游戏
<input type="checkbox" name="hobby" value="2">电影<br>
头像:
<input type="file" name="avatar"><br>
语言:
<select name="language">
<option value="1" value="php">php</option>
<option value="2" value="java">java</option>
<option value="3" value="c++">c++</option>
</select><br>
个人描述:
<textarea name="description" cols="20" rows="5"></textarea><br>
<br>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按钮">
</form>