HTML基础教程-优快云博客

本文介绍了HTML的基础知识，包括HTML的定义、标签使用、常见标签及属性介绍。覆盖了文档结构、表单元素、列表、表格等内容。

一、HTML简介

　　html是不是一门编程语言，而是一门标记语言，即超文本标记语言。它主要引用于编写网页文档。html文档通常用浏览器来解析，而单纯的html语言还无法得到我们如今网上浏览的生动页面，它还需要配合css和js的使用才有如今生动的页面。

浏览器按顺序渲染网页文件，然后根据标记符解释和显示内容。但需要注意的是，对于不同的浏览器，对同一标签可能会有不完全相同的解释（兼容性）
html使用标签来标记内容，从而描述网页
静态网页文件扩展名：.html 或 .htm

二、标签简介

html是通过标签来标记内容，大多数标签都是成对出现的，即有开头和结尾标签，也有一些标签没有闭合标签。例如：

<!DOCTYPE html>   告诉浏览器使用什么样的html来解析文档
<html>                    html文档的开始标签，成对出现
<head>         元素出现在文档开头部分，head里面的内容不会在浏览器显示
<meta charset="utf-8">    申明编码方式，没有结束标签
<title>我是显示在网页的标题</title>  是网页的标题
</head>
<body>          body的内容会显示在浏览器中
 显示在浏览器中
</body>
</html>

从上面可以看到：标签一般是成对出现有开头和结尾：<html>(开头) </html>(有斜杠的结尾)，有限没有结尾即闭合标签如上面的<meta>

三、常见标签

HTML书写规范
1.名字用小写字母
2.以英文开头，可以包含英文字母，数字，_，-，不能使用中文
3.驼峰命名
    className  第二个单词首字母大写
4.id命名
    id只能有一个名字，而且在页面中相同的名字只能出现一次，相当于身份证号码一样
5.class命名
    class可以出现多次，而且相同的名字可以有多个，相当于人名一样

head 内常用标签

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

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

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

<meta name="keywords" content="美女,html,meta属性,meta跳转">

(2)charset属性：主要用于申明文档的编码方式

<meta charset = "utf-8"> 指定utf-8编码

其他标签

title标签

<title>：得到返回的页面后可以看到浏览器最上面的标题信息，即是在title里面定义的。

<title>标题标签</title>

body常用标签

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

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

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

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

<em>: 文字变成斜体.

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

<br>:换行.

<hr>:水平线

特殊字符：
小于号：       &lt;
大于号：       &gt;
空格符号：     &nbsp;
空白位：       &emsp;
&字符：        &amp;
版权符号：     &copy;

div标签和span标签：

<div>标签：块级标签，即独占一行。<div>标签不像其他标签多有限定，它完全没用实际意义，但是我们可以通过css代码给他丰富的样式，就像一张白纸，可以尽情的渲染。

<span>标签：内联标签，不是独占一行，标签大小由内容撑开。也是一个空白标签，没用任何实际意义，也是通过css代码去渲染。

块级标签和内联标签的区别：

块级标签：独占一行，不管内容多少。支持设置宽高，如果没有设置则默认为内容高度，宽度为浏览器宽度。可以嵌套其他块级标签和内联标签。

内联标签（行内标签）：不独占一行，即可以和其他内联标签在同一行。不支持设置宽高，大小由内容撑开。内敛标签不能嵌套块级标签，但可以嵌套内联标签。

这两种标签都是为了给css样式渲染的最好标签。

img标签：

<img src="https://ps.ssl.qhimg.com/sdmt/90_135_100/t018af27e6d68dc210f.jpg" alt="">
    <img src="../第三课/image/mv.jpg" alt="" width="200">

       
src 定义图片路径
      
alt 图片描述，用于没有加载时提示
      
width 定义图片宽度
       
height 定义图片高度
       
当width/height只给一个值的时候，另一个值等比例缩放，然后不给默认图片大小

a标签：超链接标签也叫锚点标签

<a href="http:www.baidu.com" target="_blank">百度</a>
    <!--一个可以跳转的标签，在这里跳转到百度-->
<a href="#">#</a>
    <!--刷新当前页面-->
<a href="javascript:void(9);" >死链接</a>
    <!--死链接不会跳转-->
<a href="#box1">锚点</a>

    只有拥有name属性的a标签才有锚点
    其他标签可以通过id属性实现锚点
    target属性：
       _self 当前页面打开  默认
       _blank 在新窗口打开

列表标签：

无序列表：

    <!--ul>li*4-->  可以用这种写法生成
    ul生成的是无序列表
    <ul type = "square">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <!--square表示前面的点是方形-->
    <!--disc 默认 小圆点-->
    <!--circle 空心圆-->

有序列表：

    <ol type = "1"  start="0">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
     不同的type类型，按照不同的方式排序
     <!--
           1  1 2 3 4  默认
           a  a b c d
           A  A B C D
           I
           i
           reversed  降序排序
           start 有序列表起始值
           -->

自定义列表：

    <dl>
        <dt>标题</dt>
        <dd>1</dd>
        <dd>2</dd>
        <dd>3</dd>
        <dd>4</dd>
    </dl>

表格标签：

表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。
表格的基本结构：

<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

<form action="" method="get" autocomplete="on"></form>
    <!--action 规定当前提交表单向何处发送表单数据,一般是向服务器的一个程序-->
    <!--method  默认get   post-->提交方式
    <!--autocomplete自动完成，on输入框会提示  off输入框不会提示-->

表单元素

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

input标签：

<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都好使.

select标签：

<select name="se" id="xz">
        <!--size规定下拉列表中可见选项的数目-->
        <!--selected 规定在select里面默认展示第几项-->
        <option value="1">上海</option>
        <option value="2">北京</option>
        <option value="3">深圳</option>
        <option value="4">重庆</option>
    </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>

labe标签：

定义：<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>