HTML学习笔记

HTML学习笔记

1. 块标签（块元素）

特点：

1) 独占一行空间（100%）
2) 高度默认为0，高度由内容决定
3) 可以指定宽、高
4) 用来搭建页面框架

元素：

h4：div、body、p、ul>li、ol>li、dl>dt、dd、h1~h6
h5：header、footer、nav、section、article、aside、address... 语义化标签
简单大方、无招胜有招

2 . 行内标签（行内元素）

特点：

1) 行内与其他行内元素共享一行空间
2) 宽高都由内容决定
3) 无法指定宽、高
4) 用来填充，行内元素需要嵌套在块元素中，但是块元素不能嵌套在行内元素中。

元素：

装饰类型标签：strong b em i sub sup ...

功能标签：

• a
  1)超级链接

  href="" 跳转
  url 跳转到一个外网地址中

  • 相对路径：相对于当前代码所在文件的路径
    . 当前目录下
    .. 当前目录下的上一级目录
  • 绝对路径：相对于基准点
    linux操作系统中
    / 操作系统根目录 也就是 /
    /var/www/html apache2部署目录
    index.html / 代表apache的根部署目录 即 /var/www/html

  2)锚点

  1. 定义锚点  
  顶部
  2. 跳转     跳转顶部

  3)其他

  target=""   目标
  _self   默认值 ，当前页面
  _blank  新页面

• img
  1)src 图片地址

  1. 网络资源
  2. 相对路径
  3. 绝对路径
  4. base64格式值

  2)alt 图片找不到时候的文本替换

3. 功能标签（功能元素）

(1) table 表

tbody 表格体 thead、tfoot
tr 行
td、th 列 （容器）

• 子标签可以为任意其他标签
• 行中的列数在经过计算后应该是相同的

(2) form

用来进行前后台数据交互（默认情况下，同步交互：JavaEE(jsp)、nodejs(模板)）
ajax 异步交互
前置技术： http协议

1）form( action 后端处理接口，enctype 表示编码方式，method请求方法)

method取值

get 用于查询操作，参数携带在url后面
post 用于更新【保存、修改、删除】操作，参数携带在请求报文请求体中

enctype取值：

1.application/x-www-form-urlencoded：
查询字符串（表单编码）将特殊字符转换为16进制 key=val&key=val&...
schoolName=太原理工大学&userName=陈明
2.multipart/form-data：
用于表单中有附件提交的时候，二进制，无需进行编码
3.text/plain：
纯文本提交

2) input 输入框

注意：input(text、password、radio、checkbox)必须添加name属性，(radio、checkbox)必须添加value属性

       单行文本框
      密码
        单选按钮
      复选按钮
            附件
     提交按钮
      重置按钮

      日期选择器（h5新增，兼容性差，一般不用）
    ...

性别单选按钮注意将其放入一个lable标签中，形成一个整体，方便按钮（按文字时也能选中）

     男


     女

3) textarea 多行文本

4) select 下拉菜单

    
      江苏
      山西
      河南
      

(3)iframe

把另一个完整的页面嵌进来，例如天气预报