目录
一,基本标签
标签名称 | 标签符号 |
---|---|
标题标签 | <h1>~<h6> |
段落标签 | <p> |
斜体标签 | <em> |
粗体标签 | <strong> |
水平线标签 | <hr/> |
换行标签 | <br/> |
二,特殊符号
符号名称 | 符号样式 |
---|---|
空格 | |
大于号 | > |
小于号 | < |
引号 | " |
注册商标 | ® |
三,图片标签
1.src图片路径属性
(1)相对路径(通常以HTML网页文件为起点)。
<img src="./img/1.jpg"/>
上图为同级目录下的img文件。
<img src="../img/1.jpg">
上图为上一级目录下的img文件。
2.宽度:width px像素。
高度:height px像素。
3.alt:在图片不能正常加载时显示的提示语。
4.title:鼠标划上去显示的内容。
四,超链接
1.语法:
<a href="地址"></a>
其他属性:target:“目标窗口位置”
-self:自身窗口
-blank:新建窗口
<a href="./img/demo/bao.html" target="_blank">这是一个超链接</a>
2.拨打电话:
<a href="tel:18809217401">18809217401</a>
3.下载文件:
当文件为:html或者txt 浏览器直接打开
当文件为:ppt、doc,excel,pdf,exe 浏览器下载文件
<a href="./demo/01HTML初识.pptx">下载文件</a>
4.锚链接:
href="" 跳转当前页面
href="#" 当前页面
<a name="top"></a>
<a href="#top">回到顶部</a>
五,列表
1.无序列表
<ul>
<li>......</li>
<li>......</li>
<li>......</li>
<li>......</li>
</ul>
type属性:
属性名称 | 属性样式 |
---|---|
disc | 实心圆 |
circle | 空心圆 |
square | 实心正方形 |
none | 无 |
<!-- 无序列表 -->
<ul type="square">
<li>web</li>
<li>java</li>
<li>html</li>
<li>mysql</li>
<li>css</li>
</ul>
运行结果:
2.有序列表
<ol>
<li>......</li>
<li>......</li>
<li>......</li>
<li>......</li>
</ol>
type属性:
属性名称 | 属性值 | 说明 |
---|---|---|
type | 1 | 以1,2,3,4来表示 |
type | a | 以a,b,c,d来表示 |
type | A | 以A,B,C,D来表示 |
type | i | 以i,ii,iii来表示 |
type | I | 以I,II,III,IV来表示 |
3.自定义列表
<dl>
<dt>...</dt>
<dd>......</dd>
<dd>......</dd>
<dd>......</dd>
<dt>...</dt>
<dd>......</dd>
<dd>......</dd>
<dd>......</dd>
</dl>
<dl>自定义列表
<dt>标题
<dd>内容
自定义列表没有type属性
六,表格
<table>
<tr>
<th>...</th>
<th>...</th>
<th>...</th>
<th>...</th>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</table>
<table>定义表格,属性:border="1"(边框)
<tr>表格均有若干行组成
<td>每行被分为若干个单元格
<th>表头单元格
<table cellspacing="0" border="1" width="600px" height="400px" bgcolor="#05BACB" align="center">
<tr bgcolor="rgb(0,10,0)">
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>手机号</th>
<th>微信</th>
</tr>
<tr>
<td rowspan="2">1111aaa</td>
<td>1111</td>
<td colspan="3" rowspan="2">1111q</td>
</tr>
<tr>
<td>2222</td>
</tr>
<tr>
<td>3333</td>
<td>3333</td>
<td>3333</td>
<td>3333</td>
<td>3333</td>
</tr>
<tr>
<td colspan="2">4444</td>
<td>4444</td>
<td>4444</td>
<td>4444</td>
</tr>
</table>
运行结果:
表格美化属性:
名称 | 作用 |
---|---|
bgcolor | 背景颜色 |
align | 对齐方式(left,center,right) |
cellpadding | 文字与单元格之间的距离 |
cellspacing | 单元格与单元格之间的距离 |
border | 边框 |
七,表单
1.表单的定义方式
<form action="./table.html" method="get">
method:发送表单数据的方式,常用值get | post。
get:(1)通过url地址栏形式发送
(2)发送数据不安全
(3)发送数据量小
post:(1)通过http/https将表单数据完整发送到后台
(2)发送数据安全
(3)发送数据量理论上没有限制
(4)需要服务器环境支持
action:向何处发送表单。
2.表单元素的分类及属性
属性 | 属性值 | 作用 |
---|---|---|
文本输入 | text,password | text,表单中键入字母、数字等内容。password,输入密码字段。 |
选择 | checkboxes,radio | checkboxes,表单复选框。radio,表单单选框。 |
文件选择 | file | file,定义了文件选择。 |
按钮 | button | button,定义了普通按钮。 |
提交按钮 | submit,image | submit,定义了提交按钮。image,定义了图片提交按钮 |
重置按钮 | reset | reset,定义了重置按钮。 |
3.下拉列表
<select>
<option>...</option>
<option>...</option>
<option>...</option>
<option>...</option>
</select>
4.多行文本域
<textarea rows="3" cols="20" maxlength="50" name="self"></textarea>
5.隐藏域
<input type="hidden">
6.只读属性
<input type="text" value="123" readonly/>
7.禁用属性
<input type="text" value="123" disabled/>
8.表单元素标注
<label for="username">账号</label>
对表单中元素进行标注,增强鼠标可用性。
9.表单代码及其运行结果
搜索框:
<form action="https://www.baidu.com/s" method="get">
<input type="text" name="wd"/>
<input type="submit" value="袁百科搜索"/>
</form>
<form action="https://search.bilibili.com/all" method="get">
<input type="text" name="keyword"/>
<input type="submit" value="袁视频搜索"/>
</form>
运行结果:
文本域,按钮,单选框,复选框
<form action="./table.html" method="get">
<input type="hidden" name="userid" value="11111"/>
<label for="username">账号:</label>
<input id="username" type="text" name="username" value="123456" maxlength="6"/><br/>
<label for="pwd">密码:</label>
<input id="pwd" type="password" name="pwd"/><br/><br/>
上传文件:
<input type="file" name="files"/><br/><br/>
性别:
<input type="radio" name="gender" value="nan" />男
<input type="radio" name="gender" value="nv"/>女
<input type="radio" name="gender" value="other"/>性别不限<br/><br/>
爱好:
<input type="checkbox" name="likes" value="lanqiu"/>篮球
<input type="checkbox" name="likes" value="yumaoqiu"/>羽毛球
<input type="checkbox" name="likes" value="paiqiu"/>排球<br/><br/>
</from>
运行结果:
下拉列表:
所在城市:
<select name="province">
<option value="shannxi">陕西省</option>
<option value="guangdong">广东省</option>
<option value="fujian">福建省</option>
<option value="shanxi">山西省</option>
</select>
<select name="city">
<option value="xian">西安市</option>
<option value="xianyang">咸阳市</option>
<option value="yulin">榆林市</option>
<option value="baoji">宝鸡市</option>
</select>
<select>
<option value="xincheng">新城区</option>
<option value="yanta">雁塔区</option>
<option value="weiyang">未央区</option>
<option value="gaoxin">高新区</option>
</select>
</br>
运行结果:
多行文本域:
<textarea rows="3" cols="20" maxlength="50" name="self"></textarea>
运行结果: