web网页前端-HTML

1.web的标准三层结构

                结构（html）：用于对网页元素进行整理和分类-- 好比人的身体

                表现（css）：用于设置网页元素的版式，颜色，大小等外观样式-- 好比人的着装

                行为（js）：指网页模型的定义及交互的编写-- 好比人的行为动作

2.html骨架标签

       

                   

           

           

           

3.HTML标签的关系

1.嵌套关系（父子关系）

           

2.并列关系(兄弟关系)

4.排版标签

1.标题标签：h1~h6

2.段落标签：

3.水平线标签：

---

4.换行标签：

5.两个重要的盒子标签：

一行只能放一个div  一行可以放多个span

5.文本格式化标签

1.加粗标签：或 推荐用strong

2.斜体标签：或 推荐用em

3.加删除线标签：或 推荐用del

4.加下划线标签：或 推荐用ins

6.图像标签

必须有属性

属性            属性值            描述

src                URL              图像的路径

alt                 文本               图像不能显示时的替换文本 

title               文本                鼠标悬停时显示的内容

width             像素                设置图像的宽度

height            像素                设置图像的高度

border            数字                设置图像边框的宽度

7.链接标签

属性            作用

href            用于指定链接目标的url地址

target        用于指定链接页面的打开方式，有_self和_blank两种，_self为默认值，_blank为在新                    窗口中打开方式

8.注释标签

9.锚点定位

分两步：1.使用相应的id名标注跳转目标的位置

                2.使用链接文本链接

10.base标签

设置整体链接打开状态，base写到之间

11.pre标签

按原来写的格式显示在页面上，是保留空格和换行的

12.特殊字符

特殊字符            描述                字符代码

                          空格符                 

<                        小于号                <

>                         大于号               >

&                         和号                  &

￥                        人民币               ¥

©                          版权                  ©

®                          注册商标           ®

°                           摄氏度               °

±                          正负号                ±

✖                          乘号                   ×

➗                         除号                  ÷

²                             平方                  ²

³                              立方                  ³

13.表格

表格是用来展示数据的，可以让数据展示的整齐规范

表格标签：

行标签：

单元格标签:

属性                含义 

border            设置表格的边框(默认border=0,无边框)

cellspacing       设置单元格与单元格边框之间的空白距离

cellpadding        设置单元格内容与单元格边框之间的空白间距

width                设置表格宽度

height                设置表格高度

align                设置表格再网页中的水平对其方式(left,center,right)

表头单元格：会让文字加粗居中

表格标题caption:

                                       

                             

合并单元格

跨行合并：rowspan='合并单元格的个数'

跨列合并：colspan='合并单元格的个数'

合并单元格顺序：先上后下 先左后右

合并单元格三部曲：1.先确定是跨行还是跨列2.根据先上后下，先左后右的原则找到目标单元格合并3.删除多余的单元格

表格的划分：thead,tbody,tfood 头部，中部，尾部

14.列表标签

1.无序列表

       

       

        ....

中只能嵌套
• ,在
  下直接嵌套其他标签是不被允许的

  2.有序列表

         

         

          ...

  3.自定义列表

     

       

          ...

         

         

  
  

  15.表单标签

  1. type属性值不同，可以指定不同的标签

  属性            属性值            描述

  type            text                单行文本输入框

                      password      密码输入框
  

                      radio              单选按钮
  

                      checkbox        复选框
  

                      button            普通按钮
  

                      submit            提交按钮
  

                      reset                重制按钮
  

                      image               图像形式的提交按钮
  

                      file                    文件域

  name            由用户自定义        控件的名称

  value            由用户自定义        inpu控件中默认的文本值

  size                正整数                input控件在页面中的显示宽度

  checked        checked               定义选择控件默认被选中的项     

  maxlength       正整数                控件允许输入的最多字符数

  2.label标签

  作用：1.用于绑定一个元素，当点击label标签时，被绑定的表单元素就会获得输入焦点 2.通过for 和 id来控制

  3.textarea(文本域)

  </b></p> <p><b>  文本内容<br></b></p> <p><b>

  4.select下拉列表

         

           

          ...

  5.表单域