【HTML5】基础知识 （全）

HTML 基础知识

1.lang 语言类

en 英语 zh-CN 中文网页 fr 法语

2. 字符集 charset UTF-8 万国码

3. 标签语义

标题标签

<h1>-<h6>   重要性递减  具有自动换行的特性 

段落标签

<p> 将文字分为不同段    具有自动换行的特性

英语 paragraph： 段落 段落之间会插入一些垂直的间距

换行标签

  <br/> 强制换行

br 是一个单标签，br/标签只是简单的开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距
文本格式化标签 ，为文字设计粗体，斜体，下划线 等效果， 突出语义，比普通文字更重要

加粗标签<strong></strong>  <b></b>     

倾斜  <em></em>    <i></i>   

删除线 <del></del>  

下划线 <ins></ins>  <u></u>

以上都推荐第一个，语义更强烈 没有换行的特性

-div span 两者都没有语义，是一个 盒子是用来装内容的

-div division 缩写 ，表示分割，分区 一个div独占一行 自动换行的特性 大盒子

-span 表示为跨度，跨距 span 可以一行放好几个 小盒子 没有自动换行的特性

4. 图像标签

img 单标签 的属性 src是必须的属性 alt 文本 图像显示不出来的时候，显示出来的文字 title 文本 鼠标放到图像上显示出的文字

width 图像的宽度

height 图像的高度 宽和高 修改一个就可以，另一个会自动缩放

border 图像的边框粗细

注意 ： 属性放在标签名后src后，属性没有先后顺序，可以有多个设计

5. 路径

路径 目录文件夹 根目录文件夹
绝对路径 电脑中的文件 从盘符开始

相对路径 图像相对于html的路径 / 下一级 …/上一级

6. 超链接

<a></a>  anchor  锚 

属性：

href 目标的url地址

target 网页的打开方式，_self 为默认，_blank 在新窗口打开
外部链接 http://

内部链接 不需要加http

空链接 : herf=“#”

下载链接 : 地址链接的是 .exe zip herf=“img.zip” 文本，图像，表格，音频，视频都可以添加超链接
锚点链接 ：定位到页面的某个位置

例如 :

 <a herf="#two">第二集 <a>      #+名字 

目标位置标签，添加一个id属性 = two, <h3=“two”>第二季介绍

7. 注释

注释    ctrl +/ 
特殊字符 :
     空格 &nbsp
     大于号 &gt 
     小于号 &lt

8. 表格标签展示数据

<table>  
<tr>  
<td> </td> 
</tr>
</table>
<table></table> 用于定义表格的标签

<tr></tr> 定义表格中的行，必须嵌套载table中 
<td></td>  表格中的单元格，必须嵌套载<tr></tr> 标签中

表头标签  表格中第一行， <th></th>  table head   表头单元格里的文本内容加粗居中展示

表格属性 ： CSS 设置  直观感受  这些属性要写到表格标签 table中去 
表格结构标签： 将表格分割为表头和表格主体两大部分 

<thead>  表头区域 
<tbody>  表格主体

9. 合并单元格：

方式:

跨行合并 rowspan= “合并单元格的个数”

跨列合并 colspan = “合并单元格的个数”

目标单元格:

跨行：最上侧单元格为目标单园格，写合并代码

跨列： 最左侧单元格为目标单元格，写合并代码

合并单元格步骤

1 确定是跨列还是跨行合并

2 找到目标单元格， 写上合并方式=合并的单元格数量

3 删除多余的单元格

10. 列表标签

整洁 整齐

无序列表

<ul>      
<li>列表项1<li>      
<li>列表项2<li>       
<li>列表项3<li>      
<li>列表项4<li>       
<li>列表项5<li>    
</ul>    
  <ul> 标签中只能有<li>   <li></li> 之间相当于一个容器可以容纳所有元素  

有序列表

​ 有排列顺序的列表，其各个列表项回按照一定的顺序排列定义

<ol>        
<li> </li>     
<li> </li>     
</ol>   
<u>
ol 之间只能放li。而li中间可以输入其他标签或者文字。</u> 
有序列表会带有 自己的样式属性，我们通常会用CSS来设置 

自定义列表

自定义列表常用于对术语或者名词进行解释和描述，定义列表的列表项前没有任何项目符号。

一个大哥带这一群小弟。

  <di>
      <dt>名词1</dt>      
     <dd>名词1解释1</dd>      
     <dd>名词1解释2</dd> 
 </dl>    

注意:
1 里面只能包括

和

2

和

个数没有限制，经常是一个dt 对应多个 dd

11. 表单标签

为什么需要表单： 表单的目的是为了收集用户信息。

表单的构建： 一个完整的表单通常由表单域(form)，表单控件（表单元素）和提示信息3个部分构成 .

<form action="url地址" method="提交方式" name="表单域名称">  

各种表单元素控件

</form>    

action  url 地址   用于指定接收并处理表单数据的服务器程序的url地址 
method  get/post   用于设置表单数据的提交方式，其取值为get或者post 

name    名称        用于指定表单的名称，以区分用一个页面中的多个表单域  

表单控件

input 输入表单元素

<input type="属性值"/>     没有自动换行的特性

<input/>标签为单标签   type 属性设置不同的属性值来指定不同的控件类型

type 属性的属性值及其描述如下：

button      定义可点击按钮  多数情况下通过 js 启动脚本

checkbox    定义复选框

file         定义输入字段和浏览按钮，供文件上传

hidden      定义隐藏的输入字段image 定义图像形式的提交按钮 
password    定义密码字段，该字段中的字符被掩码 

radio       定义单选按钮.可以实现多选一。   给这个多个radion 拥有相同的name，才可以实现多选一     reset       定义重置按钮，重置按钮会清除表单中所有的数据,恢复初始状态    

submit     定义提交按钮，提交按钮会把表单数据发送到服务器

text        定义单行的输入字段，用户可再其中输入文本，默认宽度为20个字节

除了type属性外标签也有很多其他的属性，如下

属性    属性值          描述 
name      由用户定义    定义input 元素名称

value      由用户定义         规定input 元素的值    文本框里的提示，
submit     提交按钮的改变        checked  checked 规定此input 元素首次加载时应当被选中
maxlength   正整数           规定输入字段中的字符的最大长度

注意：

name 和value是每个表单元素都有的属性值，主要给后台人员使用  

name 表单元素名字，要求单选按钮和复选框要有相同的name值 

checked属性主要针对于单选按钮和复选框，主要作用是一打开页面，就可以默认选中某个表单元素              maxlength 是用户可以在表单输入的最大字符数，一般比较少使用

<lable>  标签为input 元素定义标注（标签）

<lable >标签用于绑定一个表单元素，当点击<lable>标签内部的文件时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素增加用户的用户体验

语法：

<lable for ="sex ">男 </label>   
<input type="radio" name="sex" id="sex"/>   

select 下拉单元表

多个选项让用户选择，并节约空间

<select>             
<option>选项1</option>             
<option>选项2</option>            
<option>选项3</option>            
<option>选项4</option>             
<option>选项5</option>                      
</select>   

注意:

select 中至少包含一对  <option> 
在<option>中定义select = "selected"时，当前项即为默认选中项

textarea 文本域元素

<form>  
<textarea  row=”3’ cols="20">       
文本内容     
</textarea>       
<form>    
通过<textarea>标签可以轻松的创建多行文本输入框   
cols="每行中的字符数"
rows =“显示的行数”  
    
我们实际开发中不会使用，都时用css来改变大小