HTML基础学习知识总结

HTML简介

HTML：超文本标记语言
HTML百度百科

html特点：

html不需要编译，直接通过浏览器展现
html文件是一个文本文件
必须使用html/htm作为文件后缀名
大小写不敏感，HTML与html一样

开发工具：

普通：记事本、word
Dreamweaer–DW、webstorm–ws、sublime、hbuilder

HTML基础

html基本结构

<!DOCTYPE html>
<!--<!DOCTYPE html>是一个html文档类型声明，必须放在第一行，不是html标签-->
<!-- 整个html文件 -->
<html>
  <!--头部信息-->
  <head>
    <!--当网页出现中文乱码时，在head包裹下添加meta标签处理-->
  	<meta http-equiv="Congtent-Type" content="text/html;charset=utf-8">
    <title>标题</title>
  </head>
  <!--网页主题部分-->
  <body>
    网页主题内容
  </body>
</html>

HTML标签

添加标签基本语法：
<标签名属性名1=“属性值” 属性名2=“属性值”>…</标签名>
例如：<body bgcolor="red">...</body>

常用的标签
标题标签：<h1></h1>~<h6></h6>
段落标签：<p></p>
换行标签：<br/>
预编译标签：<pre></pre> (复制的原内容原模原样的展现出来）
水平线标签：<hr/>
文字斜体标签：<i></i> <em></em>
加粗标签：<b></b> <strong></strong>
上标：<sup></sup>
下标：<sub></sub>
align对齐方式的属性值

左对齐（默认）：align="left"
右对齐：align="right"
居中：align="center"
两端对齐：align="justify" (对行进行伸展，使每行都有相等的长度）

特殊字符

. < : <
. > :>
已注册: ®
版权标：©
TM商标:™
space空格键:

列表标签

无序列表

<ul type="disc">
<!--type属性值
   disc圆点， square正方形 ，circle空心圆-->
  <li></li>
</ul>

有序列表

<ol type="1">
<!--type属性值
  1：数字1、2、3....
  a: 小写字母a、b、c....
  A: 大写字母A、B、C....
  i/I ：大小写罗马数字-->
  <li></li>
</ol>

定义列表
1.定义标签dl内可以有多个dt
2.对于每一个dt可以有多个dd
3.dt和dd是同级标签

<dl>
  <dt>列表项名字</dt>
  <dd>具体列表内容</dd>
</dl>

图像和超链接

图像标签：
语法 : <img src="" alt="" height="" width=""/>

<img src="url图像地址" alt="此处有图片" height="50px" width="50px"/>
<!--src-url显示图像的地址,
	alt-文字-当图像显示不出来（比如网速太慢、src属性值错误、用户无法查看图像的时候）显示文字,
	height-px/%-图像的高,
	width-px/%-图像的宽
	px表示像素,%百分比表示，该图片占父容器的百分之多少-->

img下的src属性 – 涉及到图像的路径问题：
1、绝对路径 – 指的是具体盘符下的具体路径
2、相对路径 – 指的是相对于当前文件的这个图片的路径
(1) 处于同一级目录中： " 直接输入图片名 "
(2) 图片处于文件的上一级: "../图片名 "(此处..表示跳出当前文件所在的文件夹）
(3) 图片在img文件的下一级: "同级文件夹名/文件夹内图片名"

超链接

语法举例

<a href="https://www.baidu.com/" target="_self" title="百度在线">百度</a>
<!-- a标签包裹文字或者图象 -->
	<!-- href:链接地址,可以是内部链接也可以是外部链接-->
	<!-- target:链接的目标窗口。
	    属性值：_self 和默认形式一样，都是默认当前页打开页面，
	           _blank 表示点击另开一个页面，
	           _top 当前页面最上面， 
	           _parent 父页面-->
	<!-- titile:链接提示文字-->

锚链接

同一个页面内

<a href="#锚名（自定义，非中文）">目录（标题之类）名称</a>
<a name="锚名（上下锚名要一致）">目录对应的内容</a>
<!--name:链接命名-->

不同页面内

网页1：<a href="url地址#锚名（自定义，非中文）">...</a>
网页2：<a name="锚名（与网页1自定义锚名要一致）">...</a>

电子邮件链接

<a href="mailto:收件人邮件地址">...</a>
<!--当本地电脑邮箱已登录，将直接跳转到写邮件页面，收件人地址自动填充-->

文件下载

<a href=" "></a>
<!--href属性值
    如果是url网址，则会打开地址相应的网页
    如果是文件，则会相应的下载
    -->

HTML表格

基本结构

表格–table
行–tr
列–th/td

语法以及标签的属性设置解析

- table标签属性属性

- tr标签属性

- td/th标签属性

- thead/tbody/tfoot标签属性

- table标签嵌套

<body>
  <table align="center" border="1px" width="500px" bgcolor="#F8F8FF" 
  cellpadding="5px" cellspacing="0" frame="box" rules="all">
  <!-- table标签属性  如下： -->
		<!-- width=px/% 规定表格的宽度 -->
		<!-- align=left/center/right 表格相对周围元素的对齐方式 -->
		<!-- border=px 规定表格边框的宽度 -->
		<!-- bgcolor=rgb(x,x,x)/#xxxxxx/colorname表格的背景颜色-->
		<!-- cellpadding=px/%单元边沿和内容之间的空白 -->
		<!-- cellspacing=px/%单元格之间的空白 -->
		<!-- frame属性值 规定外侧边框的哪个部分是可见的 -->
		<!-- rules属性值 规定内部边框线条的哪个部分是可见的 -->
  <caption>...</caption> <!--表格的标题 居中显示-->
  <thead align="" valign=""> <!-- 表头-->
      <tr align="" valign="" bcolor="">
      <!--align属性值  left  center  right  justify  char 行内容的水平对齐方式
                      (char 属性规定将单元格中的内容相对某个字符的对齐方式。仅align
                      属性设置为"char"时align="char" char=".",才能使用char属性。
                      char属性的默认值是页面语言的小数点字符。)  
          valign属性值   top  middle  bottom  baseline    行内容的垂直对齐方式
          bgcolor属性值  rgb(x,x,x)   #xxxxxx   colorname    行的背景颜色-->
          <!--bgcolor=" " 也可以用style="background-color:属性值"进行展现-->
           <th>...</th><!-- 表格头 内容居中显示 加粗显示-->
      </tr>
  </thead>
  <tbody align="" valign=""> <!-- 表格的主体-->
      <tr>
           <td align="" valign="" bgcolor="" width="" height="">
           <!--align  left  center  right  justify  char单元格内容的水平对齐方式
               valign  top  middle  bottom  baseline 单元格内容的垂直对齐方式
               （baseline基线对齐，表示文本的基线与表格的中线对齐）
               bgcolor  rgb(x,x,x)  #xxxxxx  colorname 单元格的背景颜色
               width   px  %   单元格的宽度
               height  %  px   单元格的高度-->
               
              <table><!--嵌套一个完整的表格结构在td标签中-->
                 <tr>
                    <td></td>
                 </tr>
              </table>
           </td>
      </tr>
  <tbody>
  <tfoot align="" valign=""> <!-- 脚注-->
      <tr>
           <td>...</td><!-- 表体 默认靠左显示 不加粗-->
      </tr>
  </tfoot>
  </table>
</body>

frame属性值–外部边框样式

在这里插入图片描述

rules属性值–内部边框线条样式

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200425135121706.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FfUl9aSEFPUlk=,size_16,color_FFFFFF,t_70

列合并

<tr>
  <td colspan="2"></td>
  <!--<td></td>-->
</tr>

行合并

<tr>
  <td rowspan="2"></td>
  <td></td>
</tr>
<tr>
  <!--<td></td>-->
  <td></td>
</tr>

HTML表单

表单简介

1.用于收集用户的信息，进行人机交互（收集数据之后将其传递给后台，后台处理完再次返回响应到前台的过程）的操作；
2.包含元素：文本框、单选、复选、隐藏域、列表框、图片框。。。统一称为：控件

表单控件及常用属性：

1、name ：指定控件的名称，可重复
2、id ：指定标签的唯一识别（类似身份证）
3、value ：输入的控件的值（收集，设置）

用于传递到后台使用的
同文本框或按钮一起使用，则在文本框内和按钮上直接显示属性值

4、checked ：复选框（单多选）默认被选中的项目
5、selected ： 列表框默认被选中
6、src ：图片框的图片来源
7、onclick ：鼠标的单击事件
8、disabled：禁用该控件
9、multiple ：允许多选（适用于普通列表框）

action属性

1、传递到后台的，收集数据传递到后台进行响应
2、属性值可以是相对路径，绝对路径地址或者文件（可跳转至输入文件的展示页面）

method属性

1、post ：表示隐式的提交，对安全信息保护的比较好，在url地址链接上看不见任何信息
2、get：表示显示的提交，对信息的保护不是特别好，会将数据显示在url地址上

label标签

1、此标签可以放置纯文本，专门用于显示文字使用的，和不加此标签效果一样；
2、后期可以对此文本进行css样式的设置
3、单选和多选，在它的包裹下，鼠标放在按钮和汉字上都可以点击选择

radio的name属性

（radio表示单选按钮，name值只对单选有效，对多选无效）
1、name值一样的话会被认为是一组单选框，意味着只能选中一个；
2、name值不一样，表示他们不是一组，可以同时选中

type属性值

text 文本
password表示输入隐式密码
radio单选按钮
checkbox复选框

下拉列表框

<select>
   <option value=""></option>
   <option value=""></option>
</select>年
<!-- select表示列表框 -->
<!-- option表示列表项 -->

分组下拉菜单

<select name="" id="">
	<option value="">--请选择--</option>
	<optgroup label="华北">
	<!-- 作为一组列表的标题存在	 -->
		<option value="bj">北京</option>
		<option value="tj">天津</option>
		<option value="hb">河北</option>
	</optgroup>
	<optgroup label="华东">
		<option value="sh">上海</option>
		<option value="fj">福建</option>
		<option value="xm">厦门</option>
	</optgroup>
</select>

按钮

<input type="button" value=""/><!--普通按钮，没有和JavaScript联动时，无任何作用-->
<input type="submit" value=""/><!--提交按钮，具有提交功能，在form包裹下有动态效果-->
<input type="reset" value=""/><!--重置按钮，清空当前所有输入信息-->
<!--value值可在按钮上直接显示-->

普通列表框（非下拉菜单）

<select size="3" multiple="true" name="" id="">
	<!-- 下拉列表框加入size属性值就成了普通列表框 -->
	<!-- multiple表示允许多选，size表示可见列表项数 -->
	<!-- select表示列表框 -->
	<!-- option表示列表项 -->
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
</select>

隐藏域

用于需要传递数据到后台，但是此数据不方便被别人看到时

<input type="hidden" name="" id="">
<!-- 隐藏域 传递不便于别人看见的数据-->

上传控件

选择文件，和后台脚本联动上传

<input type="file" name=""> <!--文件域，点击选择文件-->
样式自动生成 
<input type="button" value="上传"><!-- 上传域,点击上传 -->

多行文本域

用于论坛发帖，长文档的输入
语法：<textarea name="" id="" cols="" rows="">...</textarea>

<textarea placeholder="请输入文字" name="" id="" cols="30" rows="10"></textarea>
<!-- <textarea>*这里也可以输入提示文字，文字显示在文本域中，需要用户自己删除*</textarea> -->
<!-- placeholder在文本框内给用户提示文字，在用户输入文字时会自动消失 -->
<!-- rows表示可见行数，cols表示文本域可见宽度 -->

案列解析

在表单里嵌套表格的形式展现
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>注册账户</title>
</head>
<body>
	<form action="" method="post">
	<!-- post隐式提交，保护信息不会显示在url地址上 -->
		<table border="0" cellspacing="0" >
			<tr>
				<td align="right">请输入姓名：</td>
				<td>
					<input type="text" name="user" id="user"/>
				</td>
			</tr>
			<!-- 语法<input type="" name="" id=""/> -->
			<tr>
				<td align="right">请输入密码：</td>
				<td>
					<input type="password" name="pwd" id="pwd"/>
				</td>
			</tr>
			<tr>
				<td align="right">再次输入密码：</td>
				<td>
					<input type="password" name="pwd" id="pwd"/></td>
					<!-- password表示输入隐式密码 -->
				</tr>
				<tr>
					<td align="right">性别：</td>
					<td>
						<label><input type="radio" name="xb" value="nan"/>男</label>
						<label><input type="radio" name="xb" value="nv"/>女</label>
						<!-- 这里label表示在它的包裹下，鼠标放在按钮和汉字上都可以点击选择 -->
						<!-- radio表示单选按钮 -->
						<!-- name值一样，表示一组单选框，只能选中一个 -->
						<!-- name值不一样，表示他们不是一组，可以同时选中 -->
					</td>
				</tr>
				<tr>
					<td align="right">兴趣爱好：</td>
					<td>
						<label><input type="checkbox" name="" value="1"/>游泳</label>
						<label><input type="checkbox" name="" value="2"/>看书</label>
						<label><input type="checkbox" name="" value="3"/>爬山</label>
						<label><input type="checkbox" name="" value="4"/>羽毛球</label>
					</td>
				</tr>
				<!-- checkbox表示复选框 -->
				<!-- name值只对单选有效，对多选无效 -->
				<!-- checked="checked/true"复选框（单选）默认被选中的项目 -->
				<!-- selected="selected/true列表框默认被选中项目 -->
				<tr>
					<td align="right">生日：</td>
					<td>
						<select>
							<option value="1992">1992</option>
							<option value="1993">1993</option>
							<option value="1994">1994</option>
							<option value="1995">1995</option>
							<option value="1996">1996</option>
							<option value="1997">1997</option>
						</select>年
						<!-- select表示列表框 -->
						<!-- option表示列表项 -->
						<select>
							<option value="1">2</option>
							<option value="2">2</option>
							<option value="3">3</option>
							<option value="4">4</option>
							<option value="5">5</option>
							<option value="6">6</option>
						</select>月
						<select>
							<option value="13">13</option>
							<option value="14">14</option>
							<option value="15">15</option>
							<option value="16">16</option>
							<option value="17">17</option>
							<option value="18">18</option>
						</select>日
					</td>
				</tr>
				<tr>
					<td align="right">头像：</td>
					<td>
						<img src="headLogo/2.gif" alt="not find"/>
						<select>
							<option value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>
							<option value="4">4</option>
							<option value="5">5</option>
							<option value="6">6</option>
						</select>
					</td>
				</tr>
				<tr>
					<td align="center" colspan="2">
						<input type="submit" value="注册"/>
						<!-- submit需要在form包裹下才能体现效果 -->
					</td>
				</tr>
			</table>
		</form>
	</body>
	</html>

HTML总结

表格是一种布局方式，但是不是唯一的方式，美化效果还需要css样式来补充！

标签及嵌套规则

现在的大部分的网页布局DIV+CSS方式，最常见的标签如下：
1、div（块级标签）
是一个区块容器标记，

<div>是一个容器</div>  div之间是一个容器，这个容器可以包裹段落、表格、图片等各种html元素

2、span（行级标签）
没有实际意义，为了应用样式；
3、块级标签
占据一行，换行。
div, ul, ol, li, dl, dd, h1~h6, p, form, hr, …
4、行级标签
在一行，不换行。
b, em, img, input, a, sup, sub, textarea, span…
5、标签嵌套
案列

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>前端课程</title>
</head>
<body>
	<h1>web前端课程</h1>
	<ol>
		<li>HTML
			<ul type="square">
				<li>HTML标签</li>
				<li>HTML语法</li>
				<li>HTML结构</li>
			</ul>
		</li>
		<li>CSS
			<ul type="square">
				<li>CSS语法</li>
				<li>CSS样式</li>
				<li>CSS选择器</li>
			</ul>
		</li>
		<li>JavaScript
			<ul type="square">
				<li>JS数据类型</li>
				<li>JS对象</li>
				<li>JS循环</li>
			</ul>
		</li>
	</ol>
</body>
</html>

总结几点标签嵌套规则
1、块级标签可以包含行级标签（行内元素）和某些块级元素
2、行内元素不能包含块级元素，只能包含其他行内元素
3、块级元素不能放在p – 段落标签内
4、特殊的块级元素只能包含行内元素，不能在包含块级元素
如：h1~h6 p dt…
5、块级元素和块级元素并列，行级元素和行级元素并列
注意：规则需要遵守，但是html语法检查不严格，浏览器不能做到查错！