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注释：
1 <!-- 这是一段注释 -->
<head>内常用标签
<meta>标签
meta介绍
<meta>元素可提供有关页面的元信息（meta-information），针对搜索引擎和更新频度的描述和关键词。
<meta>标签位于文档的头部，不包含任何内容。
<meta>提供的信息是用户不可见的
meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
(1)name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
1 <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> 2 3 <meta name="description" content="老男孩培训机构是由一个很老的男孩创建的">
(2)http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
1 <meta http-equiv="Refresh" content="2;URL=https://www.oldboy.com"> //(注意后面的引号，分别在秒数的前面和网址的后面) 2 3 <meta http-equiv="content-Type" charset=UTF8"> 4 5 <meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />
非meta标签
1 <title>oldboy</title> <!-- title里面放的是网页标签上面的名字 --> 2 <link rel="icon" href="http://www.jd.com/favicon.ico"> 3 <link rel="stylesheet" href="css.css"> 4 <script src="hello.js"></script>
<body>内常用标签
1 <hn>: n的取值范围是1~6; 从大到小. 用来表示标题. 2 3 <p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白. 4 5 <b> <strong>: 加粗标签. 6 7 <strike>: 为文字加上一条中线. 8 9 <em>: 文字变成斜体. 10 11 <sup>和<sub>: 上角标 和 下角表. 12 13 <br>:换行. 14 15 <hr>:水平线 16 17 特殊字符： 18 < >；"；©®
html块
<div></div> ： <div>只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现.
<span></span>： <span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现.
块级元素与行内元素的区别
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。
html图像
<img>标签可以在网页上插入一张图片，它是独立使用的标签，通过“src”属性定义图片的地址，通过“alt”属性定义图片加载失败时显示的文字，以及对搜索引擎和盲人读屏软件的支持。
1 <img src="images/pic.jpg" alt="产品图片" />
超链接标签(锚标签)
<a>标签可以在网页上定义一个链接地址，通过src属性定义跳转的地址，通过title属性定义鼠标悬停时弹出的提示文字框。
1 <a href="#"></a> <!-- # 表示链接到页面顶部 --> 2 <a href="http://www.itcast.cn/" title="跳转的传智播客网站">传智播客</a> 3 <a href="2.html">测试页面2</a>
定义页面内滚动跳转
页面内定义了“id”或者“name”的元素，可以通过a标签链接到它的页面滚动位置，前提是页面要足够高，有滚动条，且元素不能在页面顶部，否则页面不会滚动。
1 <a href="#mao1">标题一</a> 2 ...... 3 ...... 4 <h3 id="mao1">跳转到的标题</h3>
html列表
有序列表
在网页上定义一个有编号的内容列表可以用<ol>、<li>配合使用来实现，代码如下：
1 <ol> 2 <li>列表文字一</li> 3 <li>列表文字二</li> 4 <li>列表文字三</li> 5 </ol>
在网页上生成的列表，每条项目上会按1、2、3编号，有序列表在实际开发中较少使用。
无序列表
在网页上定义一个无编号的内容列表可以用<ul>、<li>配合使用来实现，代码如下：
1 <ul> 2 <li>列表文字一</li> 3 <li>列表文字二</li> 4 <li>列表文字三</li> 5 </ul>
在网页上生成的列表，每条项目上会有一个小图标，这个小图标在不同浏览器上显示效果不同，所以一般会用样式去掉默认的小图标，如果需要图标，可以用样式自定义图标，从而达到在不同浏览器上显示的效果相同,实际开发中一般用这种列表。
定义列表
定义列表通常用于术语的定义。<dl>标签表示列表的整体。<dt>标签定义术语的题目。<dd>标签是术语的解释。一个<dl>中可以有多个题目和解释，代码如下：
1 <h3>前端三大块</h3> 2 <dl> 3 <dt>html</dt> 4 <dd>负责页面的结构</dd> 5 6 <dt>css</dt> 7 <dd>负责页面的表现</dd> 8 9 <dt>javascript</dt> 10 <dd>负责页面的行为</dd> 11 12 </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>标签来定义表单区域整体，在此标签中再使用不同的表单控件来实现不同类型的信息输入，具体实现及注释可参照以下伪代码：
1 <!-- form定义一个表单区域,action属性定义表单数据提交的地址， 2 method属性定义提交的方式。 --> 3 <form action="http://www..." method="get"> 4 5 <!-- label标签定义表单控件的文字标注，input类型为text定义了 6 一个单行文本输入框 -->
<input>系列标签
1 <1> 表单类型 2 3 type: text 文本输入框 4 5 password 密码输入框 6 7 radio 单选框 8 9 checkbox 多选框 10 11 submit 提交按钮 12 13 button 按钮(需要配合js使用.) button和submit的区别？ 14 15 file 提交文件：form表单需要加上属性enctype="multipart/form-data" 16 17 上传文件注意两点： 18 19 1 请求方式必须是post 20 2 enctype="multipart/form-data" 21 22 <2> 表单属性 23 24 name: 表单提交项的键. 25 26 注意和id属性的区别：name属性是和服务器通信时使用的名称； 27 而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的 28 29 value: 表单提交项的值.对于不同的输入类型，value 属性的用法也不同： 30 31 type="button", "reset", "submit" - 定义按钮上的显示的文本 32 33 type="text", "password", "hidden" - 定义输入字段的初始值 34 35 type="checkbox", "radio", "image" - 定义与输入相关联的值 36 37 38 checked: radio 和 checkbox 默认被选中 39 40 readonly: 只读. text 和 password 41 42 disabled: 对所用input都好使.
1 <!-- form定义一个表单区域,action属性定义表单数据提交的地址， 2 method属性定义提交的方式。 --> 3 <form action="http://www..." method="get"> 4 5 <!-- label标签定义表单控件的文字标注，input类型为text定义了 6 一个单行文本输入框 --> 7 <p> 8 <label>姓名：</label><input type="text" name="username" /> 9 </p> 10 11 <!-- input类型为password定义了一个密码输入框 --> 12 <p> 13 <label>密码：</label><input type="password" name="password" /> 14 </p> 15 16 <!-- input类型为radio定义了单选框 --> 17 <p> 18 <label>性别：</label> 19 <input type="radio" name="gender" value="0" /> 男 20 <input type="radio" name="gender" value="1" /> 女 21 </p> 22 23 <!-- input类型为checkbox定义了单选框 --> 24 <p> 25 <label>爱好：</label> 26 <input type="checkbox" name="like" value="sing" /> 唱歌 27 <input type="checkbox" name="like" value="run" /> 跑步 28 <input type="checkbox" name="like" value="swiming" /> 游泳 29 </p> 30 31 <!-- input类型为file定义上传照片或文件等资源 --> 32 <p> 33 <label>照片：</label> 34 <input type="file" name="person_pic"> 35 </p> 36 37 <!-- textarea定义多行文本输入 --> 38 <p> 39 <label>个人描述：</label> 40 <textarea name="about"></textarea> 41 </p> 42 43 <!-- select定义下拉列表选择 --> 44 <p> 45 <label>籍贯：</label> 46 <select name="site"> 47 <option value="0">北京</option> 48 <option value="1">上海</option> 49 <option value="2">广州</option> 50 <option value="3">深圳</option> 51 </select> 52 </p> 53 54 <!-- input类型为submit定义提交按钮 55 还可以用图片控件代替submit按钮提交，一般会导致提交两次，不建议使用。如： 56 <input type="image" src="xxx.gif"> 57 --> 58 <p> 59 <input type="submit" name="" value="提交"> 60 61 <!-- input类型为reset定义重置按钮 --> 62 <input type="reset" name="" value="重置"> 63 </p>
select标签
1 <select> 下拉选标签属性 2 3 4 name:表单提交项的键. 5 6 size：选项个数 7 8 multiple：multiple 9 <optgroup>为每一项加上分组 10 11 <option> 下拉选中的每一项 属性： 12 13 value:表单提交项的值. 14 selected: selected下拉选默认被选中
<label>标签
定义：<label> 标签为 input 元素定义标注（标记）。
说明：
1 label 元素不会向用户呈现任何特殊效果。
2 <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
1 <form method="post" action=""> 2 3 <label for=“username”>用户名</label> 4 <input type=“text” name=“username” id=“username” size=“20” /> 5 </form>
<fieldset>标签
1 <fieldset> 2 <legend>登录吧</legend> 3 <input type="text"> 4 </fieldset>