html常规标签总结

最新推荐文章于 2024-08-04 14:23:51 发布

哼着自己的小调调

最新推荐文章于 2024-08-04 14:23:51 发布

阅读量1.8k

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_37610328/article/details/56671260

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

html中的标签：
超文本标记语言（外国语简称：HTML）标记标签通常被称为HTML标签，HTML标签是HTML语言中最基本的单位，HTML标签是HTML（标准通用标记语言下的一个应用）最重要的组成部分。
html标签的大小写无关的，推荐使用小写。
特点：
1. 由尖括号包围的关键词，通常是成对出现的，比如<div>和</div>
2. 标签对中的第一个标签是开始标签，第二个标签是结束标签；开始和结束标签也被称为开放标签和闭合标签。也有单独呈现的标签，如：<img src="123.jpg" />等
3. 一般成对出现的标签，其内容在两个标签中间。单独呈现的标签，则在标签属性中赋值。如<h1>标题</h1>和 <input type="text" value="按钮" />
4. 网页的内容需在<html>标签中，标题、字符格式、语言、兼容性、关键字、描述等信息显示在<head>标签中，而网页需展示的内容需嵌套在<body>标签中。某些时候不按标准书写代码虽然可以正常显示，但是作为职业素养，还是应该养成正规编写习惯

常用标签和特点：
1. html超文本标记语言 – 所有网页标签的一个容器
2. head定义了网页（文档）的信息，（不会显示在游览器窗口）
3. meta 定义了html文档中的元数据，网页的元信息（charset=utf-8指网页内容的编码类型，国际编码）
gbk2312 中文编码类型
4. title 定义了文档的标题
5. body网页的主体内容区域（游览器窗口中显示的内容）
6. div 俗称为盒子，division(分割)。特点：默认高度为0，宽度相对于父级盒子是100%；独立成行，垂直显示（默认垂直布局）。结构：包含关系 = 父子结构；同级关系 = 兄弟结构
7. img图片标签：（单闭合标记）。<img src=”图片路径” />；title=”鼠标悬停时显示的文字”；alt=”图片路径发生错误时，给用户的友好提示”；特性：前景图占位，不会平铺，位置是放在body结构中的。
8. <br /> 换行标签
9. h1~h6 标题标签。<h1>标题文字</h1> 特征：级别由高到低，h1~h6，一般页面中h1只使用一次，因为要分清主次关系。自带加粗，字体大小，外间距，且是块级元素。独立成行，具有div的全部特征。
10. p段落标签 <p>段落文本</p> 特征：具有div的全部特征，自带外间距
11. ul无序列表
语法格式：

     <ul>

                      <li>子项</li>
                      <li>子项</li>
                      <li>子项`</li>



    </ul>

ol有序列表
语法：

       <ol>
            <li>子项</li>
            <li>子项</li>
            <li>子项</li>
          </ol>

特征：ul，ol具有div的全部特征，自带列表符、外间距、内填充。
去掉列表符样式 ul{ list-style:none; }
13. 万能标签<span></span> 行级元素
14. a标签 – 超链接标签
格式：<a href=”跳转网址”>文字内容或者图片</a>
特征：自带蓝色，下划线，访问后会变为紫色，如果为空链接，可以用#占位
注意：标签自带的样式特征是无法父级改变的（例如a的颜色和下划线）
新窗口打开：target=“_blank
15. 定义列表：dl（块级元素，其中dl，dd自带外间距）

<dl>
<dt>标题</dt>
<dd>子列表项</dd>
<dd>子列表项</dd>
<dd>子列表项</dd>
</dl>

特点：自带外间距，一个dl里面可以有多个dt和dd；
16. 邮件链接：<a href=”mailto:123@qq.com”>发送邮件</a>
可以调用本地邮件系统
17. 锚点技术：实现单页面间的跳转
第一种方法：
1、下锚（做记号）跳转的目标位置<a name=”自定义的锚点名称”></a>
2、在导航上，写上<a href=”#锚点名”></a>
第二种方法：
1、下锚（做记号）<div id=”自定义锚点名”></div>
2、在导航上，写上<a href=”#锚点名”></a>
18. form表单标签 – 相当于表单控件的容器
格式：<input type=”类型”/>
文本框：type=“text” name=”标识名” value=“默认值” placeholder=”默认名/值”
密码框：type=“password” name=“标识名”
name属性规定input元素的名称，用于对提交到服务器后的表单数据进行标识，或者在客户端通过JavaScript引用表单数据。
单选框：type=”radio”name=”起一个统一的名字，实现单选”
checked=”checked”(默认被选中的)
多选框：type=”checkbox” checked=”checked”(默认被选中的)
下拉列表：

            <select>
                <option>子项</option>
                <option>子项</option>
                <option>子项</option>
            </select>

    selected=”selected” 默认选择
    文本域：<textarea>实现多行文本的</textarea>
    按钮：
     单纯的按钮： type=“button” value=“改写或重置文字的”
     提交按钮：type=”submit” value=“改写或重置文字的”
     重置按钮：type=“reset” value=“改写或重置文字的”