首页 > Web开发 > 详细

HTML标签

时间:2020-02-23 20:59:53      阅读:99      评论:0      收藏:0      [点我收藏+]
HTML标签是HTML语言中最基本的单位,HTML标签是HTML最重要的组成部分。
 
html标签的分类:
  单标记、双标记
 
  双标记(常规标记):  <标签 属性="属性值" 属性="属性值">  <标签>
        单标记(空标记):     <标签 属性="属性值">
 
特点:
  1、由尖括号包围关键词,如 <html>             
  2、通常是成对出现的,也有单独呈现的标签,如:<img src="" />等。             
  3、标签对中的第一个标签是开始标签,第二个标签是结束标签;                               
     4、一般成对出现的标签,其内容在两个标签中间。单独呈现的标签,则在标签属性中赋值。如<h1>标题</h1>和 <input type="text"  />。              
  5、网页的内容需在<html>标签中,标题、字符格式、语言、兼容性、关键字、描述等信息显示在<head>标签中,而网页需展示的内容需嵌套在<body>标签中。
 
 
接下来说一些常用的标签及其用法:

文本标题标签:  h1 - h6
        特点:有默认样式:文本会加粗、字号不一样
        h1标签是比较特殊的:唯一性。在单独页面中只能出现一次,放网站logo
        h2-h6:板块的标题、一段叙述性文本的标题。。。
        需要注意的问题:h1-h6  不能互相嵌套
 
文本的加粗和文本的倾斜:
        加粗:<b></b>   <strong>语义化:表示强调</strong>
        倾斜:<i></i>   <em></em>
 
下划线、水平线、换行符:
        下划线:<u></u>
        水平线:<hr>
        换行符:<br>

段落标记:
        <p></p>
        p标签是不能进行相互嵌套的
        p标签里不能嵌套标题标签(h1-h6)

span标签:
        表示一个字符,或者 某一小段文本

转义字符:
        &nbsp;  不换行的空格
        &lt;   <
        &gt;   >
        &copy;  备案图标 ©
 
块|容器标签:
  div
        作用:划分网页结构。
 
列表:
1、无序列表:
        <ul>
            <li></li>
            <li></li>
        </ul>
        特点:默认情况下,每一个li前面都存在一个列表符号(实心圆点)
        怎么用:实现新闻列表、页面的主导航

2、 有序列表:
        <ol>
            <li></li>
            <li></li>
        </ol>
        特点:列表符号默认为数字
        扩展:更改列表符号
            type="a"
            type="A"
            type="i"
            type="I"
       start="" 属性值只能接受数字

3、自定义列表:
        <dl>
            <dt></dt>
            <dd></dd>
        </dl>
 
超链接:
<a></a>
a标签的属性:
            href="url"   作用:跳转地址。
            <a href="#">新闻</a>        #表示空连接,在当前页面进行跳转。不会进行跳转 如果页面内容比较多,页面出现滚动条,那这个#,会跳转本页面的顶端
            <a href="###">新闻</a>    空连接,不会跳转到顶部。常用来模拟一个按钮。
            <a href="javascript:void(0)">新闻</a>     模拟按钮

            target="" 
                属性值:
                    _self: 默认值,在当前窗口打开
                    _blank: 新建一个窗口,打开目标地址

            rel="nofollow"    //不让爬虫进行收录

            title=""  //做提示信息。(鼠标放在链接上不动,显示信息) 不仅仅使用在a标签上,大部分都支持

           超链接默认的样式:字体为蓝色且有下划线。
 
图片:
img:
        属性:
            src="图片的url"    必须存在的属性
                         必须存在的属性
            作用:a:文本替换图片(当图片加载不出来的时候,显示alt里面的文本)
                       b:搜索引擎检测不到图片里面的文本。会查找alt里面的文本  (seo优化)  
            title=""   :
            作用:a:提示文本
                       b:当作图片的小标题
            width=""  图片的宽  
            height-""  图片的高
            border=""  给图片添加边框
 
表格:
作用:显示数据
 
表格标签:
        table 表格
        tr    行
        td    列

表格属性:
        width=""   宽(table上添加,就是整个表格的宽。如果添加在td上就是每列的宽)
        height=""  高(同理)
        border=""  添加边框
        bordercolor=""  边框颜色
        cellpadding=""  内容与边框的间距
        cellspacing=""  边框与边框之间的间距
        align=" "        水平对齐方式
            属性值:left center right
        valign=""        垂直对齐方式
            属性值:top middle botttom


单元格的合并:
        只要跨行:都是合并行
        如果没有跨行:都是合并列

        行合并:rowspan="合并的单元格的数量"
        列合并:colspan="合并的单元格的数量"

        注:无论合并行还是合并列,都是给td添加属性,和谁合并就删谁
 
表单:
表单的作用:收集数据(收集用户信息)

表单放在form标签里。
        属性:
            action=""  接口(表单提交的路径)
            method="get/post"  数据提交的方法。
            name=""    表单的名称

表单控件:
       大部分通过input标签来实现
        input 的属性
                type=""  控制input显示类型(输入框、按钮、提交按钮、单选按钮)
                value=""  根据type类型的不同,作用也不一样
                    value在文本框的作用:提示信息、记录文本框的值
                    value属性在按钮里的作用:更改按钮的文本

                name=""   表单控件的名称
                maxlength=""   能输入的最大长度
                size=""     控件的大小(以字符为单位)

        文本框(输入框):
            <input type="text">
        密码框:
            <input type="password">
        空按钮:
            <input type="button">
        重置按钮:
            <input type="reset">
        提交按钮:(提交到action的路径)
            <input type="submit">
 
 
 
 
 

HTML标签

原文:https://www.cnblogs.com/LittleShy/p/12353416.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!