记录一下HTML的标签

可以查阅文档：

           W3C : http://www.w3school.com.cn/

           MDN: https://developer.mozilla.org/zh-CN/

目录

HTML

一、HTML定义

为什么叫超文本呢？

HTML骨架：

二、HTML常用标签：

 1.排版标签：

 2.文本格式化标签

3.图像标签：转存失败 

4.链接标签：a

5.注释标签： 

三、表格：（表格最合适的地方就是用来存储数据的）

四、列表标签：

五、表单标签：（表单目的是为了收集用户信息）

六、label标签：

七、textarea控件(文本域)  可以显示多行文本

 八、select下拉列表

八、form表单域：通过表单域把收集的用户信息怎么传递给服务器

九、列表、表单、表格总结

---

 

 

HTML

一、HTML定义

     HTML指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。 HTML 不是一种编程语言，而是一种标记语言 (markup language)

为什么叫超文本呢？

1.     它可以加入图片、声音、动画、多媒体等内容（超越文本限制 ）

2.    可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本 ）

HTML骨架：

二、HTML常用标签：

 1.排版标签：

•   标题标签：<h1> 标题文本 </h1> ~ <h6> 标题文本 </h6>  一共6级标签 ; 一行只能放一个标题
•    段落标签： <p>文本内容</p>  ； 文本在一个段落中会根据浏览器窗口的大小自动换行。
•    水平线标签： <hr /> :是个单标签
•    换行标签： <br /> :单标签
•    <div> 内容 </div>标签和<span> 内容 </span>标签 ；这两个标签都是没有语义的                                                                           <div></div>标签：是用来布局的，但是一行只能放一个<div></div>标签                                                                                  <span></span>标签 ：是用来布局的，一行上可以多个<span></span>标签

 2.文本格式化标签

•     文字以粗体方式显示 ： 标签：<b></b>、<strong></strong>(XHTML推荐使用strong)

                        区别：b只是加粗，  strong除了加粗还有强调的意思，语义更强烈

•     文字以斜体方式显示：标签： <i></i>、<em></em>  (XHTML推荐使用em)
•     文字以加删除线方式显示：标签： <s></s>、<del></del>  (XHTML推荐使用del)
•     文字以加下划线方式显示：标签： <u></u>、<ins></ins>  (XHTML不赞成使用u)

3.图像标签：<img> 

   语法： <img src = "图像URL" />

  <img />标签属性：

属性	属性值	描述
src	URL	图像的路径
alt	文本	图像不能显示时替换的文本
title	文本	鼠标悬停时显示的内容
width	像素（XHTML不支持%页面百分比）	设置图像的宽度
height	像素（XHTML不支持%页面百分比）	设置图像的高度
border	数字（后面可用CSS来做）	设置图像边框的宽度

 

 

 

 

 

 

 

4.链接标签：a

    语法： <a href = "跳转的目标"  target = "目标窗口的弹出方式"> 文本或图像 </a>

   href :用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能。没有目标跳转时，href="#"、href ="javascript:;"

  target: 用于指定链接页面的打开方式，其取值有self和blank两种，其中_self为默认值，_blank为在新窗口中打开方式

5.注释标签： 

       <!-- 注释语句 -->     快捷键是：    ctrl + /       或者 ctrl +shift + /

 

三、表格：（表格最合适的地方就是用来存储数据的）

1.  创建表格的基本语法：

2.   表格属性：

         

 

   

 

3.表头单元格标签 th  

• 作用：一般表头单元格位于表格的第一行或第一列，并且文本加粗居中
• 语法：只需用表头标签<th></th>替代相应的单元格标签<td></td>即可。
• 表头(th 也是一个单元格 只不过和普通的 td单元格不一样，它会让自己里面的文字居中且加粗 )

4.表格标题 ：caption

  定义：

caption 元素定义表格标题，通常这个标题会被居中且显示于表格之上。 ：如下图红色区域所示：

5.合并单元格：

• 跨行合并：rowspan="合并单元格的个数"

• 跨列合并：colspan="合并单元格的个数"

   合并小技巧：（合并的顺序我们按照 先上 后下 先左 后右 的顺序 ）：

1. 先确定是跨行还是跨列合并
2. 根据 先上 后下 先左 后右的原则找到目标单元格 然后写上 合并方式 还有 要合并的单元格数量 比如 ： <td colspan="3"> </td>

3. 删除多余的单元格 单元格

6.表格总结：

标签名	定义	说明
<table></table>	表格标签	就是一个四方的盒子
<tr></tr>	表格行标签	行标签要再table标签内部才有意义
<td></td>	单元格标签	单元格标签是个容器级元素，可以放任何东西
<th></th>	表头单元格标签	它还是一个单元格，但是里面的文字会居中且加粗
<caption></caption>	表格标题标签	表格的标题，跟着表格一起走，和表格居中对齐
clospan 和 rowspan	合并属性	用来合并单元格的

 

7.表格拓展：

       对于比较复杂的表格，表格的结构也就相对的复杂了，所以又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注， 这样更好的分清表格结构

注意：

1. <thead></thead>：用于定义表格的头部。用来放标题之类的东西。<thead> 内部必须拥有 <tr> 标签！
2. <tbody></tbody>：用于定义表格的主体。放数据本体 。
3. <tfoot></tfoot>放表格的脚注之类。

4. 以上标签都是放到table标签中。

 

四、列表标签：

•     无序列表：无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

注意：

 1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
 2. <li>与</li>之间相当于一个容器，可以容纳所有元素。
 3. 无序列表会带有自己样式属性，放下那个样式，一会让CSS来！

 

• 有序列表：有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义

 

• 自定义列表：定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号

      效果如右：                    

    适合使用场合：

列表总结：

标签名	定义	说明
<ul></ul>	无序标签	里面只能包含li 没有顺序，我们以后布局中最常用的列表
<ol></ol>	有序标签	里面只能包含li 有顺序， 使用情况较少
<dl></dl>	自定义列表	里面有2个兄弟， dt 和 dd

 

五、表单标签：（表单目的是为了收集用户信息）

       包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

1. 语法：<input type="属性值" value="你好">
2. input属性：

属性	属性值	描述
type	text	单行文本输入框；可做用户名，昵称....
	password	密码输入框；
	radio	单选按钮
	checkbox	复选框
	button	普通按钮
	submit	提交按钮
	reset	重置按钮
	image	图像形式的提交按钮
	file	文件域
name	用户定义	表单名字。页面中的表单很多，name主要作用就是用于区别不同的表单。
value	用户定义	表单值；表单里面默认显示的文本
size	正整数	input控件在页面中显示的宽度。可使用css来设置
checked	checked	checked = "checked";默认选中，表示那个单选或者复选按钮一开始就被选中了
maxlength	正整数	控件允许输入的最多字符数

六、label标签：

1. 概念： label 标签为 input 元素定义标注（标签）。
2. 作用：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
3. 如何绑定元素呢？（当我们鼠标点击 label标签里面的文字时， 光标会定位到指定的表单里面）

• 第一种用法就是用label直接包括input表单。（适合单个表单选择）

        <label> 用户名： <input type="radio" name="usename" value="请输入用户名">   </label>

• 第二种用法 for 属性规定 label 与哪个表单元素绑定。

    <label for="sex">男</label>
    <input type="radio" name="sex"  id="sex">

七、textarea控件(文本域)  可以显示多行文本

          <textarea > 文本内容</textarea>

 

 八、select下拉列表

1. <select> 中至少包含一对 option
2. 在option 中定义selected =" selected "时，当前项即为默认选中项。
3. 但是我们实际开发会用的比较少

八、form表单域：通过表单域把收集的用户信息怎么传递给服务器

•     语法

           <form action="url地址" method="提交方式" name="表单名称">
                  各种表单控件
           </form>

• 常用属性：

 

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址。
method	get/post	用于设置表单数据的提交方式，其取值为get或post。
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单。

九、列表、表单、表格总结

 

---

初学者，记录一下，怕自己忘记......