一、HTML的定义

　　1. 超文本标记语言（Hypertext Markup Language，HTML）通过标签语言来标记要显示的网页中的各个部分。一套规则，浏览器认识的规则

　　2. 浏览器按顺序渲染网页文件，然后根据标记符解释和显示内容。但需要注意的是，对于不同的浏览器，对同一标签可能会有不完全相同的解释（兼容性）

　　3.  静态网页文件扩展名：.html 或 .htm

什么是标签:

  • 是由一对尖括号包裹的单词构成 例如: <html> *所有标签中的单词不可能以数字开头.
  • 标签不区分大小写.<html> 和 <HTML>. 推荐使用小写.
  • 标签分为两部分: 开始标签<a> 和 结束标签</a>. 两个标签之间的部分 我们叫做标签体.
  • 有些标签功能比较简单.使用一个标签即可.这种标签叫做自闭和标签.例如: <br/> <hr/>  <img />
  • 标签可以嵌套.但是不能交叉嵌套.

标签的属性:

  • 通常是以键值对形式出现的. 例如 name="galileo"
  • 属性只能出现在开始标签 或 自闭和标签中.
  • 属性名字全部小写. *属性值必须使用双引号或单引号包裹 例如 name="galileo"
  • 如果属性值和属性名完全一样.直接写属性名即可. 例如 readonly

块级标签和内联标签

　　块级标签：<p>　　<hn>　　<table>　　<ol>　　<ul>　　<form>　　<div>　　<dl>　　<hr>　　<form>

　　内联标签：<a>　　<input>　　<img>　　<span>　　<lable>　　<select>

block（块）元素的特点
　　① 总是在新行上开始；
　　② 高度，行高以及外边距和内边距都可控制；
　　③ 宽度缺省是它的容器的100%，除非设定一个宽度。
　　④ 它可以容纳内联元素和其他块元素

inline元素的特点
　　① 和其他元素都在一行上；
　　② 高，行高及外边距和内边距不可改变；
　　③ 宽度就是它的文字或图片的宽度，不可改变
　　④ 内联元素只能容纳文本或者其他内联元素

对行内元素，需要注意如下 
　　设置宽度width 无效。
　　设置高度height 无效，可以通过line-height来设置。
　　设置margin 只有左右margin有效，上下无效。
　　设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的

二、常用标签　

　　meta介绍
　　<meta>元素可提供有关页面的元信息（meta-information），针对搜索引擎和更新频度的描述和关键词。
　　<meta>标签位于文档的头部，不包含任何内容。
　　<meta>提供的信息是用户不可见的

　　meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

　　(1)name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

　　(2)http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

<head>

    <meta http-equiv="content-type" charset="UTF-8">

    <meta name="keywords" content="搜索引擎关键字">   　　

    <meta name="description" content="网页的描述信息">

    <meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">   # 2秒后重定向到某网站

    <title>web</title>　　　　　　　　　　　　　　　　　　　　　　　　　　　　

    <link rel="icon" href="http://www.jd.com/favicon.ico">　　　　　　    # 网页图标

    <link rel="stylesheet" href="mycss.css">　　　　　　　　　　　　　　　　 # 外部css文件

</head>

 基本标签

'''

<hn>: n的取值范围是1~6; 从大到小. 用来表示标题.

<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.

<b> <strong>: 加粗标签.

<strike>: 为文字加上一条中线.

<em>: 文字变成斜体.

<sup>和<sub>: 上角标 和 下角表.

<br>:换行.

<hr>:水平线

特殊字符：

      &lt;    &gt;    &quot;    &copy;    &reg;

'''

div和span标签

　　<div></div> ： <div>只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现. 
　　<span></span>： <span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现.

　　块级元素与行内元素的区别
　　所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
　　这两个元素是专门为定义CSS样式而生的。

图形标签 <img>

'''

src: 要显示图片的路径.

alt: 图片没有加载成功时的提示.

title: 鼠标悬浮时的提示信息.

width: 图片的宽

height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

'''

超链接标签（锚标签）<a></a>

　　什么是超级链接？所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序

什么是URL？

URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。

URL举例

http://www.sohu.com/stu/intro.html

http://222.172.123.33/stu/intro.html

URL地址由4部分组成

第1部分：为协议：http://、ftp://等

第2部分：为站点地址：可以是域名或IP地址

第3部分：为页面在站点中的目录：stu

第4部分：为页面名称，例如 index.html

各部分之间用“/”符号隔开。

URL

'''

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

href属性指定目标网页地址。该地址可以有几种类型：

    绝对 URL - 指向另一个站点（比如 href="http://www.jd.com）

    相对 URL - 指当前站点中确切的路径（href="index.htm"）

    锚 URL - 指向页面中的锚（href="#top"）

'''

列表标签

'''

<ul>: 无序列表 [type属性：disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)]

<ol>: 有序列表

         <li>:列表中的每一项.

<dl>  定义列表

         <dt> 列表标题

         <dd> 列表项

'''

表格标签: <table>

<table>

         <tr>

                <td>标题</td>

                <td>标题</td>

         </tr>

         <tr>

                <td>内容</td>

                <td>内容</td>

         </tr>

</table>
'''

<tr>: table row

<th>: table head cell

<td>: table data cell

属性:

    border: 表格边框.

    cellpadding: 内边距

    cellspacing: 外边距.

    width: 像素 百分比.（最好通过css来设置长宽）

    rowspan:  单元格竖跨多少行

    colspan:  单元格横跨多少列（即合并单元格）

'''

表单标签: <form>

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

表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含textarea、select、fieldset和 label标签。

表单属性

action: 表单提交到哪.一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web

method: 表单的提交方式 post/get默认取值就是get

表单元素

　　基本概念：
　　HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。
　　表单一般用来收集用户的输入信息
　　表单工作原理：
　　访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。 
　　服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息

'''

<1> 表单类型

type:        text 文本输入框

             password 密码输入框

             radio 单选框

             checkbox 多选框  

             submit 提交按钮            

             button 按钮(需要配合js使用.) button和submit的区别？

             file 提交文件：form表单需要加上属性enctype="multipart/form-data" 

            上传文件注意两点：

                     1 请求方式必须是post

                     2 enctype="multipart/form-data"

 <2> 表单属性

 name:    表单提交项的键.

           注意和id属性的区别：name属性是和服务器通信时使用的名称；

           而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的

value:    表单提交项的值.对于不同的输入类型，value 属性的用法也不同：

                type="button", "reset", "submit" - 定义按钮上的显示的文本

                type="text", "password", "hidden" - 定义输入字段的初始值

                type="checkbox", "radio", "image" - 定义与输入相关联的值

checked:  radio 和 checkbox 默认被选中

readonly: 只读. text 和 password

disabled: 对所用input都好使.

'''
<body>

    <h1>用户注册</h1>

    <form action="" method="post">

        <p>姓名:<input type="text" name="username"></p>

        <p>密码:<input type="password" name="pwd"></p>

        <p>爱好:篮球<input type="checkbox" name="hobby" value="basketball">

                足球<input type="checkbox" name="pwd" value="football">

                乒乓球<input type="checkbox" name="pwd" value="pingpangball"></p>

        <p>性别:男<input type="radio" name="sex" value="male"> 女<input type="radio" name="sex" value="female"> 其它<input type="radio" name="sex" value="qita"></p>

        <p><input type="button" value="buttom"></p>

        <p><input type="file" value="文件"></p>

        <p><input type="hidden" value="文件"></p>

        <select name="province" size="" multiple>

            <optgroup label="中国">

                <option value="hebei">河北省</option>

                <option value="hainan">海南省</option>

                <option value="fujian" selected>福建省</option>

                <option value="jiangsu">江苏省</option>

            </optgroup>

        </select>

        <p>简介</p>

        <p>

            <textarea name="jianjie" rows="" cols=""></textarea>

        </p>

        <p><input type="submit" value="submit"></p>

        <label for="username">用户名</label>

        <input type="text" name="username" id="username">

        <fieldset>

            <legend>登录</legend>

            <input type="text">

        </fieldset>

    </form>

</body>

select标签

'''

 <select> 下拉选标签属性

          name:表单提交项的键.

          size：选项个数

          multiple：multiple

                 <optgroup>为每一项加上分组

                 <option> 下拉选中的每一项 属性：

                       value:表单提交项的值.

                       selected: selected下拉选默认被选中

'''

<textarea> 多行文本框

'''

<form id="form1" name="form1" method="post" action="">

        <textarea cols=“宽度” rows=“高度” name=“名称”>

                   默认内容

        </textarea>

</form>

'''

<label>标签

　　定义：

　　<label> 标签为 input 元素定义标注（标记）。
　　说明：
　　1 label 元素不会向用户呈现任何特殊效果。
　　2 <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

'''

<form method="post" action="">

        <label for=“username”>用户名</label>

        <input type=“text” name=“username” id=“username” size=“20” />

</form>

'''

<fieldset>标签

'''

<fieldset>

    <legend>登录吧</legend>

    <input type="text">

</fieldset>

'''

038--HTML的更多相关文章

  1. 李洪强漫谈iOS开发[C语言-038]-if else if语句

    李洪强漫谈iOS开发[C语言-038]-if else if语句

  2. [LeetCode] 038. Count and Say (Easy) (C++/Python)

    索引:[LeetCode] Leetcode 题解索引 (C++/Java/Python/Sql) Github: https://github.com/illuz/leetcode 038. Cou ...

  3. 038 01 Android 零基础入门 01 Java基础语法 04 Java流程控制之选择结构 05 案例演示switch结构-星期的表示案例以及总结

    038 01 Android 零基础入门 01 Java基础语法 04 Java流程控制之选择结构 05 案例演示switch结构-星期的表示案例以及总结 本文知识点:案例演示switch结构并对sw ...

  4. Unique Path AGC 038 D

    Unique Path AGC 038 D 考虑如果两个点之间只能有一个边它们就把它们缩起来,那么最后缩起来的每一块都只能是一棵树. 如果两个点之间必须不止一个边,并且在一个连通块,显然无解. 首先把 ...

  5. php大力力 [038节] 全栈工程师的含义

    管理时间 http://www.nowamagic.net/librarys/eight/posts/2753 从知乎上看到“全栈开发者”讨论之后的自黑 什么是全栈开发者 https://beeclo ...

  6. 038. asp.netWeb用户控件之六实现日期选择的用户控件

    web用户控件的ascx代码: <%@ Control Language="C#" AutoEventWireup="true" CodeFile=&qu ...

  7. Java for LeetCode 038 Count and Say

    The count-and-say sequence is the sequence of integers beginning as follows: 1, 11, 21, 1211, 111221 ...

  8. 038、Docker 的两类存储资源（2019-02-27 周三）

    参考https://www.cnblogs.com/CloudMan6/p/7127843.html   Docker为容器提供了两种存放数据的资源:       1.由storage driver  ...

  9. 038 lock wait timeout exceeded;try restarting transaction

    场景:有两个会话,其中会话1在事务操作,会话2在等待这个事务操作完成,然后会有这个报错产生. 通过查询资料,在这里整理一下. 一:总结timeout参数的作用 1.操作 2.具体解释 1)connec ...

  10. 树莓派进阶之路 (038) - P2P 文件下载机

    硬件要求: 树莓派开发板 USB外接硬盘 一. Together 1. 更新安装程序 sudo apt-get update sudo apt-get upgrade sudo apt-get ins ...

随机推荐

  1. XP操作系统设置：[82]关机快捷键

    磨镰刀不少割麦,掌握了快速关机的多种方法,在尴尬的时候说不定还真能派上用场呢.   工具/原料   手提电脑.台式电脑.Windows 操作系统. 方法一:   1 Windows XP 操作系统中有 ...

  2. SQL ORDER BY 关键字

    SQL ORDER BY 关键字 ORDER BY 关键字用于对结果集进行排序. SQL ORDER BY 关键字 ORDER BY 关键字用于对结果集按照一个列或者多个列进行排序. ORDER BY ...

  3. Go fsm

    package fsm import ( "log" ) type EvtIf interface { GetEvtType() string } type Action inte ...

  4. Effective C++ 条款15、16 在资源管理类中提供对原始资源的访问||成对使用new 与 delete要采取相同形式

    1.在资源管理类中提供对原始资源的访问     前几个条款很棒,它们是对抗资源泄露的壁垒,但很多APIs直接指向 资源,这个时候,我们需要直接访问原始资源.     这里,有两种方法解决上述问题,我们 ...

  5. npoi 加密 https://bbs.csdn.net/topics/380226272

    终于解决了,.1.用excel新建一个文件作为模板,可以是空内容,在excel中对文件进行加密,如密码为:12345. 2.在NPOI读取前,调用:Biff8EncryptionKey.Current ...

  6. 【java】itoo项目实战之hibernate 批量保存优化

    在itoo中.基本上每一个系统都有一个导入功能,大量的数据填写进入excel模板中.然后使用导入功能导入的数据库中,这样能够大大的提高工作效率. 那么导入就涉及到了批量保存数据库的问题了. 那么通常情 ...

  7. fatal error C1083: 无法打开预编译头文件:“Debug\opencv.pch”: No such file or directory

    stdafx.cpp右键——属性,预编译头选“创建”,其它cpp选“使用”. 调试不能优化.

  8. 《从零開始学Swift》学习笔记（Day 61）——Core Foundation框架之内存管理

    原创文章,欢迎转载. 转载请注明:关东升的博客 在Swift原生数据类型.Foundation框架数据类型和Core Foundation框架数据类型之间转换过程中,尽管是大部分是能够零开销桥接,零开 ...

  9. 百度新算法与网站SEO提升

  10. cat /proc/cpuinfo | awk -F: '/name/{print $2}' | uniq -c

    cat /proc/cpuinfo | awk -F: '/name/{print $2}' | uniq -c