HTML学习笔记

最新推荐文章于 2024-09-14 15:26:51 发布

tyelixy

最新推荐文章于 2024-09-14 15:26:51 发布

阅读量54

点赞数

分类专栏：学习笔记文章标签： html

本文链接：https://blog.csdn.net/tyelixy/article/details/119078827

版权

学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

HTML

超文本标记语言

不是编程语言

是一套标记标签

用标记标签描述网页

一、关于HTML文档

包含了HTML标签和文本内容

也叫web页面

二、关于HTML标签

用尖括号<>包围的关键词

通常成对出现<></>

第一个是开始标签（开放标签）

第二个是结束标签（闭合标签）

三、关于HTML元素

通常与HTML标签描述同样的意思

但严格来说包含了开始标签与结束标签

大多数 HTML 元素可以嵌套

四、HTML网页结构

<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        <h1>    标题    </h1>
        <p>
            段落
        </p>
    </body>
</html>

其中区域内的部分在网页内显示，title在网页上方标题位置显示。

标签：

HTML 标题标签只用于标题

用标题可以呈现文档结构

搜索引擎使用标题为网页的结构和内容编制索引

五、声明

<!DOCTYPE>

声明HTML的版本（不区分大小写，HTML标签对大小写不敏感）。

例如：

HTML 5:<!DOCTYPE HTML>
声明字符

可用于进行中文编码：<meta charset="UTF-8"

在头部将字符声明为UTF-8或GBK(Chinese Internal Code Specification,即汉字内码扩展规范)

六、HTML属性

HTML 元素可以设置属性（对大小写不敏感，但推荐用小写）
属性可以在元素中添加__附加信息__
属性一般描述于__开始标签__

属性值应该始终被包括在引号内(一般为双引号"",在属性值内含有双引号时使用单引号'')。

属性=""

举例：

class \\为HTML元素定义类名
id    \\定义元素的唯一id
style \\规定元素的行内样式
title \\描述了元素的额外信息

七、HTML语法

换行：<br>或<br/>

屏幕的大小，以及对窗口的调整都可能导致HTML被显示的不同的结果。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格，无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
水平线：<hr>
注释：
斜体：<i>文字</i>
加粗：<b>文字</b>
上标和下标：<sup>上标</sup>``<sub>上标</sub>
<code>标签:<code></code>

用于表示计算机源代码或者其他机器可以阅读的文本内容

通常只是把文本变成等宽字体，但它暗示着这段文本是源程序代码
突出重要：

<strong></strong> ：效果同<b>

<em></em>:效果同<i>

HTML头部

<title>

在HTML文件中是必须的
定义文档标题
<title>文档标题</title>

<base> ?

描述基本链接地址/链接目标
作为HTML文档中所以链接标签的默认链接
<base> herf="网址" </base>

<link> ?

定义文档与外部资源的关系
<link rel="" type="" href="">

<style>

定义HTML文档的样式文件引用地址
也可以直接添加样式
<style type="">内容</style>

<meta>

描述一些基本的元数据（并不显示在页面上，但会被浏览器解析）

<script>

用于加载脚本文件

主体部分

链接

链接：<a href="网址">链接文本</a>

其中href为属性

链接文本可以是文本、图片或其他HTML元素。
- target属性：定义被链接的文档在何处显示
```
<a href="网址" target="_blank" >链接文本</a>       
```
锚链接href="#锚标记"(锚标记通过id设置)
- 实现页面内跳转（到相应位置）
图像：定义<img src="url" alt="some_text">

<img src="图片路径" width="宽” height=“高”>

属性：
- src：source，即源属性，值为图像的URL地址,URL 指存储图像的位置。
- alt：alt 属性用来为图像定义一串预备的可替换的文本。当浏览器无法显示图像时将显示该文本。
- width，height：设置图片的宽和高。
- title：鼠标悬停时显示文字

表格：定义<table border="">

   <table border="1">
       <tr>
           <th>header 1</th>
           <th>header 2</th>
       </tr>
       <tr>
           <td>1,1</th>
           <td>1,2</th>
       </tr>
       <tr>
           <td>2,1</th>
           <td>2,2</th>
       </tr>
   </table>

标签

<th>：定义表头，显示为粗体居中文本
<td>：定义表格内容，默认左对齐
<tr>：依次定义表格的每一行

属性：

border:规定表格边框的宽度（为0则无边框）

可不规定边框，通过css来设置边框的样式和颜色
colspan：跨列
rowspan：跨行

列表
1. 有序列表：定义<ol><li>项</li></ol>
2. 无序列表：定义<ul><li>项</li></ul>
  
  标签：<ul>
  - <li>:定义每一项的内容
3. 自定义列表：定义<dl><dt>项</dt><dd></dd></dl>
  
  标签：<dl></dl>
  - <dt>：项开头
  - <dd>：项内容
区块

HTML可以通过<div>和<span>将元素组合起来

区块元素

块级元素：__显示__时常以新行开始&结束（可以包含内联元素）

内联元素：__显示__时通常不以新行开始（不能包含块级元素）

<div>：【块级元素】没有特定含义，可用于对文档布局，与css一起使用可以对大的内容块设置样式属性

用于文档布局可以代替<table>

<span>：【内联元素】没有特定含义，与css一起使用可以为部分文本设置样式属性
表单：表单用于向服务器传输数据

标签：<form></form>
- <input>
- <textarea>：文本域（cols，row）
- <label for="id">(增强鼠标可用性)
- <select>：下拉框(默认值通过selected设置)
  - <option>【项】
  属性：
  - type：定义输入类型
    
    输入类型
    
    文本域text
    
    密码字段password
    
    搜索框search
    
    单选按钮radio（必须有value，需要name；通过checked设置默认值）
    
    复选框checkbox（通过checked设置默认值）
    
    提交按钮submit
    
    重置reset
    
    按钮：bottom;
    
    image(作用同submit)
  - name：规定表单名称，提供引用方法
  - placeholder：框中显示内容
  - value：提交按钮显示内容/默认初始值
  - file：文件域
  - action：表单提交的位置，可以是网站，也可以是请求处理地址
  - method：表单提交方式get(可以在URL中看到提交信息）/post（在url中看不到提交信息，可以传输大文件）
  - readonly：只读
  - disabled：禁用
  - hidden：隐藏域
  - placeholder：提示信息
  - required：必须填写
  - pattern：正则表达式
按钮：<button>显示</button>
注释：<abbr title="注释">内容</abbr>
框架：定义<iframe src="url"></iframe>

实现在同一个浏览器窗口中显示不止一个页面

属性：
- 宽width：可以是像素也可以是比例
- 高height：可以是像素也可以是比例
- 源src
- frameborder ：用于定义iframe表示是否显示边框。
iframe可以显示一个目标链接的页面(在框架内显示网页)
目标链接的target属性必须使用iframe的name属性
1. 关于颜色
  
  属性：
  - rgb(r,g,b)：代表红、绿、蓝三种颜色的组成（每一项取值位于0_{255，十六进制00}FF）
  - rgba(r,g,b,a)：在rgb基础上增加了alpha通道（取值为0~1）
  - 有141个颜色名称是在HTML和CSS颜色规范定义的（17标准颜色，再加124）
  - 颜色值由十六进制来表示红、绿、蓝（RGB）。
    十六进制值的写法为 # 号后跟三个或六个十六进制字符。
    三位数表示法为：#RGB，转换为6位数表示为：#RRGGBB。
2. 脚本：
  
  标签：<script></script>:定义客户端脚本（如JavaScript）
  - 可以包含脚本语句
  - 可以通过源属性（src）指向外部脚本文件
  <noscript></noscript>：提供无法使用脚本时的替代内容（可以包含普通HTML页面中能找到的所有元素）
3. 字符实体（对大小写敏感）：为了正确显示预留字符（如<>)
  
  实体名称后需加;
  
  实体名称描述
  &nbsp 不间断空格，用于显示多个空格
  &lt 小于号<
  &gt 大于号>
  &amp 和&
  &quot 引号"
  &apos 撇号'
  &times 乘号×
  &divide 除号÷
4. HTML URL ?
  
  URL是一个网页地址，可以是网址域名或互联网协议（IP）地址
  
  网页地址语法规则：scheme://host.domain:port/path/filename
  - scheme：定义因特网服务类型
    - http：超文本传输协议
    - https：安全超文本传输协议
    - ftp：文件传输协议
    - file：本地文件
  - host ：定义域主机
    
    http 的默认主机是 www
  - domain ：定义因特网域名
  - :port：定义主机上的端口号
    
    http 的默认端口号是 80
  - path：定义服务器上的路径
    
    如果省略，则文档必须位于网站的根目录中
  - filename：定义文档/资源的名称
  URL 编码使用 “%” 其后跟随两位的十六进制数来替换非 ASCII 字符。
  URL 不能包含空格。URL 编码通常使用 + 来替换空格。
5. 视频和音频
  - <video src="" controls></video>
  - <audio src="" controls></video>
    
    属性：
    - controls：控制按钮
    - src：源
    - autoplay：自动播放

实体名称	描述
`&nbsp`	不间断空格，用于显示多个空格
`&lt`	小于号<
`&gt`	大于号>
`&amp`	和&
`&quot`	引号"
`&apos`	撇号'
`&times`	乘号×
`&divide`	除号÷