HTML笔记

发布时间 2023-09-18 20:17:28作者: A温庭筠

一、HTML基础
1、网页
文件、以.html或者.htm为后缀名的文件。
2、网站
网页的集合。
3、HTML:超文本标记语言。
纯文本(字符、数字、字母等)
超文本:超越文本的限制、显示视频、音频、图片、动画等。
超链接跳转功能。
标记:打标记符号(字母、数字等组合),浏览器解析标记。
4、工具的使用
(1)插入HTML结构代码: 英文输入法下,shift+1
(2)重命名:F2
(3)放大编辑区:ctrl+加号,缩小编辑区:ctrl+减号
(4)保存: ctrl+s
(5)撤销:ctrl+z
(6)选中当前词:双击鼠标左键、选中当前行:三击鼠标左键
(7)在浏览器运行页面:alt+b
(8)切换光标到下一行:ctrl+回车
(9)复制:ctrl+c,粘贴:ctrl+v,剪切:ctr+x
(10)格式化代码:shift+alt+f
(11)注释:ctrl+/
5、HTML结构标签
(1)html标签:此文档是HTML的文档。
(2)head标签:网页头部标签,包含网页头部信息。
(3)title标签:指定网页的标题。
(4)body标签:网页主体内容部分。 标签的基本语法:
<标签名>内容</标签名>‐‐‐‐双标签
<标签名> ‐‐‐‐单标签
带属性的标签的语法:
<标签名 属性名1="属性值1" 属性名2="属性值2">内容</标签名>‐‐‐‐双标签
<标签名 属性名1="属性值1" 属性名2="属性值2"> ‐‐‐‐单标签
属性:标签的特性。
meta标签:charset指定网页是何种字符编码。utf-8(万国码)
6、文本标签
(1)标题标签:h1~h6
特点:字号加粗、大小不一、独占一行、上下均有一空白行
(2)段落标签:p
特点:字体正常、大小一致、独占一行(行满换行)、上下均有一空白行
(3)换行标签:br
特点:将后面的内容强制换到下一行显示
(4)水平线标签:hr
特点:独占一行
(5)斜体标签:em
特点:将文本倾斜
(6)删除标签:s或del
特点:将文本中间横线
(7)下划线:u
特点:将文本呈下滑线
(8)上标:sup
特点:可将文本上标
(9)下标:sub
特点:可将文本下标
7、非常重要:修饰元素外观的属性style语法:
<标签名 style="属性名1:属性值1;属性名2:属性值2;..." >内容</标签名>
几中常用的属性名称:
color:文本字体颜色
text-align:文本对齐方式
width:元素的宽度
background-color:背景色 示例
<h1 style="color:red;background‐color:blue;"></h1>
font-family:字体类型
text-decoration:文本修饰(下划线、中线line-throu)
border-radius:将图片转换成圆形
切换中英文:shift或者ctrl+空格


第二章 图文混排
1、图片标签img
语法:<img src="图片路径" alt="图片未加载成功后页面的提示文字">
title=“鼠标悬停在图片上后显示的文字” width=“图片宽度” height="图片高度"
align=“图片与周围文字的对齐方式,例如值:bottom(默认值,底部对齐)、top(顶部对齐)、middle(居中对齐)、left(靠左)、right(靠右)”
2、路径(非常重要)
(1)绝对路径:从磁盘的盘符一直到文件所在的目录,以该文件名及后缀名结尾
(2)相对路径:相对当前网页文件的位置
/代表进入下一级目录
./当前目录
../表示返回上一级
3、超链接标签:a
href:指定到跳转的目标文件路径,可以是网络地址、本地文件路径、下载文件、
target:指定目标文件在何处打开。_blank新窗口打开,_self自己当前页面打开
4、锚点链接:跳转到同一页面指定位置
应用锚点:href:#锚点名 点击超链接跳转到页面指定的锚点位置
创建锚点:id属性="锚点名",在目标位置使用id属性创建锚点
注意事项:id可以