乐趣区

关于html5: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. 定义锚点  <div id="top"> 顶部 </div>
    2. 跳转     <a href="#top"> 跳转顶部 </a>

    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 属性

    <input type="text" />   单行文本框
    <input type="password" />  明码
    <input type="radio" />    单选按钮
    <input type="checkbox" />  复选按钮
    <input type="file"/>        附件
    <input type="submit" /> 提交按钮
    <input type="reset" />  重置按钮

    <input type="date" />  日期选择器(h5 新增,兼容性差,个别不必)...

性别单选按钮留神将其放入一个 lable 标签中,造成一个整体,不便按钮(按文字时也能选中)

<label for="input_gender_male">
     <input id="input_gender_male"  type="radio" value="male" name="gender"> 男
</label>
<label for="input_gender_female">
     <input id="input_gender_female" checked type="radio" value="female" name="gender"> 女
</label>

3) textarea 多行文本

<textarea name="description" cols="50" rows="4"></textarea>

4) select 下拉菜单

    <select name="address">
      <option value="js"> 江苏 </option>
      <option value="sx"> 山西 </option>
      <option value="hn"> 河南 </option>
    </select>  

(3)iframe

把另一个残缺的页面嵌进来,例如天气预报

<iframe width="100%" height="300" frameborder="0" scrolling="no" hspace="0" src="https://i.tianqi.com/?c=code&a=getcode&id=55&icon=1"></iframe>

退出移动版