html基础，常用标签

最新推荐文章于 2024-05-16 09:20:46 发布

Relaxaaa

最新推荐文章于 2024-05-16 09:20:46 发布

阅读量216

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/Relaxaaa/article/details/111596902

版权

html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Html

HTML：Hyper Text Markup Language 超文本标记语言

用于书写在页面上可以直接被浏览器解析执行的语言(标签)

通过固定的标签进行相应功能的实现

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mAGixCBv-1608721493595)(img\image-20201123092705061.png)]$

使用根标签进行文件的书写之后再根标签中书写相应的二级或多级标签实现相应页面的书写

html标签
html标签是文档的根标签
head标签
页面的头部分可以包含页面的标题、文件MIME类型、样式表、脚本等
title标签
设置文档的标题
body标签
html文档的主体部分，放置需要呈现给用户的内容

meta标签

主要功能：为页面提供相应的信息，提供页面相应的功能

<head> 
   <meta name= "keywords" content= "淘宝,网上购物,在线交易,交易市场" />
   <meta name= "description" content= "淘宝网-亚洲最大、最安全的网上交易平台，提供各类服饰、美容、家居、数码、……" />
</head>

<!-- 每2秒钟刷新一次页面 -->
<meta http-equiv="refresh" content="2">
<!-- 设置页面字符集为gbk -->
<meta http-equiv="content-type" content="text/html;charset=gbk">

一般不会进行meta标签的使用

常用标签

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AdJxSaTA-1608721493599)(img\image-20201123095914515.png)]$

标题标签

h1~h6 数字越大展示效果越小

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tP24BQ6l-1608721493600)(img\image-20201123100306552.png)]$

水平线标签

用于分割页面内容并换行

 <hr/>

用于水平分割上下内容，水平线标签占用一行，所以自带换行,自带行间距

换行标签

在html中无论多少个空格与回车在进行页面解析时都会解析为一个空格，如果需要将页面书写的内容进行换行则需要使用相应的换行标签，如果需要书写空格则需要相应的转义字符  

单标签

在html中所有标签基本是以起始标签结束标签中间包裹内容进行书写，但是有一些特殊的标签，其中无需进行内容包裹则可以使用单标签的形式进行书写例如换行标签<br/>, 一般在最后书写/进行标识

    &nbsp;1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br/>
    &nbsp;&nbsp;2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br/>
    &nbsp;&nbsp;&nbsp;3&nbsp;&nbsp;&nbsp;&nbsp;<br/>
    &nbsp;&nbsp;&nbsp;&nbsp;4&nbsp;&nbsp;&nbsp;<br/>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;5&nbsp;&nbsp;<br/>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;6&nbsp;<br/>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FgyAnr9p-1608721493603)(img\image-20201123101259856.png)]$

字体标签

    <!-- p段落标签 自动换行 自带段落间距 -->
    <p>这是单独的一段文字 后面没有添加换行标签</p>
    <!--加粗-->
    正常的文字<b>加粗</b>后的效果<br/>
    <!-- 倾斜 -->
    正常的文字<i>倾斜</i>后的效果<br/>
    <!-- 加粗倾斜 -->
    正常的文字<i><b>加粗倾斜</b></i>后的效果<br/>
    <!-- 下划线 -->
    正常的文字<u>下划线</u>后的效果<br/>
    <!-- 删除线 -->
    正常的文字<del>删除线</del>后的效果<br/>
    <!-- 上下标标签-->
    正常的文字<sup>上标</sup>与<sub>下标</sub>后的效果<br/>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PQjeb1tp-1608721493605)(img\image-20201123102555054.png)]$

语句块标签

无特殊含义用于将书写好的标签进行包裹

div

span

列表标签

有序列表

在指定数据前自动添加有序数字

    <!-- 有序列表标签 -->
    <ol>
        <li>第一章</li>
        <li>第二章</li>
        <li>第三章</li>
        <li>第四章</li>
    </ol>

无序列表

使用符号进行每行的标识

    <!-- 无序列表标签 -->
    <ul>
        <li>第一章</li>
        <li>第二章</li>
        <li>第三章</li>
        <li>第四章</li>
    </ul>

自定义列表

自定义标签标题与内容

    <!-- 自定义列表 -->
    <dl>
        <dt>标题1</dt>
        <dd>内容1</dd>
        <dt>标题2</dt>
        <dd>内容2</dd>
    </dl>

超链接标签

超链接是网页中比较醒目的一段文本或一个图标，只要用鼠标单击超链接，浏览器就会打开超链接所指向的网页，从一个网页跳转到另一个网页.

 <a href="http:\\www.guabi.tv"  target="_blank"  title="进入挂逼的世界">GO</a>

1、href : 规定链接指向的页面的 URL；
2、target : 规定在何处打开链接文档：
（1）_top : 默认值，表示在当前窗口
( 2 ) _blank : 在新窗口
3、title : 规定关于元素的额外信息：
这些信息通常会在鼠标移到元素上时显示一段工具提示文本。

设置锚点

<a name="#锚点名称">锚点</a>

跳转锚点

<a href="#锚点名称">跳转锚点</a>

图片标签

<img src="images/pic1.jpg" width="400px" height="363px" alt="萌萌哒" />

1、src：规定显示图片的URL(图片地址/图片存放的位置)
相对地址：(1) 相对当前文档的位置来给引用的资源定位”…/”表示返回上一级目录
(2) 相对站点根目录的位置来给引用的资源定位一定是以”./”开始

2、alt：显示替换文本。在浏览器无法载入图像时，通过此属性对用户进行信息提示。

3、width、height : 可选属性

table表格标签

将数据以表格形式进行展示，一般与其表格相应标签一起使用

    <table border="1px">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>18</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>17</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>男</td>
            <td>16</td>
        </tr>
    </table>

table：表格标签的根标签包裹其他表格标签

tr：表格行标签包裹当前行拥有的列标签

th：表格标题标签,书写在表格首行用于表格内容书写

td：表格表格，包裹每个表格实际数据

    <table border="1">
        <tr>
            <td colspan="2" rowspan="2">菜单</td>
            <td rowspan="4">备注</td>
        </tr>
        <tr>
        </tr>
        <tr>
            <td>宫保鸡丁</td>
            <td>鱼香肉丝</td> 
        </tr>
        <tr>
            <td>木须炒蛋</td>
            <td>馒头烩馍</td>
        </tr>
    </table>

colspan：当前单元格所占行数

rowspan：当前单元格所占列数

form表单标签

将数据以表单形式进行展示

form表单根标签，用于标识所有表单标签

input输入框标签，在表单中根据type不同拥有不同的功能

<form action="" method="get">

action用于表单提交，将表单中书写的数据以name=value的形式提交至指定路径

methid用于表单提交方式get/post 数据提交方式

<input type="" name="" value="" size="" maxlength="">

属性	说明
type	此属性指定表单元素的类型。可用的选项有:text, password, checkbox, radio,submit, reset, file, hidden, image和button。默认选择为text
name	此属性指定表单元素的名称。例如，如果表单上有几个文本框，可以按名称来标识它们，如textl, text2等。名称属性的作用域为form元素内
value	此属性是可选属性，它指定表单元素的初始值。
size	此属性指定表单元素的初始宽度。如果type为text或password，则表单元素的大小以字符为单位。对于其他输入类型，宽度以像素为单位
maxlength	此属性用于指定可在text或password元素中输入的最大字符数。默认为无限大

    <form action="" method="get">
        <hr>
        默认文本输入框:<br>
        <input type="text" name="text1" value="默认" ><hr>
        设置size与maxlength文本输入框:<br>
        <input type="text" name="text2" value="默认" size="20" maxlength="10" ><hr>
        密码w文本输入框:<br>
        <input type="password" name="password" ><hr>
        多行文本框：<br>
        <textarea name="textarea" id="textarea" cols="2" rows="2">默认值</textarea><hr>
        复选框：<br>
        <!-- 一般相同问题的复选框name相同 -->
        <input type="checkbox" name="like"  value="cy">抽烟&nbsp;
        <input type="checkbox" name="like"  value="hj">喝酒&nbsp;
        <input type="checkbox" name="like" value="tt">烫头&nbsp;<hr>
        单选框：<br>
        <!-- 单选框需要实现某一个被选中时清空其他选中 默认不选择 使用checked属性设置选中-->
        <input type="radio" name="sex" value="nan" >男&nbsp;
        <input type="radio" name="sex" value="nv" checked>女<hr>
        下拉框：<br>
        <!-- 默认选中下拉框第一个 可以使用selected属性默认选中 -->
        <select name="select">
            <option value="c1">JAVA</option>
            <option value="c2">H5</option>
            <option value="c3">PHP</option>
            <option value="c4" selected>UI</option>
        </select><hr>
        列表框：<br>
        <!-- 为下拉框设置展示条数 使用列表形式进行数据选中 -->
        <select name="select" size="3">
            <option value="c1">JAVA</option>
            <option value="c2">H5</option>
            <option value="c3">PHP</option>
            <option value="c4" selected>UI</option>
        </select><hr>

        文件域：<br>
        <input type="file" name="file" ><hr>

        隐藏域：<br>
        实际存在于页面但是在页面看不见
        <input type="hidden" name="hidden" value="隐藏的数据"><hr>
        图片域：<br>
        <input type="image" src="../img/cxk2.gif" ><hr>

        提交按钮：<br>
        <!-- 将当前form表单以及数据以指定方式提交至指定服务器 -->
        <input type="submit" name="submit" value="提交" /><hr>
        重置按钮：<br>
         <!-- 将当前form标签所有的输入重置为初始值 -->
        <input type="reset" name="reset" value="重置" /><hr>

        普通按钮：<br>
        <!-- 没有任何功能的按钮 -->
        <a href="#"><input type="button" value="按钮"></a>
    </form>

带有二级标题的下拉框<br>
    <select size="3">                   
        <optgroup label="Swedish Cars">
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
        </optgroup>
        <optgroup label="German Cars">
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </optgroup>
      </select>

label标签

在进行单选框复选框选择是需要点击相应的框才能进行选择，标注标签可以进行设置，为指定选择的标签定义唯一id，通过标注标签进行映射，当点击标注标签内容时会自动映射为对相应单选或复选框的点击选择

    	label标签         标注标签<br>
    
        <input type="radio" name="sex" id="nan"  value="nan"> 
        <label for="nan">男</label>
      
        <input type="radio" name="sex" id="nv"  value="nv"> 
        <label for="nv">女</label>

fieldset自定义说明标签

进行一定格式的说明文字的样式定义

    <fieldset>
        标签 自定义标签<br>
        <fieldset> 说明标签
            <legend>Personalia:</legend>
            Name: <input type="text"><br>
            Email: <input type="text"><br>
            Date of birth: <input type="text">
        </fieldset>
    </fieldset>

iframe标签

内连框架标签，用于在当前页面内插入另一个页面

<iframe src="https://www.baidu.com" frameborder="0" width=100%  height=930px></iframe>

在当前页面内加入已有的另一个页面

Relaxaaa

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html基础，常用标签

HtmlHTML：Hyper Text Markup Language 超文本标记语言用于书写在页面上可以直接被浏览器解析执行的语言(标签)通过固定的标签进行相应功能的实现使用根标签进行文件的书写之后再根标签中书写相应的二级或多级标签实现相应页面的书写html标签html标签是文档的根标签head标签页面的头部分可以包含页面的标题、文件MIME类型、样式表、脚本等title标签设置文档的标题body标签html文档的主体部分，放置需要呈现给用户的内容meta标签主要功能：为页
复制链接

扫一扫