HTML --- 简单的标签

HTML --- 简单的标签

html概述和基本结构

html概述

　　HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。

　　HTML 不是一种编程语言，而是一种标记语言 (markup language)
　　HTML 使用标记标签来描述网页

html基本结构

一个html的基本结构如下：

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>网页标题</title>

    </head>

    <body>

          网页显示内容

    </body>

</html>

　　第一行是文档声明，

　　<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

　　第二行“<html>”标签和最后一行“</html>”定义html文档的整体，“<html>”标签中的‘lang=“en”’定义网页的语言为英文，定义成中文是'lang="zh-CN"',不定义也没什么影响，它一般作为分析统计用。 “<head>”标签和“<body>”标签是它的第一层子元素，“<head>”标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏，“<body>”内编写网页上显示的内容。

html标签格式

html文档规范

　　xhtml制定了文档的编写规范，html5可部分遵守，也可全部遵守，看开发要求。

　　　　1、所有的标签必须小写

　　　　2、所有的属性必须用双引号括起来

　　　　3、所有标签必须闭合

　　　　4、img必须要加alt属性(对图片的描述)

标签的语法：

　　<标签名属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
　　<标签名属性1=“属性值1” 属性2=“属性值2”…… />

html注释：

 <!-- 这是一段注释  -->

<head>内常用标签

<meta>标签

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

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

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

 <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">

 <meta name="description" content="老男孩培训机构是由一个很老的男孩创建的">

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

 <meta http-equiv="Refresh" content="2;URL=https://www.oldboy.com"> //(注意后面的引号，分别在秒数的前面和网址的后面)

 <meta http-equiv="content-Type" charset=UTF8">

 <meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />

非meta标签

 <title>oldboy</title>     <!-- title里面放的是网页标签上面的名字 -->

 <link rel="icon" href="http://www.jd.com/favicon.ico">

 <link rel="stylesheet" href="css.css">

 <script src="hello.js"></script>

<body>内常用标签

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

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

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

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

 <em>: 文字变成斜体.

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

 <br>:换行.

 <hr>:水平线

 特殊字符：

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

html块

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

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

html图像

<img>标签可以在网页上插入一张图片，它是独立使用的标签，通过“src”属性定义图片的地址，通过“alt”属性定义图片加载失败时显示的文字，以及对搜索引擎和盲人读屏软件的支持。

 <img src="data:images/pic.jpg" alt="产品图片" />

超链接标签(锚标签)

<a>标签可以在网页上定义一个链接地址，通过src属性定义跳转的地址，通过title属性定义鼠标悬停时弹出的提示文字框。

 <a href="#"></a> <!--  # 表示链接到页面顶部   -->

 <a href="http://www.itcast.cn/" title="跳转的传智播客网站">传智播客</a>

 <a href="2.html">测试页面2</a>

定义页面内滚动跳转

页面内定义了“id”或者“name”的元素，可以通过a标签链接到它的页面滚动位置，前提是页面要足够高，有滚动条，且元素不能在页面顶部，否则页面不会滚动。

 <a href="#mao1">标题一</a>

 ......

 ......

 <h3 id="mao1">跳转到的标题</h3>

html列表

有序列表

在网页上定义一个有编号的内容列表可以用<ol>、<li>配合使用来实现，代码如下：

 <ol>

     <li>列表文字一</li>

     <li>列表文字二</li>

     <li>列表文字三</li>

 </ol>

在网页上生成的列表，每条项目上会按1、2、3编号，有序列表在实际开发中较少使用。

无序列表

在网页上定义一个无编号的内容列表可以用<ul>、<li>配合使用来实现，代码如下：

 <ul>

     <li>列表文字一</li>

     <li>列表文字二</li>

     <li>列表文字三</li>

 </ul>

　　在网页上生成的列表，每条项目上会有一个小图标，这个小图标在不同浏览器上显示效果不同，所以一般会用样式去掉默认的小图标，如果需要图标，可以用样式自定义图标，从而达到在不同浏览器上显示的效果相同,实际开发中一般用这种列表。

定义列表

定义列表通常用于术语的定义。<dl>标签表示列表的整体。<dt>标签定义术语的题目。<dd>标签是术语的解释。一个<dl>中可以有多个题目和解释，代码如下：

 <h3>前端三大块</h3>

 <dl>

     <dt>html</dt>

     <dd>负责页面的结构</dd>

     <dt>css</dt>

     <dd>负责页面的表现</dd>

     <dt>javascript</dt>

     <dd>负责页面的行为</dd>

 </dl>

html表格<table>

table常用标签

　　1、table标签：声明一个表格

　　2、tr标签：定义表格中的一行

　　3、td和th标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格

table常用属性：

　　1、border 定义表格的边框

　　2、cellpadding 定义单元格内内容与边框的距离

　　3、cellspacing 定义单元格与单元格之间的距离

　　4、align 设置单元格中内容的水平对齐方式,设置值有：left | center | right

　　5、valign 设置单元格中内容的垂直对齐方式 top | middle | bottom

　　6、colspan 设置单元格水平合并

　　7、rowspan 设置单元格垂直合并

传统布局：

传统的布局方式就是使用table来做整体页面的布局，布局的技巧归纳为如下几点：

　　1、定义表格宽高，将border、cellpadding、cellspacing全部设置为0

　　2、单元格里面嵌套表格

　　3、单元格中的元素和嵌套的表格用align和valign设置对齐方式

　　4、通过属性或者css样式设置单元格中元素的样式

html表单

表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，实现一个特定功能的表单区域（比如：注册），首先应该用<form>标签来定义表单区域整体，在此标签中再使用不同的表单控件来实现不同类型的信息输入，具体实现及注释可参照以下伪代码：

 <!-- form定义一个表单区域,action属性定义表单数据提交的地址，

 method属性定义提交的方式。   -->

 <form action="http://www..." method="get">

 <!-- label标签定义表单控件的文字标注，input类型为text定义了

 一个单行文本输入框  -->

<input>系列标签

 <> 表单类型

 type:        text 文本输入框

              password 密码输入框

              radio 单选框

              checkbox 多选框  

              submit 提交按钮            

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

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

             上传文件注意两点：

                      1 请求方式必须是post

                      2 enctype="multipart/form-data"

  <> 表单属性

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

 <!-- form定义一个表单区域,action属性定义表单数据提交的地址，

 method属性定义提交的方式。   -->

 <form action="http://www..." method="get">

 <!-- label标签定义表单控件的文字标注，input类型为text定义了

 一个单行文本输入框  -->

 <p>

 <label>姓名：</label><input type="text" name="username" />

 </p>

 <!-- input类型为password定义了一个密码输入框  -->

 <p>

 <label>密码：</label><input type="password" name="password" />

 </p>

 <!-- input类型为radio定义了单选框  -->

 <p>

 <label>性别：</label>

 <input type="radio" name="gender" value="0" /> 男

 <input type="radio" name="gender" value="1" /> 女

 </p>

 <!-- input类型为checkbox定义了单选框  -->

 <p>

 <label>爱好：</label>

 <input type="checkbox" name="like" value="sing" /> 唱歌

 <input type="checkbox" name="like" value="run" /> 跑步

 <input type="checkbox" name="like" value="swiming" /> 游泳

 </p>

 <!-- input类型为file定义上传照片或文件等资源  -->

 <p>

 <label>照片：</label>

 <input type="file" name="person_pic">

 </p>

 <!-- textarea定义多行文本输入  -->

 <p>

 <label>个人描述：</label>

 <textarea name="about"></textarea>

 </p>

 <!-- select定义下拉列表选择  -->

 <p>

 <label>籍贯：</label>

 <select name="site">

     <option value="0">北京</option>

     <option value="1">上海</option>

     <option value="2">广州</option>

     <option value="3">深圳</option>

 </select>

 </p>

 <!-- input类型为submit定义提交按钮

      还可以用图片控件代替submit按钮提交，一般会导致提交两次，不建议使用。如：

      <input type="image" src="xxx.gif">

 -->

 <p>

 <input type="submit" name="" value="提交">

 <!-- input类型为reset定义重置按钮  -->

 <input type="reset" name="" value="重置">

 </p>

伪代码说明

select标签

  <select> 下拉选标签属性

           name:表单提交项的键.

           size：选项个数

           multiple：multiple

                  <optgroup>为每一项加上分组

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

                        value:表单提交项的值.

                        selected: selected下拉选默认被选中

<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>