HTML(上)
2022-03-22 18:46:47 举报
AI智能生成
登录查看完整内容
相似推荐
查看更多
自助上单面向商家
上单任务编辑
HTML5
App自助上单
上庄
HTML
html转换流程
自助上单
上单任务编写
html解析流程
HTML(上)
作者其他创作
大纲/内容
能够说出标签的书写注意规范
能够写出HTML骨架标签
能够写出超链接标签
能够写出图片标签并说出 alt 和 title 的区别
能够说出相对路径的三种形式
目标
HTML语法规范
HTML基本结构标签
开发工具
标签语义
无语义标签
图像标签和路径
超链接标签
HTML中的注释和特殊字符
目录
由尖括号包围的关键词
通常是成对出现,开始标签、结束标签,有些特殊的必须是单个标签
<html></html>
双标签
<br />
单标签
包含关系
并列关系
标签关系
HTML页面也叫HTML文档
每个网页都有一个基本的结构标签,也叫骨架标签
页面内容在基本标签上书写
HTML文档的后缀名必需为html或htm
第一个HTML网页
HTML标签,页面中最大的标签,我们称为根标签
文档的头部,注意:在head标签中必需设置title标签
<head></head>
文档的标题,让页面拥有一个属于自己的网页标题
<title></title>
文档的主体,元素包含文档的所有内容,页面内容基本都是放到body里
<body></body>
Visual Studio Code(VSCode)
新建文件command N
保存文件command S
放大编辑器界面command +
缩小编辑器界面Command -
预览结果Alt B
编辑器自动换行Alt Z
输入英文符号“ ! ”再按下Tab键,可以直接生成HTML骨架
快捷键
文档类型声明标签,告诉浏览器用哪种HTML版本来显示网页
位于文档最前面,处于<html>标签之前
<!DOCTYPE html>
<!DOCTYPE>标签
让浏览器识别,呈现出对应语言的网页
英文<html lang=\"en\">
中文<html lang=\"zh-CN\">
lang语言
字符集(CHaracter set)是多个字符的集合。以便计算机能够识别和存储各种文字,防止出现乱码的情况
在<htad>标签内,通过<meta>标签的charset属性来规定HTML文档用哪种字符编码
charset常用的值有GB2312、BIG5、GBK和UTF-8,UTF-8被称为万国码
<meta charset=\"UTF-8\">
charset字符集
标签的含义,这个标签是用来干嘛的
在合适的地方给最合理的标签,让页面结构更清晰
单词head的缩写,意为头部、标题
作为标题试用,并且依据重要性递减
加了标题的文字会加醋,字号也会变大
一个标题独占一行
标题标签<h1></h1><h1> 到 <h6>
单词paragraph的缩写,意为段落
在网页中为了文字有条理展示,需要将文字分段展示
用于定义段落,可以把HTML文档分割为若干段落
文本在一个段落中会根据浏览器窗口的大小自动换行
段落和段落之间保有空隙
特点
段落标签<p></p>
单词break的缩写,意为打断、换行
在HTML中,一个段落中的文字会从左到右依次排列,直到窗口右端才自动换行
希望某段文本强制换行显示
只是简单地开始新的一行,和段落不一样,段落之间会插入垂直的间距
换行标签<br />
HTML常用标签
有时需要给文字设置粗体、斜体和下划线等效果,使文字以特殊的方式展示
标签语义:突出重要性,比普通文字更重要
加粗<strong></strong>或<b></b>
倾斜<em></em>或<i></i>
删除线<del></del>或<s></s>
下划线<ins></ins>或<u></u>
文本格式化标签
没有语义,它们是一个盒子,用来装内容的
division的缩写,表示分割、分区
用来布局,一行只放一个,大盒子
<div></div>
跨度、跨距
用来布局,一行可以多个,小盒子
<span></span>
用于定义HTML页面中的图像
单词 image 的缩写,意为图像
<img src=\"图像URL\" />
必须属性,用于指定图像文件的路径和文件名
图片路径src
图像不能显示时的文字
替换文本alt
鼠标放到图像上,显示的文字
提示文本title
设置图像的宽度
宽度像素width
设置图像的高度
高度像素height
设置图像的边框粗细
边框像素border
图像可以拥有多个属性,必须写在标签名的后面
属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开
属性采取键值对的格式,即key=\"value\"的格式,属性 = “属性值”
注意点
属性:属于这个图像的特性
图像标签<img />
文件不能乱放,否则很难找到,所以需要文件夹来管理
就是普通文件夹,里面存放了做页面所需要的素材,比如:html文件、图片等
目录文件夹
打开目录文件夹的第一层就是根目录
根目录
文件——打开文件夹,选择目录文件夹
直接拖拉进入VSCode
VSCode打开目录文件夹
页面中图片非常多,通过新建文件夹来存放图像文件(images),查找图像则采用“路径”来制定图像文件位置
以引用文件所在位置为参考基础,而建立出的目录路径
相对路径是从代码所在的文件触发,去寻找目标文件,而上一级、下一级和同一级,就是图片相对于HTML页面的位置
图像文件位于HTML文件同一级
<img src=\"baidu.jpg\" />
同一级路径
图像位于HTML文件下一级
<img src=\"images/baidu.jpg\" />
下一级路径/
图像位于HTML文件上一级
<img src=\"../baidu.jpg\" />
上一级路径../
相对路径
目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径
反斜杠
\"D:\\web\\img\\logo.jpg\"
完整的网络地址\"http://www.baidu.com/logo.jpg\"
绝对路径
路径分为
路径
单词anchor的缩写,意为:锚
<a></a>
<a href=\"跳转目标\" target=\"目标窗口的弹出方式\">文本或图像</a>
用于指定链接目标的url地址,必须属性
href
默认值_self
新窗口中打开_blank
用于指定链接页面的打开方式
target
两个属性
<a herf=\"http://www.baidu.com\"></a>
外部链接
网站内部页面之间的相互链接,直接链接内部页面名称即可
<a href=\"index.html\">首页</a>
内部链接
没有确定链接目标时,用 # 暂定
<a href=\"#\">首页</a>
空链接
href里地址是一个文件或压缩包,会下载这个文件
<a href=\"img.zip\"
下载链接
网页中的各种网页元素都可以添加超链接,如文本、图像、表格、音频、视频等
网页元素链接
可以快速定位到页面中的某个位置
在链接文本的href属性中,设置属性值为#名字的形式,如<a href=\"#two\">第2集</a>
找到目标位置标签,里面添加一个id属性=刚才的名字,如<h3 id=\"two\">第2集介绍</h3>
锚点链接
便于阅读和理解,以\"<!--\"开头,以\"-->\"结束
给开发人员查看,程序不执行注释内容
<!-- 注释语句 -->
快捷键:command /
注释
空格符
<
<小于号
>
>大于号
&
&和号
¥
¥人民币
©
©️版权
®
®️注册商标
°
°摄氏度
±
±正负号
×
×乘号
÷
÷除号
²
²平方2(上标2)
³
³平方3(上标3)
特殊字符
HTML(上)
0 条评论
回复 删除
下一页