HTML
一、概念
HTML中文名叫:超文本标记语言,它是一种用于创建网页的标准标记语言。
二、HTML常用标签
1、文本标签
1.1、标题标签
h1-h6:字体逐渐缩小
<h1>一级标题</h1>
<h2>二级</h2>
<h3>三级</h3>
<h4>四级</h4>
<h5>五级</h5>
<h6>六级</h6>
1.2、段落标签
<p>好好学习,天天向上</p>
1.3、换行标签
<br />强制换行
1.4、水平线标签
<hr />分割内容
1.5、范围标签
一般在大段内容中,为了突出部分内容的时候使用的标签;很少独立使用,一般嵌套在其他的标签中使用。
<span></span>
2、图片标签
2.1、基本属性
插入图片
<img src="img/2.jpg" />
2.2、设置图片的热点区域
<img src="2.jpg" usemap="#myMap" />
<map name="#myMap">
<area shape="形状名称" coords="坐标(多个值用逗号隔开)" href="点击该范围的时候跳转的目标URL"
title="鼠标悬浮在该区域的时候的提示文字" />
shape有3种取值:circle-圆形,rect-矩形,poly-多边形。
3、列表标签
3、无序列表
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
3.2、有序列表
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
4、定义描述标签
<dl>
<dt>热销产品</dt>
<dd>产品名称:小熊饼干</dd>
<dd>价格:23</dd>
</dl>
dl-dt-dd:定义描述标签,一般用在图文混编的场合。
dl:只能盛放dt和dd标签,不推荐盛放其他内容。
dt:一般用来盛放图片或标题。
dd:一般用来补充对dt的描述与说明。
5、布局标签 层div
一般就是做容器,盛放其他标签的,将其他标签组合在一起用来布局。
<div></div>
6、标签分类
html标签可以分为块状元素和行级元素两类。
块状元素:一般都是新起一行,可以容纳行内元素和其他块级元素;
行级元素:一般都是语义级别的基本元素,一般只能容纳文本或者其他行内元素。PS:区分的简单方法:是否独占一行。
块状元素和行内元素的区别:
-
块级元素会独占一行,其宽度自动填满其父元素宽度;行内元素会排列到同一行里,其宽度随元素的内容变化而变化。
-
块级元素可以设置宽高;行内元素设置宽高无效.
-
块级元素可以设置margin,padding属性;行内元素的水平方向的padding会有边距效果,但是竖直方向的padding没有效果。(此处的属性稍后介绍)
我们上面已经讲过的标签中归类一下:
属于块状元素的:
- 标题标签 h1-h6,
- 段落标签 p ,
- 水平线标签 hr,
- 有序列表标签 ol–li,
- 无序列表标签 ul–li,
- 定义描述标签 dl-dt-dd,
- 容器标签 div:
属于行级元素的:
- 范围标签:span
- 图像标签:img
7、超链接
a:超链接
作用1:跳转到其他资源
属性:href=“目标资源路径” ,路径推荐相对路径。
·········target=“打开资源的位置” 默认值:__self:在当前页打开;__blank:在新页面打开资源
<a href="" target="_self"></a>
锚链接:
<!--
作用2:锚链接
步骤:1、目标位置定义锚点<a name="锚点名称"></a>
2、超链接的href属性使用锚点<a href="#锚点名称" target="_self">锚链接</a>
-->
8、表格标签
8.1、规则表格
<!--table:定义表格
常用属性:height:高度
width:宽度
border:边框
cellpadding:内容与单元格之间的距离
cellspacing:单元格与单元格之间的距离
-->
<table border="1" cellpadding="0" cellspacing="0"width="90%" height="200px">
<tr>
<th></th><!--定义表头单元格-->
</tr>
<tr>
<td></td><!--定义非表头单元格-->
</tr>
</table>
<!--
单元格标签thhetd中的常用属性:
colspan:合并列 使用时删除其他被占用位置的单元格
rowspan:合并行 同上
类似Excel中的合并单元格
-->
9、表单★
<!--
form;用于定义表单的。可以定义一个范围,范围代表采集用户数据的范围
常用属性:action:指定提交数据的URL
method:指定提交方式,一共7种,以下两种比较常用
get:
1.请求参数会在地址栏中显示,会封装到请求行中
2.请求参数大小是有限制的
3.不太安全
post:1.请求参数不会在地址栏中显示。会封装在请求体中
2.请求参数的大小没有限制
3.较为安全
enctype:表单中有上传的文件的时候必备该属性,且取值为multipart/form-data
-->
<form action="dest.html" method="get" enctype="multipart/form-data"></form>
表单项元素中的一些属性:
- id:元素的唯一表示,不重复
- name:表单项元素的名称,很重要–提交数据到- 服务器之后,服务器获取数据通过该名称
- value:表单项元素的值,服务器获取数据通过
- name获取到的就是value
- type:表示表单项元素的呈现形式
- class:表示样式名称
- readonly:表示只读,用户只能看不能改
- disabled:表示禁用,该元素不能改而且背景是灰色
9.1、文本框
<input tyoe="text" id="userName" name="userName" placeholder="请输入用户名" />
9.2、密码框
<!--required:表示用户必须填写此内容,如果没有填写,提交表单的时候会失败并给出提示-->
<input type="password" id="password" name="passwordd" required />
9.3、单选按钮
<!--
单选按钮:type="radio"
单选按钮成组出现,name相同表示一组
value:服务器通过name获取到的值就是value
checked:表示默认选中;值可以忽略,直接写一个属性名,也可以谢checked="checked"
-->
<input type="radio" name="statu" value="1" />已婚
<input type="radio" name="statu" value="0" checked/>未婚
9.4、复选框
<input type="checkbox" name="hobby" value="swim" />游泳
<input type="checkbox" name="hobby" value="NBA" />NBA
<input type="checkbox" name="hobby" value="movie" />电影
9.5、文件域
<!--
文件域:文件上传type="file"
表单中如果有文件上传,表单中最好有enctype="multipart/form-data"
multiple属性:表示可以同时上传多个文件
-->
<input type="file" name="headImg" multiple="multiple" />
9.6、日期
<!--
日期:
type="date" 表示年月日
type="dayetime-local" 表示既有年月日又有时间
-->
<input type="date" name="day" />
9.7、隐藏域
<!--
隐藏域:type="hidden" 页面上看不到任何效果
作用:隐藏一些用户不需要但是程序员需要的值
-->
<input type="hidden" name="userId" value="1001" />
9.8、下拉列表框
<!--
下拉列表框:select中写name
option:select中的所有选项
其中value表示下拉列表中被选中的项的对应值
其中selected表示默认选中
-->
<select name="month">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
9.9、文本域
<!--
textarea:文本域
cols:指定列数,每一行有多少个字符
rows:默认多少行
readonly:表示只读,内容不可修改
disabled:表示不可用,央视呈现灰色
-->
<textarea rows="15" cols="50" readonly="readonly" disabled="disabled">
文本域
</textarea>
9.10、按钮
<input type="submit" value="注册" id="regBtn" /><!--提交按钮-->
<input type="image" value="图片路径" id="regBtn2" /><!--图片按钮-->
<input type="resrt" value="重置" id="reset" /><!--重置按钮-->
<input type="button" value="普通按钮" id="btn" /><!--普通按钮-->
button标签可以与input实现的按钮相互替换
三、框架
<!--
iframe:定义内嵌框架
常用属性:src="URL":该URL指向不同的网页
frameborder:定义iframe表示是否显示边框
iframe可以显示一个目标链接的页面,目标链接的属性必须使用iframe的属性
-->
<iframe name="content" src="相对路径" width="100%" height="200"></iframe>
四、常用的标签组合
- div-ul-li/div-ol-li:常用于导航布局
- div-dl-dt-dd:常用于图文混编布局
- div-form:常用于表单布局
- div-table:常用于局部规则数据展示布局
五、总结
转移符号:
 ;:转义为空格
<;:转义为小于号
&le;:转义为小于等于号
>;:转义为大于号
&ge;:转义为大于等于号
©;:转义为版权符号