HTML学习基础

最新推荐文章于 2024-07-24 17:02:26 发布

Shavwv

最新推荐文章于 2024-07-24 17:02:26 发布

阅读量251

点赞数 1

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/weixin_43894527/article/details/113368877

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、互联网原理

HTML：制作网页
互联网原理：上网即请求数据。
网页是由一堆文件构成，上网时通过http协议，在本地服务器之间由真实的、物理的文件传输。
数据：文字、图片、视频、音频等

1. 服务器（server）

本身也是一台计算机。
服务器:用于存放文件,功能比我们的普通的计算机要强大，主要用于存储网页文件和数据。
数据上传和更改是在本地计算机上完成。
管理软件远程控制服务器。
FTP 。
必须24小时开机，否则将无法正常访问相关网站。

2. 浏览器 browser

网页请求和接收的客户端。
渲染网页必须使用的软件
渲染——显示网页
作用：发起http请求，接收服务器传输的文件。
chrome 谷歌 Firefox 火狐 IE Safiri 苹果 Opera 欧朋
兼容要求
请求的数据存在本地计算机的一个临时文件夹
作用：临时存储网页文件，第二次打开会快一些（已经缓存好）

3.http协议

http : hypertext transfer protocol 超文本传输协议
HTTP 包含请求和响应两部分
网址 ——> 请求
请求： request
响应： response
访问页面时，会同时发出多个http请求，包含网页的图片、视频、音频等。

二、HTML 基础

1.纯文本 plain text 只包含文本

纯文本文件只包含文字内容，不保存任何样式设置样式只是本机显示状态，不会保存在文件里
word 保存样式
txt文件 text
扩展名->更改文件类型
HTML\CSS\JS都是纯文本文件
纯文本文件都能够用任意的纯文本编辑器编辑HTML
sublime Editplus notepad++
Dreamweaver
Sublime 高效率程序书写工具
Webstorm 高级项目编程工具
sublime 超群的、崇高的

2.HTML 基本概念

hypertext markup language 超文本标记语言
作用：制作网页页面
负责描述文档的语义的语言
人说话区分主题语义，计算机不会去自动分析
人为地去用一些工具，帮我们的文档增加语义
HTML用文本文本来描述文本的语义，所用的文本即超文本，超文本在
浏览器渲染时不显示。
HTML不负责描述修改文本的样式，只是通过标签给文本增加语义

3.sublime

快捷键：
html:xt + tab ctrl 自动生成html结构
标签名 tab 自动生成标签
H$*数字生成从h1~h数字的标签
标签名 * 数字生成数字多个同一个标签
CTRL + 滑轮 按住滑轮滚动选中多行，一起进行编辑
ctrl + shift +D 复制光标所在行
ctrl + shift + K / CTRL +X 删除
ctrl + shift + ↑/↓ 上移/下移

4.文档DTD

HTML文件的第一行内容->文档定义类型
DTD: DocType Declaration ? Definition 文档类型定义，定义HTML文件使用的哪一个版本的HTML规范
规定了使用的标签语法
HTML css js 规范的维护和制定组织 W3C
HTML1.0 - HTML5.
HTM,4.0 结构样式分离
常用的HTML4.01
XHTML1.0 在4.01版本基础进行严格化
严格规定了标签必须小写，所有的属性都必须用双引号封闭，必须有结尾反斜杠
关闭符号
Strict 严格版不能使用font等非齐标签，不能使用框架集，结构和样式分离
Transitional 过渡版（通用版）
可以使用font等废弃标签，不能使用框架集
Frameset 框架集版：可以使用框架集
严格程度
X Strict >H4.01 strict >X transitional >H
学习过程中 XHTML1.0 transitional
html:xt XHTML1.0 transitional
html:xs XHTML1.0 strict
HTML5 大幅度更新升级，取消3个小版本
HTML5 DTD进行了极大的简化
<!DOCTYPE html>

5.HTML 标签

html标签是一个双标签。
双标签：有开始标签和结束标签，必须是成对出现的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
html标签有两个属性。
xmlns 规定了我们标签使用的哪种命名规范
xml 的namespace
用户浏览器不一致，必须规范什么是标签什么是内容，
标签具有什么语义
lang:规定html文件标签都必须使用英文

举例：head标签

双标签，里面是对网页的配置

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>

meata标签：单标签。
规范网页使用的字符集
常用字符集
国际标准字库：utf-8，包含世界上所有的人类语言。中文占3个字节
国家标准字库：gb2312/gbk，包括所有简体字，大部分繁体，一些特殊符号，片假名。中文占2个字节
1. 制作外文网站、少数民族语言，不要求加载速度，使用utf-8
2. 大量中文，且要求加载速度，gbk
meta标签声明的字库，必须和软件默认字库相同，否则将乱码。
title标签：是一个双标签，内部书写的网页的标题
搜索引擎优化：SEO。提升搜索排名。
title里的文字会作为关键首先被搜索引擎抓取。

三、HTML语法

标签对换行和空格不敏感
- 对标签之间的嵌套敏感。
- 可读性->进行缩进
空白折叠现象
- 在普通文本内部：如果有空格、缩进、换行，将这些空白区域折叠成一个空格显示在浏览器里。
-   ——一个空格
HTML标签
- 标签必须写在一对尖括号里<p>
- 双标签必须成对出现<p></p> 如果书写不完整，会影响后面的标签。
- 结束必须写关闭符号 / 。
- 标签分类：
  - 容器级：内部还可以放置嵌套任意类型的标签，甚至是容器级标签。div，h系列。
  - 文本级：只能放文字、图片、表单元素、废弃文字修饰标签等。不能放容器级标签。p标签。
标签属性
- 每一个标签都有自己特定的属性。属性都有属性值，属性名k(key),属性值(value),键值对。
- 属性书写在标签的起始标签内部，与标签名之间用空格隔开，属性和属性之间也需要用空格隔开。
- 键值对书写格式： k="v"。中间不能有空格。
  1. <p class="duanluo" id="op">p</p>
- 属性值必须是用双引号包裹，XHTML严格要求使用双引号。
- 标签属性值可以有一个或多个，多个属性值之间用空格隔开。

四、html标签

1.h系列（headline)

h系列标签分为了六个等级，表示一到六级标签。
语义：给文本添加六级标题语义。
级别依次降低，重要程度也是彻底降低。
约定俗成，一般一个页面里面h1标签的权重是最高的，最便于搜索引擎搜索。一个页面只写一个h1标签，一般把这个标签给logo。
所有的h系列标签虽然是容器级，它们之间并没有嵌套关系。

2. p标签（paragraph）文本级标签

给文本添加一个段落的语义。
注意：一个p标签只能作用于一个段落。多个段落要用多个标签分别标记。

3. img标签 image 图片，引入一张图片，本身相当于一个特殊的文本。

img标签是一个单标签。
可插入jpg、png、gif。
<img />
img标签属性：
🔺src : source,图片来源/路径。必须写！

4.路径

查找相关文件的位置的方法。
两种方法：相对路径与绝对路径。
(1)相对路径：查找文件时，从html文件本身出发，找文件的位置
1.同级查找：直接书写文件名字（文件名+扩展名）
2.子级查找：进入文件夹查找过程。书写对应文件夹名字，“/”表示进入，后面直接书写指定的文件名。
3.上级查找：文件放在html文件所在上级的文件夹。
"../" 退回，退几级用几次。
"../cat3.jpg"
<img src="../../" alt="" />
注意！相对路径不能跨盘符查找。
2）绝对路径：从盘符出发寻找目标文件，以http://开头的路径也是绝对路径。
常用：相对路径和网址形式的绝对路径。
img标签属性:
src
width 宽度 px（像素）单独设置宽度/高度，等比例变换。同时设置，任意变形。
height 高度
title 设置提示文本。（鼠标放在上面会显示）
alt 找不到图像时的替换文本，直接显示在空白上的。

5.HTML标签：

a标签
- anchor，锚。超级链接，可以跳转到相应的网站。
- 双标签🔺
- a标签的属性：
  - href:hypertext reference。超文本引用。属性值为要跳转的网页的路径。（绝对路径和相对路径都可以使用）
    - <a href="http://www.baidu.com">跳转到百度</a>
    - 可以添加图片。<a href="1.html"><img src="xxx.jpg" alt="" /></a>
  - target:目标。
    - 设置跳转后的网站是否要在新窗口打开。默认在原来窗口打开。
    - 在新窗口打开target="_blank"
  - title：设置鼠标悬停文本
- a的页面内锚点跳转：
  - 添加锚点的方法：
    - 给对应位置的标签添加一个id属性，属性值就是id名。<h$ id=></h2>
    - 在需要添加锚点的位置，加入一个a标签，不用书写href属性，添加一个name，命名与id一样。
    - 跳转锚点：将href属性值书写为#id名(#zuopin)
    - id名和name名字在网页里必须是唯一的。
- 跨页面跳转锚点
  - <a href="xxx.html#zuopin">

五、列表

将一些内容或者类似相近、相关的内容一起书写。

三种列表
- 无序列表
- 有序列表
- 定义列表
无序列表ul
- 无序列表作用：添加无序列表的语义
无序列表是一组标签。ul和li这两个标签必须成对出现。
- ul: unordered list ,无序列表
- li: list item ，列表项。
ul和li之间是嵌套关系。ul里可以嵌套一个或多个li标签。
- 快捷键 ul>li*5
- (ul>li)*5
- div>div>ul>li*5
li标签是一个经典的容器级标签，内部可以放置任何其他的标签，甚至还可以放ul>li。
无序列表并不会添加小圆点等样式。
无序列表里的项并没有顺序先后之分。
有序列表 ol
- 与无序列表相似。
  - ol>li*4
- 有序列表的作用：添加有序列表的语义，搭建列表结构。
- 也是一组标签，ol和li
  - ol：ordered list 有序列表。
  - li： list item 列表项
- ol和li必须同时出现，之间是嵌套关系ol>li
- ol只能嵌套li标签，li标签不能脱离ol单独出现。
- li标签是一个经典的容器级标签，内部可以放置任何其他的标签，甚至是ol、ul。
- ol默认有一个数字前缀，内置的一些预设样式，并不是ol的功能，样式只能通过css调整。
  - head中 style ol list-style:none;
定义列表dl
- 有三个标签参与的，dl、dt、dd。
- 有自己定义的主题，定义的解释。
- 定义列表的作用：添加定义列表的结构，里面有定义主题，对主题的解释。
- 标签解释：
  - dl : definition list。定义列表。
  - dt : definition title。定义标题。
  - dd : definition description。定义说明、解释。解释的是前面的最近的这个dt。
- 这一组标签需要同时出现，之间有一个嵌套关系。dl里面嵌套了dt和dd。
  - 快捷键 dl>dt+dd
- 每一个dt后面可以跟一个或者多个dd，表示对主题进行多次说明。也可以不加dd，只有主题，不进行解释。
- dt和dd都是容器级标签。
- 列表的使用:根据实际情况，根据结构语义来选择使用哪种列表。

主题：tbody。

六、表单

表单就是网页上可以提供用户输入和选择的一些空间。
form
- 我们所有的表单元素需要卸载from标签内部。不是一个结构性标签，而是一个功能性的标签。
  - 功能：规定我们提交的数据发送到哪里，发送的方法是哪种。
  - method:方法，提交数据的方法，属性值get、post。
  - action：提交的位置。
文本框
- 允许用户输入文本。
  - input：输入
  - type（属性）
    - 根据属性值不同，input标签代表的是不同的表单元素。
    - value
    - <input type="text" value="默认文本" />
  - 文本框input标签，type属性值为text。
  - value属性值是没输入之前的默认的文本。
  - 表单元素：类似一些特殊文本。
密码框
- type属性值：password。
- <input type="password" />
按钮
普通、提交、重置
- 普通type:buttton。
- 提交type:submit。
- 重置type:reset。
单选框
- type：radio。收音机。同一组单选框只能选一个。
- name——分组，同一组的属性值必须一致。
多选框
- type：checkbox。同一组内多选。
文本域
- 标签：textarea。输入多行文本。
- 两个属性值，规定显示多少行多少列文字。
- rows:属性值是数字，数字表示有多少行。
- cols：属性值是数字，表示每一行有多少个字节。
- 个人简介：<textarea name="" id="" cols="30" rows="10"></textarea>
下拉菜单
- 是一组标签，必须同时出现，有嵌套关系。
- select：选择。
- option：选项
- select>option
下拉菜单：无序列表
一般喜欢给单选框和多选框绑定文字：就是可以点击相关内容，也选择选框，提升用户体验。
方法：将文字内容写在一个label标签内部，让label标签的for属性和input标签的id属性值一致。

七、html杂项

注释
- ctrl+/
字符实体
- 特殊符号
- html提供了一套书写特殊符号的替代符号，就是字符实体
- &lt : < less than
- &gt : > greater than
- &nbsp : 无换行空格 no breaking space
- &copy : copyright 版权 ©
- ISO-8859-1
废弃标签
- font ——文字样式字号颜色
- b 加粗 bold
- u 下划线 underline
- i 斜体 italic
- <del></del>
- <strong></strong> 加强
- <em></em> emphasis 加强倾斜
- <br/> 换行 breaking
- <hr/> 横线 horazontal rule

只作为个人学习记录~学习视频为尚硅谷

Shavwv

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
HTML学习基础

一、互联网原理 HTML：制作网页互联网原理：上网即请求数据。网页是由一堆文件构成，上网时通过http协议，在本地服务器之间由真实的、物理的文件传输。数据：文字、图片、视频、音频等 1. 服务器（server）本身也是一台计算机。服务器:用于存放文件,功能比我们的普通的计算机要强大，主要用于存储网页文件和数据。数据上传和更改是在本地计算机上完成。 ...
复制链接

扫一扫