HTML标签整理

最新推荐文章于 2022-06-16 08:15:00 发布

皮卡皮卡~

最新推荐文章于 2022-06-16 08:15:00 发布

阅读量337

点赞数 4

分类专栏： Web基础文章标签： html html标签

本文链接：https://blog.csdn.net/y_universe/article/details/79001893

版权

Web基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML标签整理

1、文件标签

<html>
    <head>
        <meta charset="utf-8">
        <title>网页示例</title>     
    </head> 
    <!--
        head标签的作用：存储web网页的一些重要信息
        例如：<titile></title>标题
             <meta>元信息
        <head>标签中的内容在浏览器的页面上不显示
    -->
    <body>
        hello world
    </body>
    <!-- body的作用：展示网页内容 -->
</html>

2、h标签

<hn> ~ </hn>
<!--
    其中n的取值为1~6
    作用：加粗，独立一行，行之间空白
    常用属性：
        align：对其方式
            取值：left, center, right
-->

3、字体标签

<font> </font>
<!--
    font常用属性：
        size：大小，取值1~7
        color：颜色：
            方式1：#xxxxxx  x代表16进制
            方式2：英文单词  例如：red
        face：字体    例如：黑体、宋体
-->

4、水平线

<hr />

5、段落标签

<p> </p>

6、图片标签

<img />
<!--
常用属性：
    src：路径
      绝对路径：格式： http://ip:端口/资源
      性对路径：格式： ./当前目录 或者 ../当前目录的上一级
    alt：图片不存在或者没有的时候，使用文字代替
    title：鼠标移动到图片上显示文字
    width：设置图片宽度 单位：px
    height：设置图片宽度
-->

案例1–展示网站的信息
　1、创建html页面　2、标题标签
案例2–新闻列表
　标签：ul　li　(ol　li)
　　　属性：type
　　　取值：disc　square　circle
　　　
7、超链接标签

<a> </a>
<!--常用属性：href　target-->

8、表格标签

<table>
    <tr>
        <td>Cell A</td>
        <td>Cell B</td>
    </tr>
</table>
<!--
    行标签：tr
    列标签：td 或者 th
    那么，td与th的区别是什么呢：
    <th>在单元格中加粗显示，所有一般用来定义表格内的表头单元格
-->

案例3–使用表格布局首页
分析：(1)创建一个表格 (2)第1行放logo (3)第2行菜单 (4)第3行轮播图(可暂时使用单张图片代替) (5)第4行热门商品 (6)第5行广告 (7)第6行进口商品 (8)第7行正品保证 (9)第8行 foot

9、表单标签

input
select
textarea
<!--
    注意：1、所有的表单标签全部写在 <form> </form>之间
         2、表单用作收集用户信息
    input:输入框
        常用属性 type：
            text  普通
            password  密码
            radio  单选框
            checkbox  复选框
            file  提交一个文件
            submit  提交按钮
            reset  重置按钮
            button  普通提交按钮
            hidden  隐藏域
            name  属性(表单提交到服务器的数据，表单必须带有name属性)
    select：下拉框
    textarea：文本框
-->

注：1、表单提交数据到服务器，表单标签必须有name属性
　　2、通过浏览器提交数据到服务器的方式叫做get方式
　　get方式与 post方式的区别：
　　(1)get方式提交数据不安全
　　(2)get方式提交的数据最大只有1kb，post没有大小限制
　　(3)通过post方式表单直接到服务器，浏览器不显示提交的数据

案例练习–注册页面

10、frameset标签

<frameset> 标签 框架集
    常用属性：
        cols：垂直切割
        rows：水平切割
<frame> 具体的内容实现
    src 一个页面的url路径

案例–网上商城的后台管理系统

11、div标签

<div> ：标签作用：可以把文档分割为独立的、不同的部分
    块级元素，div标签叫做div元素标签
<span>  </span> ：标签作用：行内块级元素

总结

<html>
  <head></head>
  <body></body>
</html>

<p></p> 段落标签

<font></font> 字体标签

<hn></hn>  n取值  1~6  

<ul></ul>
<ol></ol>
    <li></li>
列表标签

<img />  图片标签

<table>
    <tr>
        <td></td>
    </tr>
</table>   表格标签 注意:最少有一行一列

输入框 <input type="">  
    type:取值  text  password radio checkbox  file  submit  reset button hiden 
下拉框   <select>
            <option value="" name="">aa</option>
        </select>
文本框 <textarea></textarea>

补充:  <b></b>   <strong></strong> <i></i>  <center></center>
转义字符　格式：  ＆＋实体＋；
    空格：&nbsp;
    大于：&gt; 
    小于: &lt;

笔记

<strong>、<em>和<span> 标签
    但两者在强调的语气上有区别:<em> 表示强调，<strong> 表示更强烈的强调。
    并且在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。
    <span>标签是没有语义的，它的作用就是为了设置单独的样式用的。

<q>标签  短文本引用
    <q>引用文本</q>
    要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。
    注：<q>标签的真正关键点不是它的默认样式双引号
       （如果这样我们不如自己在键盘上输入双引号就行了），
        而是它的语义：引用别人的话。

<blockquote>标签  长文本引用
    <blockquote>引用文本</blockquote>
    浏览器对<blockquote>标签的解析是缩进样式

<br />标签  换行
    xhtml1.0写法：<br />
    html4.01写法：<br>
    现在一般使用 xhtml1.0 的版本的写法（其它标签也是），这种版本比较规范。

    <br />标签是一个空标签，没有HTML内容的标签就是空标签，
    空标签只需要写一个开始标签，这样的标签有<br />、<hr />和<img />

    在html代码中输入空格、回车都是没有作用的。要想输入空格，必须写入&nbsp;

<address>标签  为网页加入地址信息
    <address>联系地址信息</address>
    一般网页中会有一些网站的联系地址信息需要在网页中展示出来，这些联系地址信息如公司的地址就可以<address>标签。也可以定义一个地址（比如电子邮件地址）、签名或者文档的作者身份。
    在浏览器上显示的样式为斜体，如果不喜欢斜体，可以使用 css 样式来修改它。

<code>标签  加入一行代码
    <code>代码语言</code>

<pre>标签  加入大段代码
    <pre>语言代码段</pre>
    <pre> 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。
    注：<pre> 标签不只是为显示计算机的源代码时用的，在你需要在网页中预显示格式时都可以使用它，只是<pre>标签的一个常见应用就是用来展示计算机的源代码。

<ul>标签  添加新闻信息列表
    <ul>
      <li>信息</li>
      <li>信息</li>
       ......
    </ul>
    ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点。
<ol>标签  有序列表
    <ol>
       <li>信息</li>
       <li>信息</li>
       ......
    </ol>
    <ol>在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开始。

<div  id="版块名称">…</div>
    给div命名，使逻辑更加清晰

表格
<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、表格中列的个数，取决于一行中数据单元格的个数。

注：
1、table表格在没有添加css样式之前，在浏览器中显示是没有表格线的
2、表头，也就是th标签中的文本默认为粗体并且居中显示

summary：添加摘要
<table summary="表格摘要">
    摘要的内容是不会在浏览器中显示出来的。
    它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，
    还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

<caption>...</caption>：添加标题，用来描述表格内容，显示在表格上方
    例: <table>
            <caption>表格标题</caption>
        </talbe>

定义超链接
<a>...</a>：标签可实现超链接，只要有链接的地方，就会有这个标签
<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>
    title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。
    这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容。
    target="_blank"：在新标签页打开链接
还可用来链接Email地址
<a href="mailto:a@a.com ? cc=b@b.com & bcc=c@c.com & subject=主题 & body="邮件内容>链接显示的文本</a>
注:
  mailto:收件人
  cc:抄送
  bcc:密件抄送
  subject:主题
  body:邮件内容

图片
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
注：
  src：标识图像的位置
  alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本
  title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)
  图像可以是GIF，PNG，JPEG格式的图像文件。

使用表单标签，与用户交互

<form   method="传送方式"   action="服务器文件">
注：
  action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)
  method ： 数据传送的方式（get/post）
  所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间

文本输入框、密码输入框
<form>
   <input type="text/password" name="名称" value="文本" />
</form>
注：
  1、type：
   当type="text"时，输入框为文本输入框;
   当type="password"时, 输入框为密码输入框。
  2、name：为文本框命名，以备后台程序ASP、PHP使用。
  3、value：为文本输入框设置默认值。(一般起到提示作用)
     value 属性为 input 元素设定值。
     对于不同的输入类型，value 属性的用法也不同：
       type="button", "reset", "submit" - 定义按钮上的显示的文本
       type="text", "password", "hidden" - 定义输入字段的初始值
       type="checkbox", "radio", "image" - 定义与输入相关联的值
     注：<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性。
         value 属性无法与 <input type="file"> 一同使用。

文本域：在表单中输入大段文字时，需要用到文本输入域
<textarea  rows="行数" cols="列数">文本</textarea>
注：
  1、<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。
  2、cols ：多行输入域的列数。
  3、rows ：多行输入域的行数。
     这两个属性可用css样式的width和height来代替：cols用width、rows用height来代替
  4、在<textarea></textarea>标签之间可以输入默认值

单选框、复选框
<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" 时，该选项被默认选中
注：同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用

下拉列表框
<select>
    <option value="提交值">选项</option>
</select>
注：
  value：向服务器提交的值
  选项：显示的值
  checked：当设置 selected="selected" 时，该选项被默认选中
--------------------------------------------------------
下拉列表也可以进行多选操作，在<select>标签中设置multiple="multiple"属性，就可以实现多选功能，在 windows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击），可以选择多个选项。
<select multiple="multiple"> </select>

重置表单信息
当用户需要重置表单信息到初始时的状态时，可以使用重置按钮使输入框恢复到初始状态
<input type="reset" value="重置">
注：
  type：只有当type值设置为reset时，按钮才有重置作用
  value：按钮上显示的文字

label
label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。
<label for="控件id名称">