HTML笔记

最新推荐文章于 2024-09-22 10:46:41 发布

Seethespire

最新推荐文章于 2024-09-22 10:46:41 发布

阅读量99

点赞数

文章标签： html

本文链接：https://blog.csdn.net/Seethespire/article/details/107801250

版权

1.html

超文本标记语言
1. 是标记语言，告诉浏览器如何解析html文件
2. 超文本与普通文本的区别
    普通的文本：
        纯字符
    超文本：
        图片、链接、音视频...
3. 浏览器会按照从上往下的顺序解析文件
4. 对于语法错误不会打印出来
5. 可以使用.html和.htm作为文件后缀

2、开发环境

编辑器
    vscode(sublime)
    下载插件 open in browser
浏览器
    firefox(chrome)
服务器
    阿里云用来部署代码

3、http请求

请求/响应模式
    请求头、请求行、请求数据
        请求数据
            var obj = {name:'tom',age:23}
        请求头
            content-type
                设置数据格式
            content-type:application/json
            content-type:application/x-www-form-urlencoded

    响应头、响应行、响应体
        响应头 (状态码：200、404、500、401)
            if(res.status == '200') {
                alert('登录成功')
            } else if (res.status == '401') {
                alert('权限不够')
            }
        响应体 (java接口数据的显示或者封装操作)
            $.ajax res.data.token
            axios res.data.data.token

    swagger-ui.html接口
        登录    用户名 + 密码
        json字符串"{'name':'tom','age':'23'}"
        查询字符串name=tom&age=23

    url 统一资源定位符
        协议://ip:port/path

4、html结构

html 文件的主体(根元素)
head 文件的头部：引入样式表、引入js文件
    <link rel="stylesheet" href="">
    <script src=""></script>
title 浏览器选项卡的标题
body 所有需要显示在浏览器上的内容都写在此处  
DOCTYPE声明了文档的类型
<html>标签是 HTML 页面的根元素，该标签的结束标志为</html>    
<head>标签包含了文档的元数据（meta），如<meta charset="utf-8">定义网页编码格式为utf-8。
<title>标签定义文档的标题 
<body>标签定义文档的主体，即网页可见的页面内容，该标签的结束标志为</body>
<h1>标签作为一个标题使用，该标签的结束标志为</h1>，--　HTML标题    
<p>标签作为一个段落显示，该标签的结束标志为</p>--p标签用法

5、html标签的组成

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

6、块级元素和行内元素

块级元素
    div、h1~h5、p、html...
    1) 独占一行空间，不与其他元素共享空间
    2) 宽度默认是100%，也就是占满整个屏幕，高度由内容撑开
    3) 可以设置宽高
行内元素
    span、i、bold...
    1) 可以与其他元素共享一行空间
    2) 宽度由内容决定
    3) 默认情况下不可以设置宽高

7、元素属性

<div 属性名=属性值 属性名=属性值></div>
1) 核心属性【绝大多数标签都可以使用的属性】
    id     定义元素的唯一id
    title   描述了元素的额外信息 (作为工具条使用)
    style   规定元素的行内样式（inline style）
    class  为html元素定义一个或多个类名（classname）(类名从样式文件引入)
2) 特有属性【某些标签才具有的属性】
    img
        src 指 "source"。源属性的值是图像的 URL 地址。
        alt 属性用来为图像定义一串预备的可替换的文本。
    a
        href 访问的链接
        target 设置打方式
            _self   在当前选项卡打开链接
            _blank  新建选项卡打开链接
3) 自定义属性
    除了html中已有的属性，用户可以自定义属性
    <span data-test="test">太原</span>

8、html语法结构

1) 注释
    html中 <!-- 注释 -->
    css中 /* 注释 */
2) 实体
    空格 &nbsp;
3) 块级元素和行内元素
    元素的组成
        外边距margin + 边框border + 内边距padding + 内容
    块级元素
        div、html
            没有margin、padding、border
        body
            有margin
        p
            有上下margin
        h1~h5
            有上下margin、有font-size、font-weight
        ul li 无序列表
        ol li 有序列表
            ul 有上下maigin、padding-left、黑色圆点
    行内元素
        span
        a
        img
        i
        strong
    如何给行内元素设置宽高？
        先将行内元素设置为块级元素或者是行内块元素，再设置宽高

9、表格

表格由<table>标签来定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格由< td>标签定义）。
字母 td 指表格数据（table data），即数据单元格的内容。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
    HTML 表格的基本结构：
   <table>…</table>：定义表格
   <th>…</th>：定义表格的标题栏（文字加粗）
   <tr>…</tr>：定义表格的行
   <td>…</td>：定义表格的列
表格可以分为三个部分 - 头部，主体和页脚，如同word文档中页面的页眉、正文、页脚。每个页面保持相同，而正文是表格的主要内容持有者。 
头部，主体和页脚的对应的三个标签是：
<thead> - 创建单独的表头。
<tbody> - 表示表格的主体。
<tfoot> - 创建一个单独的表页脚。
table【用于展示数据】
    属性:border、bgcolor、cellspacing、cellpadding、width
    thead   表头
        tr
            th
    tbody   表体
        tr
            td

合并单元格
    跨行合并
        rowspan
    跨列合并
        colspan

10、表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签 <form> 来设置:

    action  访问接口的地址
    method  表单提交的方式
        post
        get
        put
        delete

    post和get方式的区别？
        get 
            1. 会将请求的数据拼接再浏览器的地址栏上
                www.baidu.com?name=tom&age=12，不安全
            2. 请求数据的大小有限制
        post 
            1. 会将数据放在请求体中，比较安全
            2. 对于请求数据的大小一般没有限制

    表单组件
        input
            type
        文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
        密码字段通过标签<input type="password"> 来定义:
        <input type="radio"> 标签定义了表单单选框选项。
        <input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
        <input type="submit"> 定义了提交按钮.
        当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。
        由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:
        file    文件按钮  
        reset   重置表单
        select 定义了下拉选项列表
        option 定义下拉列表中的选项
        textarea 定义文本域 (一个多行的输入控件)
        button 定义一个点击按钮
        label 定义了 <input> 元素的标签，一般为输入标题