html骨架html标签HTML锚链接html form表单

html基础用法+css标签用法

1、重命名你的文件，扩展名.html 一定带上 ， 选择c盘之外的盘存储文件-----》 保存

2、html骨架：
:定义文档类型；告诉浏览器按照html协议来解析文档；
// 根标签
//头部
//定义网页的编码格式；meta标签：存放网页的源信息；编码格式，关键字，网站描述等；
定义网页的标题 //定义网页标题

//网页的主体
//所有展示给客户看的信息，都要放这里，可以是文本，图片，音频 ，视频等；
// 需要借助我们的标签，
展示图片：img
文本：div span p h1-h6 (ul li ) (ol li) (dl dt dd ) (table tr td)

3、 学习的标签：

3.1、段落标签：p 块元素，独占一行；可以设置宽高
3.2、标题标签：h1-h6 : 块元素，独占一行；可以设置宽高； 字体由大到小；
h1:应用场景：
1、商城类网站：作用于logo
2、新闻类网站：作用于新闻标题
h1标签在页面中只能出现一次；原因是他是语义化标签；

3.3、div标签：块元素，容器；可以嵌套任何标签和内容;没有语义的标签
作用：用于网页的排版和布局；

3.4、span标签：行内元素；没有语义；存放小段文字；

3.5、格式化标签：
b 和 strong :
相同点： 加粗显示文本；
不同点：strong带有强调的含义
i 和 em :
相同点：斜体显示
不同点：em带有强调意思

    big 和 small :big显示大号字体；small显示小号字体

    sub  和 sup : sub下标  sup上标

    del ：定义删除字体

3.6、列表标签：
无序列表： ul li

    有序列表： ol  li 

    自定义列表： dl   dt   dd 

3.7、table表格标签：统计数据；
将表格结构化：tbody thead tfoot(了解即可；几乎不用，表格的尾部，放到thead 和 tbody之间)

    属性：
    border:边框
    cellpadding:内容和单元格之间的空白
    cellspacing:单元格之间的间距

    rowspan:跨行
    colspan:跨列	

3.8 img标签：
src属性：存放图片的路径
alt属性：图片加载失败时的替换文本
title属性：鼠标停留3s以上出现提示信息

3.9、路径：相对路径和绝对路径
相对路径：相对于当前操作的文件而言，去查找目标文件；
关系：
同级目录：直接写文件名字.jpg
下一级关系 / ：文件夹/文件名字.jpg / 代表下一级
上一级关系 …/ ： …/文件名字.jpg …/ 代表上一级

    	当前目录： ./   

     绝对路径：以自己电脑的盘符开始的路径或者是以http://  或者  https:// 开头的路径；
          推荐使用http://  或者  https:// 开头的路径；

3.10、 a标签：
href: url(相对路径和绝对路径) 链接的文件地址
链接的文件类型不受限制；

    target:在何处打开链接的文档
    	_blank; 新窗口打开文档
    	_self; 默认值，在当前窗口打来文档
    	_top; 在框架集中使用，在整个窗口中打开文档
   	 _parent;    在框架集中使用，在父框架集中打开文档

a链接的四中状态：l-v-h-a
	a:link   -- 未访问 
	a:visited -- 已经访问 
	a:hover  -- 鼠标悬停
	a:active - 当前激活 活动  状态 

3.11、 锚链接实现前提：页面足够的长；必须出现滚动条；

    锚链接：
两种方式：
第一种方式：使用id作为标记点，使用a标签的href属性建立；
1、插入标记点： 
  :页面中的任何一个地方，都可以插入标记点
任何一个标签，给标签添加id属性， 然后给标记点起名字， id="mao"  中 mao  就是标记点的名字，还可以使用其他的标签，div， p, h1 ， ul li

2、建立链接：建立链接    你想在哪里建立就在哪里建立
通过a标签的href属性建立链接；  href="#mao"  #mao  前边的 # 就是暗号， 后边的 mao 就是你要建立链接的标记点；就是你和谁建立链接

第二种方式：使用a标签的name作为标记点；使用a标签的href属性建立；

1、插入标记点：  :页面中的任何一个地方，都可以插入标记点
给a标签添加name属性， 然后给标记点起名字， name="mao"  中 mao  就是标记点的名字，

2、建立链接：建立链接    你想在哪里建立就在哪里建立
通过a标签的href属性建立链接；  href="#mao"  #mao  前边的 # 就是暗号， 后边的 mao 就是你要建立链接的标记点；就是你和谁建立链接

3.12、form表单：
type 值： text password radio checkbox button Reset submit image hidden file
单选按钮： name属性：分组 ；name=“sex” sex名字可以随意，但是要有代表性
下拉列表：select option
信息分类： fieldset legend
多行文本域：textarea
cols=“30” 列数 rows=“10” 行数

action 属性：提交的地址URL，
method属性： 提交信息的方式；get（默认提交方式） 和   post

name 和 value 属性：数据传输的载体；

         你输入的信息是存在value属性里，name 是对信息起专用的名字

    get方式提交：
    提交的信息会拼接在URL地址后边，以? 链接，?前边是提交的路径（URL），?后边是提交的信息；多个信息之间使用 & 符号进行链接；
    get方式不安全；

    post方式提交：
    提交的信息不会拼接在URL地址后，而是放到请求头信息里边；相对而言比较安全；

   3.13、get 和 post 区别  

1>  get post 用来向服务器上传数据，get适合传输轻量级数据

2>  get数据传输 安全性相对 比post 较低   

3>  get 传输数据量较小  post 传输数据量较大  

4>  get 把数据提交到 action 属性所指的URL中

5> get 相对于 post 传输效率较高  

6> get限制数据的类型必须是 ascii 码 形式  ，post 支持ISO-10646 字符集 类型  

7>get  默认 的方式，缺省情况下 使用get方法 

3.14、name和value在网络传输中的作用：

1> name 是某一些  标签的属性，是JS中的引用标识 

value 是 表单标签中 具体的值     ；

2>  value 值可以传输给服务器端 

3>name和value是数据传输的载体；

3.15、label标签：绑定input标签，点击文字，input标签也能获取焦点
第一种方式：
	方法： for属性：和 input标签的 id 属性建立链接
          		for="user"   id="user" 两者是一一对应的关系
         		for属性的值要input标签id属性的值保持一致；id属性的值不能重复；
   	 用法：
    	姓名：
    	

第二种绑定方式：   嵌套：
    		label 标签嵌套input标签；可以省略for属性
    	
      	  	账户1：