html的标签

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>

 


 

 

 


©️2020 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页