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
【HTML学习笔记】用来进行前后台数据交互(默认情况下,同步交互: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
把另一个完整的页面嵌进来,例如天气预报

HTML学习笔记
文章图片

    推荐阅读