html的标签
一、标签的语法
1.标签由英文尖括号<和>括起来,如<html>就是一个标签
2.html中的标签一般都是成对出现的,分开始标签和结束标签。结束标签比开始标签多了一个/.
二、html基本结构
<html>
<head>...</head>
<body>...</body>
</html>
1.<html></html>称为根标签,所有的网页标签都在<html></html>中。
2. <head> 标签用于定义文档的头部,它是所有头部元素的容器。头部元素有<title>、<script>、<style>、<link>、 <meta>等标签。
3. 在<body>和</body>标签之间的内容是网页的主要内容,如<h1>、<p>、<a>、<img>等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。
三、html的标签
1.head标签:
文档的头部描述了文档的各种属性和信息,包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者
head中的标签:
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
2.title标签:
在<title>和</title>标签之间的文字内容是网页的标题信息,它会出现在游览器的标题栏中。
3.html的代码注释:
<!--注释文字 -->
4.<p>标签 :
将文章的段落放到<p>标签
5.<h>标签:
文章的标题,标题标签共有6个,h1 h2 h3 h4 h5 h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题,并且依据重要性一次递减。
用法:<hx>标题文本</hx> (x为1-6)
6.<strong>和<em>标签:
在一段话中表示强调某几个文字,这时候就可以用到<em>和<strong>标签。但两者在强调的语气中有区别:<em>表示强调,<strong>表示更强烈的强调。并且在游览器中<em>默认用斜体表示,<strong>用粗体表示。两个标签相比,程序猿更喜欢使用<strong>表示强调。
<em>需要强调的文本</em>
<strong>需要强调的文本</strong>
7.<span>标签:
这个标签是没有语义的,它的作用就是为了设置单独的样式用的。
<span>文本</span>
8.<q>标签:
短文本的引用 注意要引用的文本不用加双引号,游览器会对q标签自动添加双引号。
<q>引用文本</q>
9.<blockquote>标签:
长文本引用。在这里注意,游览器对该标签的解析是缩进样式
<blockquote>引用文本</blockquote>
10.<br>标签:
分行显示文本,即是换行符.现在一般使用 xhtml1.0 的版本的写法(其它标签也是),这种版本比较规范。
xhtml1.0写法:
<br />
html4.01写法:
<br>
11.空格:
在html代码中输入空格、回车都是没有作用的。要想输入空格,必须写入 。注意这里的分号
12.<hr>标签:
添加水平横线,在信息展示时,用于分割的横线。现在一般使用 xhtml1.0 的版本(其它标签也是),这种版本比较规范。
html4.01版本 <hr>
xhtml1.0版本 <hr />
13.<address>标签:
为网页加入地址信息
<address>联系地址信息</address>
14.<code>标签:
在网页中加入一行编程代码。
<code>代码语言</code>
15.<pre>标签:
为网页加入大段代码。
<pre>语言代码段</pre>
<pre> 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。
16.<a>标签:
链接到另外一个页面
<a href="目标网址" title="鼠标滑过显示的文本" >链接显示的文本</a>
注意:若是想在新建的游览窗口中打开连接,如下:
<a href="目标网址" target="_blank">click here!</a>
17.<img>标签:
为网页插入图片
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
18.form表单:
表单是把游览器输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。
<form method="传送方式" action="服务器文件">
讲解:
(1)<form> :<form>标签是成对出现的,以<form>开始,以</form>结束。
(2)action :浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
(3)method : 数据传送的方式(get/post)。
19.文本输入框、密码输入框:
当用户要在表单中键入字母、数字等内容时,就会用到文本输入框。文本输入框也可以转化为密码输入框。
<form>
<input type="text/password" name="名称" value="文本" />
</form>
(1)type:
当type="text"时,输入框为文本输入框;
当type="password"时, 输入框为密码输入框。
(2)name:为文本框命名,以备后台程序ASP 、PHP使用。
(30value:为文本输入框设置默认值。(一般起到提示作用)
20.文本域textarea:支持多行文本输入
<textarea rows="行数" cols="列数">文本</textarea>
21.单选框、复选框:
html中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选。
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
(1)type:
当 type="radio" 时,控件为单选框
当 type="checkbox" 时,控件为复选框
(2)value:提交数据到服务器的值(后台程序PHP使用)
(3)name:为控件命名,以备后台程序 ASP、PHP 使用
(4)checked:当设置 checked="checked" 时,该选项被默认选中
22.下拉列表框:
在网页中使用下拉列表框,可以有效的节省网页空间
<select>
<option> value=’提交值’>选项</option>
</select>
(1)提交值是向服务器提交的值,选项是显示的值
(2)selected=”selected”属性,则该选项就被默认选中。
注意:下拉列表也可以进行多选操作,在<select>标签中设置multiple=”multiple”属性,就可以实现多选功能,在windows操作系统下,进行多选时按下ctrl键同时进行单机。
23.提交按钮、提交数据:
在表单中有两种按钮可以使用,分别为提交按钮、重置。
<input type="submit" value="提交">
(1)type:只有当type值设置为submit时,按钮才有提交作用
(2)value:按钮上显示的文字
24.使用重置按钮,重置表单信息:
当用户需要重置表单信息到初始时的状态下,比如用户输入”用户名”后,发现书写有误,可以使用重置按钮,使输入框恢复到初始状态。
<input type="reset" value="重置">
25.form表单中的label标签
label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。
<label for="控件id名称">
<form>
<label for="male">男</label>
<input type="radio" name="gender" id="male" />
</form>
26.ul标签:
添加新闻信息列表,ul-li是没有前后顺序的信息列表
<ul>
<li>信息</li>
<li>信息</li>
......
</ul>
27.ol标签:
使用ol标签,添加图书销售排行榜
<ol>
<li>信息</li>
<li>信息</li>
......
</ol>
28.div排版:
在网页制作过程中,可以把一些独立的逻辑部分划分出来,放在一个<div>标签中,这个<div>标签的作用就相当于一个容器中。
29.table标签:
创建一个表格的四个元素:table、tbody、tr、th、td
(1)<table>…</table>:整个表格以<table>开始、</table>标记结束。
(2)<tbody>…</tbody>:如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构, tbody包含行的内容下载完优先显示,不必等待表格结束后在显示,同时如果表格很长,用tbody分段,可以一部分一部分地显示。(通俗理解table 可以按结构一块块的显示,不在等整个表格加载完后显示。)
(3)<tr>…</tr>:表格的一行,所以有几对tr 表格就有几行。
(4)<td>…</td>:表格的一个单元格,一行中包含几对<td>...</td>,说明一行中就有几列。
(5)<th>…</th>:表格的头部的一个单元格,表格表头。
(6)表格中列的个数,取决于一行中数据单元格的个数。
30.caption标签:
(1)摘要
摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
语法:<table summary="表格简介文本">
(2)标题
用以描述表格内容,标题的显示位置:表格上方。
<table>
<caption>标题文本</caption>