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；     &quot;(")

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

列表标签：

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

1.定义列表：

格式：<dl>

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

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

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

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

             </dl>

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

上层数据的内容

                下层数据的内容 

                下层数据的内容 

2.有序列表：

格式：<ol>

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

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

             </ol>

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

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

 

3.无序列表：

格式：<ul>

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

                          <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:bdqnWebmaster@bdqn.cn">联系我们</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>