前端HTML标签

三世轮回 提交于 2019-12-18 15:20:54

一. HTML是什么

  HTML是超文本暴击语言( Hypertext Markup Language )是一种创建网页的标记语言,而不是一种编程语言

  本质上是浏览器可识别的规则,我们按照规则写网页,浏览器根据规则渲染我们的网页.对也不同的浏览器,对同一个标签可能会有不同的解释

  网页文件扩展名 : .html 或 .htm

二. HTML标签格式

  HTML标签由尖括号包围的关键字 : < >

  HTML标签通常是成对出现的 : <div></div> 第一个标签是开始,第二个标签是结束

  标签内可以有若干属性,也可以不带属性

  标签语法 :

    <标签名 属性1='属性值1' 属性2='属性值2'.....>显示内容</标签名>

    <标签名 属性1='属性值1' 属性2='属性值2'..../>

  部分重要的属性 :

    id : 定义标签的唯一ID,HTML文档内唯一

    class : 为html元素定义一个或多个类名

    style : 规定元素的内部样式

  HTML注释 :

    <!--注释内容-->

三. 最基本的HTML格式

<!DOCTYPE html> #声明为HTML5文档
<html lang="zh-CN">#文档开始标记,声明网页编码
<head>#定义了HTML文档的开头,head内的内容不会在用户面前显示
  <meta charset="UTF-8">
  <title>css样式优先级</title>#网页标题
</head>
<body>
<!--网页内部用户看得见的东西-->
</body>
</html>#文档结束标识

四. head内常用的标签

<title></title> 定义网页的标题
<style></style> 定义内部样式
<script></script> 即可以包含脚本文件,也可以引入(指向)外部脚本文件
<link/> 链接外部样式表
<meta/> 提供有关页面的元信息(针对搜索引擎和更新频率的描述和关键词等)

  <meta>属性 :

属性

可选参数

作用
http-equiv

 content-type

expires

refresh

set-cookie

相当于http的头文件,它可以给浏览器传回一些能帮助网页正确显示的信息
content some_text 定义与http或name相关的属性,其实就是http或name各个参数的变量值
name 

author

description

keywords

generator

revised

others

主要用于描述网页,content中的内容主要是便于搜索引擎分类和查找

五. body内常用标签

  <b>加粗</b>

  <i>斜体</i>

  <u>下划线</u>

  <s>删除</s>  ( 在文本内容上画删除线 )

  <p>段落(大量文本)</p>

  <h1>一级标题</h1>

  <h2>二级标题</h2>

  <h3>三级标题</h3>

  <h4>四级标题</h4>

  <h5>五级标题</h5>

  <h6>六级标题</h6>

  <br>  换行

  <hr>  分割线

  &nbsp;  空格

  &gt;  >

  &lt;  <

  &amp;  &

  &yen;  ¥

  &copy;  版权

  &reg;  注册

  <div>用来定义一个块级元素,并无实际意义.主要通过css样式为其赋予不同的表现</div>

  <span>用来定义内联/行内元素,并无实际意义.主要通过css样式为其赋予不同表现</span>

    所谓块级元素就是另起一行开始渲染的元素,行内元素则不需要另起一行.如果单独在网页内插入这两个元素,不会对页面产生任何影响.

  <img src='图片的路径' alt='图片加载失败是提示语' title='鼠标悬浮时提示信息' width='图片宽度' height='图片高度'>( 宽高两个属性若只写一个会自动等比例缩放 )

  超链接标签 :

    <a href="http://www.baidu.com" target="_blank"/target="_self">网页显示点击内容</a>

      target = "_blank"  表示在新标签页打开目标网页

      target = "_self"  表示在当前标签页中打开目标网页 

  列表标签 :

        <p>
            <ol type="I">
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
            </ol>
        </p>

        <p>
            <ul>
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
            </ul>
        </p>
        <p>
            <dl>
            <dt>标题1</dt>
            <dd>内容1</dd>
            <dt>标题2</dt>
            <dd>内容2</dd>
            <dt>标题3</dt>
            <dd>内容3</dd>
            <dt>标题4</dt>
        </dl>
        </p>

 

    1.无序号标识列表

      <ul type="disc"><li>列表内容</li></ul>

      type属性 :

        disc : 实心圆点(默认值)  

        circle : 空心圆圈

        square : 实心方块

        none : 无样式

    2.有序号标识列表

      <ol type="1" start="2"><li>列表内容</li></ol>

      type属性 :

        1 : 数字列表.默认值

        A : 大写字母

        a : 小写字母

        I : 大写罗马数字

        i : 小写罗马数字

    3.标题列表

      <dl>

        <dt>标题</dt>

        <dd>内容</dd>

      </dl>

  表格标签

 <table border="">
            <thead>
                <tr>  <!--定义表格行-->
                    <th>姓名</th>  <!--定义表头,表头默认加粗-->
                    <th>年龄</th>
                    <th>性别</th>
                </tr>
            </thead>
            <tbody>
            <tr>
                <td>王一</td>  <!--定义表格单元-->
                <td>18</td>
                <td>女</td>
            </tr>
            <tr>
                <td>王二</td>
                <td>16</td>
                <td>男</td>
            </tr>
            </tbody>
            </table>
属性 属性可选参数 含义
align

left

center

right

可以使用css样式代替

规定表格相对周围元素的对齐方法

bgcolor

rgb

colorname

可以使用css样式代替

规定表格的背景颜色

border pixels 规定表格边框的宽度
cellpadding

pixels

%

规定单元边沿与其内容之间的空白
cellspacing

pixels

%

规定单元格之间的空白
frame

void

above

below

hsides

ihs

rhs

vsides

box

border

规定外侧边框的那个部分是可见的
rules

none

groups

rows

cols

all

规定内侧边框的那个部分是可见的
summary

text

规定表格的摘要
width

%

pixels

规定表格的宽度
rowspan

行数

单元格竖跨多少行
colspan 列数 单元格横跨多少列

  form表单

    表单用于向服务器传输数据,从而实现用户与Web服务器的交互

    表单能够包含input系列标签,比如 : 文本框,复选框等

    表单还包含textarea,sekect,fieldset和label标签

    form元素都是块级元素,其前后会产生折行

属性 属性的参数 含义
accept MIME_type HTML 5不支持
accept_charset charset_list

规定服务器可以处理的表单数据字符集

action URL

 规定当提交表单时向何处发送表单数据

 autocomplete

on

off 

规定是否启用表单的自动完成功能(默认开启) 
 enctype

 application/x-www-form-urlencoded

multipart/form-data

text/plain

规定在发送表单数据之前如何读其进行编码 有文件类型的数据需要上传时使用

默认url-encoded

 method

get

post 

 规定用于发送form-data的http方法

默认GET

 name form_name 规定表单的名称 
 novalidate novalidate  该属性可以换使表单被提交时不被验证 
 target

_blank

_self

_top

_parent

framename 

规定在何处打开 action URL 

默认:_self

    表单元素 :

      基本概念 :

      HTML表单时HTML元素中较为复杂的部分,表单一般和脚本,动态页面,数据处理功能相结合,所有表单时制作动态网站的重要元素

      表单一般用于收集用户的输入信息

    表单的工作原理 :

      访问者在访问含有表单的网页时,对必要的信息填写后,通过某个按钮提交.这么信息通过internet传送到服务器上,服务器有专门的程序读这些数据进行处理,如果有错误会返回错误信息,并要求纠正错误,当数据完成无误后,服务器反馈一个输入完成的信息.

  input标签

    <input>元素会根据不同的type属性,变化为多种形态

type属性值 变现形式 对应代码
text 单行输入文本 <input type="text"/>
password 密码输入框(密文) <input type="password"/>
date 日期输入框 <input type="date"/>
checkbox 复选框 <input type="checkbox" checked="checked"/>
radio 单选框 <input type="radio"/>
submit 提交按钮 <input type="submit" value="提交"/>
reset 重置按钮 <input type="reset" value="重置"/>
button 普通按钮 <input type="button" value="普通按钮"/>
nidden 隐藏输入框 <input type="nidden"/>
file 文本选择框 <input type="file"/>

    属性说明 :

      name : 表单提交时的"键" , 和id有区别

      value : 表单提交时对应项的值

        type="button","reset","submit"时,为按钮上显示的文本内容

        type="text","password","hidden"时,为输入框的初始值(默认值)

        type="checkbox","radio","file"时,为输入相关联的值

      checked : radio和checkbox默认被选中的项

      readonly : text和password设置只读

      disabled : 所有input均适用;input加载时禁用此元素

  select标签(下拉框标签)

    <form action="">
        <select name="city" id="">
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">深圳</option>
        </select>
    </form>
属性 属性的参数 含义
autofocus autofocus 规定在页面加载后文本区域自动获得焦点
disabled disabled 规定禁用该下拉列表
form form_id 规定文本区域所属的一个或多个表单
multiple multiple 规定可选择多个选项(默认单选,设置后多选)
name name 规定下拉列表的名字
required required 规定文本区域是必填的
size number 规定下拉列表中可见选项的数目

    属性说明 :

      selected : 默认选中该项

      value : 定义提交时的选项值

  label标签

    <form action="">
        <label for="1">用户名</label>
        <input type="text" id="1">
  <!--label简写-->
        <label>用户名
            <input type="text">
        </label>
    </form>

    <label>标签为input元素定义标记

    <label>元素不会向用户呈现任何效果

    <label>标签的for属性值应当与相关元素的id属性值相同

属性 属性对应参数 含义
for  id 规定label绑定到那个表单的id
form formid 规定label字段所属的一个或多个表单

  textarea多行文本

    文本区域内可容纳无线数量的文本,其中的文本默认字体是等宽字体

    可以通过cols和rows属性规定textarea的尺寸,不过更好的办法是使用css的height和width属性.

属性 属性的参数 含义
autofocus autofocus 规定在页面加载后文本区域自动获得焦点
cols number 规定文本区域的可见宽度(列数)
disabled disabled 规定禁用该文本区
form form_id 规定文本区域所属的一个或多个表单
maxlength number 规定文本区域的最大字符数
name name_of_textarea 规定文本区域的名称
placeholder text 规定描述文本区域预期值的简短提示
readonly readonly 规定文本为只读
required required 规定区域是必填的
rows number 规定文本区内的可见行数
wrap

hard

soft

规定在表单中提交时,文本区域的文本如何换行.
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!