Html标签总结

最新推荐文章于 2021-08-10 14:43:41 发布

十指流玉

最新推荐文章于 2021-08-10 14:43:41 发布

阅读量376

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： html5

本文链接：https://blog.csdn.net/qq_41886231/article/details/104731215

笔记专栏收录该内容

23 篇文章

订阅专栏

总结一下Html中常用到的几种标签，直接上干货：

总结一下Html中常用到的几种标签，直接上干货：

HTML标签整理

标签分类

文字标签、布局标签、列表标签、表格标签、表单标签、超链接标签、图像标签

文字类标签

1.文字容器标签(自带换行)

标题：

<h1></h1>  <h6></h6>

段落：

<p></p>

2.文字修饰类标签

斜体标签：

<em></em>  <i></i>

加粗标签：

<b></b>  <strong></strong>

细体标签：

<small></small>

删除线：

<del></del>

换行标签：

<br/>

布局类标签

块容器

自己要占一行

<div></div>

内链布局

可以多个一行，直到超出父容器的宽度

<span></span>

导航栏

<nav></nav>

列表类标签

无序列表

<ul>
    <li>
    </li>
</ul>

有序列表

<ol>
    <li>
    </li>
</ol>

自定义列表

<dl>
    <dt>
    
    </dt>
    
    <dd>
    
    </dd>
</dl>

图像类标签

SRC:图片来源：绝对地址（带盘符路径）、相对地址（ ../ 类型的格式）、图片链接（在线的http协议格式）

ALT：用于代替图片文本，在图片加载失败时显示 或者 有利于搜索引擎收录

<img src="" alt="" />

超链接标签

href：超链接指向

URL：统一资源定位符

URI：统一资源标志符

文件路径：./1.html

target：链接打开方式

_blank：在新的窗口中打开

_self：在本页面中打开

<a href="" target="" ></a>

表格标签

由大到小：table tbody tr th/td

cellspacing：间距

cellpadding：填充

border：边框

colspan：行合并 系数为合并数

rowspan：列合并

<thead>表头区域，是一个区域，可以包含多行

<tbody>内容区域，是一个区域，可以包含多行

<tr>代表的是一行

<th>一个单元格，相当于表头，显示过程中是加粗显示

<td>一个单元格

<tr>中可以包含多个<th>和<td>

<table border="10" cellspacing="10" cellpadding="10">
        <thead>
            <tr><th>姓名</th><th>成绩</th></tr>
        </thead>
        <tbody>
            <tr><td>墨眉</td><td>100</td></tr>
            <tr><td>十指流玉</td><td>100</td></tr>
        </tbody>           
    </table>

表单标签

form：

method(提交方式)：get / post

action(提交的地址)：

target(目标打开的方式)：_blank / _self / _parent / _top / framename

input：

type(输入框类型):text / password / button / submit / radius / checkbook

name(输入的值类型):

value(输入的值):

button：

submit：

button：

<div>
        <form action="http://112.74.72.107:3333/try" method="post" target="_blank">
            <!-- <lable name="">中的name 与 id 相联系 -->
            <label for="name">
                姓名：<input type="text" value="username" id="name" placeholder="姓名"/>
            </label>
            <br/>
            <!-- 单选框想要实现同一组，必须使用name 属性 -->
            性别：<input type="radio" value="man" name="sex"/>男 <input type="radio" value="woman" name="sex"/>女
            <br />
            班级：
                <select name="class">
                    <option value="jk">计科</option>
                    <option value="wl">网络</option>
                    <option value="sz">数字</option>
                </select>
                <br />
            爱好：
            <!-- 同样使用name属性进行分组设置  -->
                <input type="checkbox" name="like"/>运动
                <input type="checkbox" name="like"/>看电影
                <input type="checkbox" name="like"/>唱歌
                <input type="checkbox" name="like"/>跳舞
                <br />
                <!-- rows行 cols列 -->
            备注：<textarea name="intro" rows="2" cols="15" placeholder="备注"></textarea>
            <br/>
            <button type="reset">重置</button>
            <button type="submit" >提交</button>
        </form>
    </div>

iframe内联框架

可以将另外一个网页引入当前网页

<div>
        <iframe src="http://ww.baidu.com" width="1000px" height="1000px"></iframe>
</div>

功能类标签

<!-- 引入外联CSS标签  -->
<link />

<!-- 引入内联CSS  -->
<style>

</style>

<!-- 引入javascript  -->
<script>

</script>