html所有标签超详细概述

HTML

1.html由浏览器去解析,存在兼容性问题
2.html文件的后缀名可以是 .html 或 .htm
3.它是一个标记语言,并非编程语言


标签

1.标签是由尖括号包围的关键词比如 <html>
2.标签分为单标签和双标签 <br/>   <p></p>
3.标签之间可以相互嵌套,切记不准许穿插嵌套  <div><p></br></p></div>


属性
    1.<标签名 属性名1="属性值" 属性名2="属性值" ... 属性名N="属性值">
      	<!– 输出内容…  -->
      </标签名>
    2.所有关于样式的属性,我们均可以不去记忆,有单独的css可以完成


注释 重要
    1.html    <!--   被注释的内容    -->
    2.为了提高代码的可读性


html文档特性
    1.在源码中所敲空格和回车都只起一个空格的作用,写再多也没有效果
    2.切记不要使用空格去排版

文档命名规则
    第一个字符必须是字母,之后的字符可以是数字,字母,下划线(还可以有点  .)


文档主体结构h5
<!DOCTYPE html>    文档声明头,告知浏览器下面所写的代码用那个版本去解析
<html>
    <head>填写公共属性信息,用户所查看不到的内容,填写在这里面</head>
    <body>凡是想让用户查看的信息,我们填写在body里</body>
</html>

head中的内容
<meta charset="UTF-8">   设置中文字符集
<meta http-equiv="refresh" content="5;url=https://www.baidu.com">   自动刷新及跳转
<title></title>  设置网页标题的标签


body中的内容

<h1~6>填写标题内容</h1~6> 独占一行  样式上字体较大,文字加粗。对搜索引擎有很好的优化作用!但是一个页面仅限用一次
<p>填写段落内容</p>   独占一行
<br/>  单标签   具有换行效果
<pre></pre>   按照html源码中的格式展现在浏览器上!
<hr/>  单标签 显示一条与父标签等宽的水平线
<span></span> 无意义的行及标签 不会独占一行
<div></div>  无意义的块及标签 独占一行

        非重点
        粗体标签	<b></b>
        斜体标签	<i></i>
        下划线标签	<u></u>
        删除线标签	<del></del>
        上标标签		<sup></sup>
        下标标签		<sub></sub>

字符实体
    用于显示是一些有特殊意义的符号,在源码中所写的内容不能直接显示在页面当中,就需要用到字符实体
    常用的字符实体:
        空格:  
        <   :  <
        >   :  >
        &   :  &
        ¥  :  ¥   中国钱的单位

a链接标签
    <a href="填写链接地址" target="设置打开方式" title="用于对链接的描述">链接名称</a>
    href :
            1.可填写具体的网络地址
            2.还可以填写相对地址
            3.可以填写绝对地址
            4.什么都不填写,代表当前页面的
            5.填写#号,代表当前页面刷新

    target:
            1._blank  新页面打开
            2._self   默认形式,代表在当前打开新的页面

    title:当用户鼠标放在链接上时,会有一个小提示。提示的内容就是我们所填写的值

锚点链接
    需要现在页面当中设置锚
        <a name="自定义锚的名字"></a>

    想要跳转至某个锚的时候
        <a href="文件地址#要跳转的锚的名称">自定义文字</a>


图片标签
    <img src="填写图片地址" alt="对图片的简单介绍">

    src:
        1.可以填写网络地址
        2.可以填写当前服务器上的相对地址

    alt:
        在图片没有加载时,自动显示alt中的内容,给用户友好体验
        搜索引擎在搜索优化时,能够更好更准确的知道当前图片的内容,更加容易让搜索引擎收录


热点地图   非重点
需要在img标签中填写usemap属性  属性值 "#自定义的名称"
<map name="等于usemap中自定义的名称,不带#号"  id="与我们的name值相同">
    <area shape="热点类型" coords="根据热点的形状,填写不同个数的值" href="跳转地址"/>
</map>
    定义id的目的,是为了让更多的浏览器支持热点地图标签
    shape:
        rect   矩形
        circle   圆形
        poly  多边形

    coords:
        矩形,两个点确定一个矩形   x1,y1,x2,y2
        圆形,一个点加上一个半径   x,y,r
        多边形,根据我们想要画的多边形的顶点来确定具体的点的个数


列表标签
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    列表标签是固定搭配结构,在ul和li或li和li直接都不要填写其他内容,容易造成意想不到的后果
    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    <dl>
        <dt></dt>
        <dd></dd>
    </dl>

表格标签
  <table>
	<caption></caption>
	<tr>
	   <th></th>
       <th></th>
    </tr>
    <tr>
	   <td rowspan=""  colspan=""></td>
       <td></td>
     </tr>
  </table>

  table同样是固定搭配格式,中间不要放任何代码
  caption 表的标题内容所展示位置
  th 表头所存放的位置   字体会加粗,默认会居中对齐

  使用合并时,一定注意将多余的代码删除
  rowspan  跨行合并
  colspan  跨列合并


form表单   重点

    所有的表单均需要写在form标签对中
    <form>
        表单内容
    </form>
        action:填写提交地址,如果不填写,代表提交至当前页面
        method:提交方式,get或post   默认是get
                get 通过url把用户所填写的表单内容进行传输,速度快,但是安全性不高并且传输内容较少,最多8万个字符
                post 加密方式提交,相对比较安全,但是速率较慢。并且我们在传输过程中查看不到传输的内容

    表单中的公共属性
        name:所有的表单我们均需要填写name属性(提交功能的表单除外),若没有name属性,则无法把对应的值提交至服务器。
        value:默认值。
        maxlength:设置用户填写的最大长度,长度单位为字符个数(中英文通用!),但在实际项目开发中,不推荐大家使用。

        readonly:
        readonly 属性规定输入字段为只读,但其value值仍会被表单提交
        readonly属性只针对text、password和textarea有效

        disabled:
        disabled属性规定禁用该表单元素,其value值不会被表单提交
        disabled属性对所有表单元素均有效,包括包括select, radio, checkbox, button等
        使用disabled属性后表单元素背景会变成灰色


    单行文本框
    <input type="text" name="起一个名字"/>

    密码框
    <input type="password" name=""/>

    多行文本框
        与单行文本框相对比,填写的内容让用户查看到的更多。
    <textarea name=""></textarea>

    单选框
        name:同一组单选框要使用相同name名称。
        value:单选框提交数据与其他框不同,它是没有值的!所以需要我们手动定义值,这时候就需要用到value。
        checked:若想要设置默认选项,就在对应的表单上填写checked属性。
    <input type="radio"  name=""  value=""  checked="checked" />

    复选框
        name:同一组复选框要求名称相同,并且名字后面一定要加上一个英文的 [] , 为了解决重名问题。
        value:多选框本身同样是没有值,需要我们提前自定义。
        checked:用于选择默认选项的。
        <input type="checkbox" name="like[]" value="0" checked="checked"/>

    下拉菜单
    select:代表下拉菜单框
    option:具体的菜单选项
    value:填写value后台才能对应接收到数据
    <select name="cs" id="" >
         <option value="zz">郑州</option>
         <option value="sh">上海</option>
         <option value="bj">北京</option>
    </select>

    浏览框
    <input  type="file"   name="" />

    隐藏表单
    name:自定义的名字
    value:是服务器所给我们指定好的值
    <input type="hidden" name="" value=""/>


    提交按钮
    	<input  type= "submit"   name=""   value=""/>
       <button type=“submit”>提交</button>
    重置按钮
    	<input  type= "reset"   name=""   value=""/>
    	<button type="reset">重置</button>
    普通按钮
    	<input  type= "button"   name=""   value=""/>
    	<button type="button">普通按钮</button>


    用于与表单标签实现绑定关系
        需要在绑定表单当中自定义一个id
        for:该 label想要与那个表单进行绑定时,把对应的表单的id填写在for上
    <label for=""></label>





















评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值