HTML概述
html------Hyper Text Markup Language,即超文本标记语言。
1、主体框架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
(1)、"utf-8"为国际通用字符编码,将charset设置为这样是为了防止中文字符显示为乱码
(2)、title标签中为一个网页的标题
(3)、body中的内容为整个HTML网页的内容,网页中显示的所有内容都必须写在其中,否则就会报错或者无法显示。
2、HTML元素
HTML中的标签分为内联元素、块级元素以及内联块级元素
2-1、基本元素
1、常见的内联元素有:
a、span、br、i、em、b、strong、label
2、常见的块级元素有:
div、p、h1~h6、ol、ul、dl、table、from
3、常见的内联块状元素有:
img、input
4、注释
<!-- 这里是注释掉的内容 -->
5、元素详解
<!-- 下边是一些元素的使用及详解 -->
<h1>标题标签</h1> <!-- h1~h6为由大到小的标题标签 -->
<p>段落标签</p> <!-- 用以文章区分段落,是段落标记 -->
<Strong>加粗标签</Strong> <!-- 此标签中的内容是加粗的,跟此标签效果相同的为“b”标签 -->
<em>斜体</em> <!-- 此标签的内容是倾斜的,与之效果相同的为“i”标签 -->
<div>块标签</div> <!-- 用来放置一些区域化的内容 -->
<u>下划线标签</u> <!-- 用来给文字加上下划线 -->
<s>删除线标签</s> <!-- 给内容加上删除线 -->
<hr /> <!-- 单标签,不需要结束标签,表示创建一条水平线 -->
6、图片标签
<!-- 图片标签,用来放置图片 -->
<img src="imagePath">
(1)、src中放置图片路径,一般都用相对路径
(2)、在放置的图片与HTML文件同级时直接写图片文件名;在不同级的情况下,需要跳几级,就在文件名前加上几个 . . /
7、表格元素
<table> <!-- 表格标签,定义HTML的表格,表格的内容需放在此标签中 -->
<tr><!-- 定义表格的行 -->
<th>Header</th><!-- 定义表格的表头,表头默认加粗居中 -->
<td>Data</td><!-- 定义表格的单元格,即表格的列 -->
</tr>
</table>
8、a链接标签
<a href="" target="" title=""></a> <!-- a链接标签,href中写此链接跳转的地址 -->
(1)、target属性指定了目标资源的显示位置,即跳转地址的显示位置,
(2)、target的值默认为_self(在同一窗口打开),其他值为_blank(在新窗口中打开)
(3)、title属性表示调用一个提示窗口,“”中的内容就是弹出的窗口的内容
(4)、href中的值为#this表示跳转到一个name为this的位置
2-2、表单元素
表单元素中使用的是input标签,此标签为单标签,只用一个就行,不需要写结束标签
form表示表单,所有的表单元素及input都必须卸载form标签之中
<form action="" method="">
</form>
1、文本框和密码框
<!-- 文本框 -->
<input type="text" name="" id="" value="" />
<!-- 密码框 -->
<input type="password" name="" id="" value="" />
(1)、type中为text表示为文本框,可在其中输入文本;
(2)、type中为password表示为密码框,输入其中的内容会自动保护,通常显示为*
2、单选框
<!-- 单选框 -->
<input type="radio" name="sex" id="" value="" />
<input type="radio" name="sex" id="" value="" />
(1)、type中为radio表示为单选框,可在几者之间选取一个;
(2)、要完成一个单选框需要二及以上个input标签,才能做选择,需要注意的是,单选框的所有input的name必须要相同,否则不能进行。
3、多选框
<!-- 多选框 -->
<input type="checkbox" name="sport1" id="" value="" />
<input type="checkbox" name="sport2" id="" value="" />
<input type="checkbox" name="sport3" id="" value="" />
<input type="checkbox" name="sport4" id="" value="" />
(1)、type中为checkbox表示为单选框,可在几者之间选取多个;
(2)、多选框的name不固定,可以相同,也可以不同
4、下拉列表
<!-- 下拉列表 -->
<select>
<option id="1">1</option>
<option id="2">2</option>
<option id="3">3</option>
<option id="4">4</option>
<option id="5">5</option>
</select>
(1)、下拉列表需要包裹在select标签之中,列表中的每一项使用option标签
5、文本域
当要输入的文字过多,text文本框放不下时,就可以用文本域
<!-- 文本域 -->
<textarea rows="" cols="">
</textarea>
(1)、文本域使用textarea标签,rows设置文本域的长(高),cols设置了文本域的宽。
6、按钮
<input type="button" name="" id="" value="按钮" />
<input type="submit" name="" id="" value="提交" />
<input type="reset" name="" id="" value="重置" /><!-- 可将输入框的改动复原 -->
<input type="image" src="" /><!-- 图像提交 -->
(1)、所有的按钮都可以使用button来显示,提交和重置是特殊的按钮;
(2)、type为image为图像提交,src中放置图像地址
7、button按钮标签
<button>按钮</button> <!-- 文字内容 -->
<button><img src=" "/></button> <!-- 图片内容 -->
(1)、button标签有更丰富的功能,标签的内容可以是文字,也可以是图像
2-3、列表元素
有序列表
<!-- 有序列表 -->
<ol type="1">
<li>A</li>
<li>B</li>
<li>C</li>
</ol>
(1)、ol标签表示有序列表,type可以改变序号的样式,但type的值只有1、A、a、大写罗马数、小写罗马数;
(2)、li标签为列表项,有序和无序列表通用。
无序列表
<!-- 无序列表 -->
<ul type="square">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
(1)、ul标签表示有序列表,type可以改变序号的样式,但type的值只有disc、square、circle
(2)、type的默认值是实心圆disc,其他样式square为实心正方形,circle为空心圆。
自定义列表
<!-- 自定义列表 -->
<dl>
<dt></dt><!-- 用于生成自定义列表中的各列表项的标题 -->
<dd></dd><!-- 用于生成自定义列表的各列表项的说明文字段 -->
</dl>
(1)、dd标签默认有一个外边距,类似于向里缩进了;