学习笔记---HTML

最新推荐文章于 2024-08-03 20:32:29 发布

sunsea_

最新推荐文章于 2024-08-03 20:32:29 发布

阅读量55

点赞数

文章标签：前端 html

本文链接：https://blog.csdn.net/weixin_43730624/article/details/122383798

版权

1、html5简介

超文本标记语言、解释性标签语言

1.1 超文本:

超级文本：字符，超级链接，图片，音频，视频，画布（地图、图表、3D模型）

1.2 标记：

标签进行标记， html标签（无法使用自定义标签）

1.3 语言：

c、java 编译型语言
- hello.c --gcc–> hello.o --运行–>linux
- Hello.java --javac–> Hello.class --运行–> jvm --> linux/win
html、js、css 解释型语言
- hello.html --> 浏览器 -> linux/win
执行效率：c > java > js

2、html结构

<!DOCTYPE html> 
      文档类型： html
    <html>
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
      </head>
      <body>
      </body>
    </html>

head中的内容无法显示到浏览器视口中
charset 设定编码格式
viewport 适配移动端
属性：位于开始标签中

核心属性（通用，绝大多数标签都具有的属性）
id 唯一标识
class 分类，可以重复
title 悬浮提示
style 添加css规则的
自有属性

<img src="" alt=""></img>
<a href="https://www.baidu.com" target="_blank">百度一下，你就知道</a>

3、标签

3.1 块标签（块元素）

特点：

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

元素：
h4：div、body、p、ul>li、ol>li、dl>dt、dd、h1~h6
h5：header、footer、nav、section、article、aside、address… 语义化标签

3.2 行内标签

特点：

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

元素：
span、a、img
装饰类型标签：strong b em i sub sup …

a 超级链接
- href=" " 跳转
  - url 跳转到一个外网地址中
  - 相对路径：相对于当前代码所在文件的路径
  - 绝对路径：相对于基准点
  - 锚点
  1. 定义锚点 <div id="top">顶部</div>
  2. 跳转 <a href="#top">跳转顶部</a>
  - 其他
- target=" " 目标
  - _self 默认值，当前页面
  - _blank 新页面
img
- src 图片地址
  1. 网络资源
  2. 相对路径
  3. 绝对路径
  4. base64格式值
- alt 图片找不到时候的文本替换

3.3 功能标签

table 表格
tbody 表格体 thead、tfoot
tr 行
td、th 列（容器）
子标签可以为任意其他标签
行中的列数在经过计算后应该是相同的
form 表单：用来进行前后台数据交互（默认情况下，同步交互：JavaEE(jsp)、nodejs(模板)）
ajax 异步交互

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

method取值
- get 用于查询操作，参数携带在url后面
- post 用于更新【保存、修改、删除】操作，参数携带在请求报文请求体中
enctype取值：
- application/x-www-form-urlencoded
  查询字符串（表单编码）将特殊字符转换为16进制 key=val&key=val&…
  schoolName=太原理工大学&userName=陈明
- multipart/form-data
  用于表单中有附件提交的时候，二进制，无需进行编码
- text/plain
  纯文本提交

        1) 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新增，兼容性差，一般不用）
       
        2) textarea  多行文本
          <textarea name="description" cols="50" rows="4"></textarea>
        3) select    下拉菜单
          <select name="address">
            <option value="js">江苏</option>
            <option value="sx">山西</option>
            <option value="hn">河南</option>
          </select>