HTML基本知识的认知

说到HTML，那么接下来说说是HTML？

HTML译为超文本标记语言，不是一种编程语言，而是一种描述性的标记语言，可用于描述超文本中要显示的内容。比如字体颜色等等。

html是一种最基础的网页语言，同时也是一种通过标签来定义的语言，代码都是由标签所组成。

HTML的基本格式

<html> // HTML文件的声明开始
<head> // HTML文件的头部部分

title：头部的标题标签。网页标签。
meta：头部部分。网页相关信息：关键字，字符编码，内容描述
</head>
<body> //HTML文件的主体部分 body里面的内容可以显示在网页里面
</body>
</html>

<head> 头部部分中有3个要注意的点：

存放属性的信息，辅助性的信息。

进入外部加载的文件。

会最先加载。

<body> 主体部分中存放的是我们所要存放的数据

下面插入一个简单的例子的代码

<html>
<head></head>
<body>
	<h1>这是我们人生中第一个文件！HELLOWORLD!</h1>
	<h2>这是我们人生中第一个文件！HELLOWORLD!</h2>
	<h3>这是我们人生中第一个文件！HELLOWORLD!</h3>
	<h4>这是我们人生中第一个文件！HELLOWORLD!</h4>
	<h5>这是我们人生中第一个文件！HELLOWORLD!</h5>
	<h6>这是我们人生中第一个文件！HELLOWORLD!</h6>
</body>
</html>

在我们编写html时，应该注意以下几点：

多数标签只有开始和结束标签，其中个别标签只有单一功能，或者没有要修饰的内容可以在标签内结束。
想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性，通过对属性值的改变，增加了更多的效果选择。
属性与属性值之间用“=”连接，属性值可以用双引号或单引号或者不用引号，一般都会用双引号。

接下是介绍一些排版的标签，在制作网页的时候很实用：

*<br/> 表示换行标签，指切换到下一行

*<hr/> 一条水平线，表示画一条水平线

<hr/>的属性有以下几种：

clolor：颜色属性

它的值的写法有两种：1.直接写英文的单词（例如red green blue）

2.RGB三原色（red green blue）#ffffff #然后后面是6个16进制的数

例如 <hr color="#ab1278"/>

width ：宽度属性

值的两种写法：1. 200px 就是指一个具体的值+px，px代表像素

2. 也可以写百分比比如40%

两种写法的区别：百分比跟着浏览器的尺寸大小而改变，像素值不会

*<p></p> 段落标签

*块状元素与行内元素指在浏览器中声明一块区域，区域中放入其他（文字，字标签）：
*块状元素：独占一行,有宽度和高度。 <div> </div> 块状元素，写完后有换行的作用
*行内元素：不独占一行，没有宽度和高度。<span></span> 不会换行，行内的元素

<font></font> 字体标签：

字体标签有以下几个属性：

1.color：颜色

2.size：字体的大小

*最大值和最小值: 最大值是7，最小是1. 值的写法：字体大小的默认值是3，值的写法： +2 和（3+2）是一样的

3.face：字体的类型，例如隶书，楷书等等

标题标签：有<h1> </h1> 、<h2> </h2> 、<h3> </h3> 、<h4> </h4> 、<h5> </h5> 、<h6> </h6>分别表示一级标题到六级标题，从h1到h6标题大小依次减小。

*<b></b>:粗体标签 <i></i>:斜体标签

需要注意的是标签是可以嵌套的，例如 <b><i> 标签内的内容</i></b> ， html不区分大小写。

特殊的字符: < 小于号 &lt； >大于号&gt； &与符号 &amp；空格符号： &nbsp； "(")

*滚动的字幕标签：<marquee scrollamount="5"></marquee> * scrollamount属性代表速度属性

列表标签：

有3种列表：定义列表、有序列表、无序列表

1.定义列表：

格式：<dl>

<dt>上层数据的内容</dt>

<dd>上层数据的内容<dd>

*有自动对齐，缩进的作用

</dl>

它得出的结果如西面所示：

上层数据的内容

下层数据的内容

2.有序列表：

格式：<ol>

<li> 数据的条目 </li>

</ol>

ol的属性：*type属性：例如 type="a" 表示从a开始，像a，b，c，d这样子的

*start属性： start="" 指从哪开始

3.无序列表：

格式：<ul>

<li> 数据的条目 </li>

</ul>

ul的属性： *type属性：例如type="circle" 表示圆形的列表标识符号 type="square" 表示正方形的列表标识符号

表格标签：

表格：
*表格基本结构
<table>
<tr> //表示第一行
<th>第1个单元格的内容</td> //th表示表头
<th>第2个单元格的内容</td>
……
</tr>
<tr> //表示第二行
<td>第1个单元格的内容</td>
<td>第2个单元格的内容</td>
……
</tr>
</table>

*表格基本属性
border：表格边框
cellspacing：外边距
cellpadding：内边距
align：水平位置（center 居中 left居左 right 居右）
valign:垂直居中（top 上 bottom 下 middle 中）
colspan:列的合并
rowspan:行的合并
bgcolor:背景颜色

图片标签<img/>：

<img/>的属性：

src属性：src="图片的地址或者说路径" 例如：<img src="image/1.jpg"/> 表示在image文件中的图片1.jpg

width属性：width="图片的显示宽"

height属性：height="图片的显示高度"

alt属性：alt="图片的说明属性" 图片加载不出来替代的文字
title属性: title="标题" 鼠标悬停时出现的图片标题

超链接标签：

写法：<a></a>

超链接的两个作用：

1.链接资源：*必须指定属性：herf="链接的地址"

*需要编写协议例如http

*默认file文件的协议

*如果浏览器可以解析文件，默认会打开文件。

*如果浏览器不可以解析文件，弹出下载窗口

*支持自定义协议

*浏览器解析不了的协议，默认找操作系统的引用程序。

2.定义资源：

*name属性定义锚点

超链接属性：href:跳转路径 target:_self(在本窗口打开新网页) _blank(在新窗口打开网页)
   **页面间链接
   **锚链接： 1.创建标记节点 <a name="top">乙位置</a>
2.href指向标记节点<a href="#top">甲位置</a>
   **功能性链接：
电子邮件，QQ，MSN
<a href="mailto:[email protected]">联系我们</a>

网页媒体元素：
视频元素： video
音频元素：audio

例如：video
<video controls|autoplay> //controls表示播放和暂停和音量的控件 //autoplay表示自动播放属性
<source src="video/video.webm" type="video/webm"/>
<source src="video/video.mp4" type="video/mp4"/>
</video>
例如：audio
<audio controls|autoplay>
<source src="music/music.mp3" type="audio/mpeg"/>
<source src="music/music.ogg" type="audio/ogg"/>
你的浏览器不支持audio元素
</audio>

表单

*收集用户输入的数据
  *表单的标签
   <form>
   *用户输入的内容

*表单的输入控件<input/>
   <input type="类型" name="名称（必须要指定）" value="是否指定value">
       *name属性必须指定，value看情况指定
   <input type="text"> 普通的文本框
       *name属性必须指定，value看情况指定
   <input type="password"> 密码框
       *name属性必须指定，value看情况指定
   <input type="radio"> 单选按钮
       *name属性必须指定，value必须指定
       *name的属性，值要相同
       *默认值：checked=checked或者true
   <input type="checkbox"> 多选按钮
       *默认值：checked=checked或者true
       **name属性必须指定，value必须指定
   *type="reset"    重置：恢复到最初的状态
   *type="submit"   提交表单
       *点击提交后，地址栏发生了变化（？sex=on）

       *在普通的文本框上添加name属性 bane="username"之后，点击提交，地址栏发生了变化?username=haha&sex=on
   *type="file"   选择文件
       *name属性指定
   *type="hidden"   隐藏组件
       *name指定value指定
   *type="button"   按钮
       *value="显示的文字"
       *和js（javascript）绑定事件
   *type="image"   图片
       *提交   引入外部的一个文件（图片）
   *声明选择框/下拉框
       *<select name="city">
       <option value="none">--请选择--</option>
       <option value="sj">上海</option>
       <option value="bj" selected="selected">北京</option>
       <option value="sz">深圳</option>
       </select><br/>
   *<textarea>文本页
       *rows="行"
       *clos="列"
   </form>

表单的属性：
form的属性：

*type属性：
1.text:文本框
2.submit；提交按钮
3.password:密码框
4.radio：单选框
5.checkbox：复选框
6.button:普通按钮
7.reset:重置按钮
8.image：图片按钮
9.file:文件域
10.email:邮箱
11.number:数字
12.url：网址
13.range：滑块
14.search：搜索框
*action=“表单的提交路径”

插入上述type的代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单</title>
</head>
<body>
	<form action="biaodanshuxing.html" method="post">
	输入姓名：<input type="text" name="username"> <br/>
	输入密码: <input type="password"> <br/>
	选择性别： <input type="radio" name="sex" value="nan">男
				<input type="radio" name="sex" checked="checked" value="nv">女 <br/>
	选择爱好：<input type="checkbox" name="love" checked="checked" value="lq">篮球
			<input type="checkbox" name="love" value="zq">足球
			<input type="checkbox" name="love" value="pq">排球
			<input type="checkbox" name="love" value="bq">冰球<br/>
	<input type="reset" value="重置数据" />
	<input type="submit" value="提交数据" />
	<input type="button" value="我是按钮"/>
	<input type="image" src="image/tj.png">
	<input type="image" src="image/z.jpg"><br/>
	上传附件：<input type="file" name=y"mfile"><br/>
	隐藏组件：<input type="hidden" name="userID" value="001"><br/>
	选择城市：<select size="3" multiple="">
			<option value="none">--请选择--</option>
			<option value="bj" selected="selected">北京</option>
			<option value="sh">上海</option>
			<option value="sz">深圳</option>
	</select><br/>
	个人简介：<textarea  rows="10" cols="10" >输入个人简介</textarea>
    邮箱：<input type="email" name="youxiang">
    <p>网址：<input type="url" name="wangzhi"></p>
    <p>数字：<input type="number" name="age" min="0" max="10" step="2"></p>
    <p>滑块：<input type="range" name="rge" min="0" max="50" step="10"></p>
    <p>搜索框：<input type="search" name="sousuo"></p>
	</form>
	
</body>
</html>

       *“http//www.baidu.com”
       *html页面
   *method=“提交方式（默认是get方式）”
       *form表单的提交方式有很多，常用的提交方式有两种：get和post
           *post和get的区别：
               get方式会把参数列表显示在地址栏上，post方式不会（请求体）；*get方式说明网站级别较低，post安全级别较高。
           *get方式不支持大数据，post支持大数据。

   *框架标签
       *对网页进行布局
       <frameset rows="150，*">//上面占150，下面占所有的
       <frame>代表上半部分
       <frame>代表下半部分
       </frameset>
       *前提条件：不能写在<body>的内部和下面

frame属性：
*src=“导入的网页路径”

下面是框架的一个简单例子：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>框架</title>
</head>
<frameset rows="150,*">
	<frame src="biaodan.html">
	<frameset cols="150,*">
	<frame src="chaolianjie1.html" name="left">
	<frame src="biaodanshuxing.html" name="right">

	</frameset>
</frameset>
<body>
	
</body>
</html>

结构元素：

header   标题头部区域的内容（用于页面或页面中的一块区域）
footer   标记脚部区域的内容（用于整个页面或页面的一块区域）
section   Web页面中的一块独立区域
article   独立的文章内容
aside   相关内容或应用（常用于侧边栏）
nav   导航类辅助内容

内敛框架的两个简单例子的代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>内敛框架</title>
	<style type="text/css">
	iframe{
		width: 400px;
		height: 400px;
		border: 1px solid green;
	}
	</style>
</head>
<body>
	<h1>我不是网页布局</h1>
	<iframe src="wangyebuju.html" name="all"></iframe>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>新的内联框架</title>
	<style type="text/css">
	iframe{
		width: 600px;
		height: 600px;
		border: 1px;
		/*solid表示实线*/
		border: solid red;
	}
	</style>
</head>
<body>
	<p><a href="http://www.baidu.com" target="main">点击打开百度</a>
	<a href="http://www.taobao.com" target="main">点击打开淘宝</a>
	<a href="neiliankuangjia.html">点击打开内联框架</a>
	</p>
	<iframe name="main" ></iframe>
</body>
</html>