第一个HTML网页
使用vscode,输入!自动生成完整结构,如下
在vscode右键open with live server,如下
其中是html5的文档声明,告诉浏览器当前网页版本
注意:HTML中不区分大小写!!!
HTML标签
HTML页面是以标签的形式呈现,标签也称为元素。上图中的html为一对根标签,所有的源码都是写在根标签的内部(doctype除外)。其中lang="zh"代表该页面为英文的,若想指定为中文,将“en”改为“zh”。
根标签内部又包含head和body两种子标签,head对应该页面的标题等内容,body对应网页的内容。
head通常包含title标签和meta标签两种,title的作用是页面的标签栏,其内容会作为搜索引擎的搜索结果的超链接上的文字显示;meta则用来指定网页的特殊数据等内容,将在下边进行介绍。
body包含的即为网页的内容,例如h1为一级标题,h2为二级标题,p表示段落等。可以增加font标签来指定某部分字体的格式,例如font color=“red” size=“3”。
普通标签一般为成对出现的,有头有尾,尾的起始是一个/,表示该标签的结束;而除此之外存在一种“自结束标签”,例如image和input等,不需要对应的结束标签。在开始标签和自结束标签中可以设置属性,与标签名以空格隔开,属性值用引号引起来。
在HTML中的注释采用尖括号、感叹号和中划线组成,注释可以换行,不可以嵌套。在VSCode中注释可以通过快捷键ctrl+/生成。
HTML实体
在HTML中存在编写的多个空格会默认被解析为一个空格,字母两侧的大于小于号被解析为标签等情况,如果需要在网页中输入这些特殊的符号,则需要使用HTML中的实体(转义字符)例如:
 :空格
>:大于号
<:小于号
©:版权符号
meta标签
meta标签:主要用于设置网页中的一些元数据,其包含的属性例如:
charset 指定网页的字符集,例如utf-8,避免乱码
name 指定的数据的名称,例如keywords,description等(keywords 表示网站的关键字,可以同时指定多个关键字,用逗号隔开;description 用于指定网站的描述)content 指定的数据的内容
http-equiv 将页面重定向到另一个网站,例http-equiv=“refresh”,content=“3;https:www.baidu.com”,其中3表示跳转时间,例子为跳转到百度页面
语义化标签
由于在网页中HTML专门负责网页的结构,所以对于HTML应该关注的是标签的语义而不是样式
标题标签:
h1-h6重要性递减,h1最重要,h6最不重要。一般只会使用h1-h3,h4-h6很少用。h1在网页中重要性仅次于title标签,一般情况下一个页面只会有一个h1。
在页面中独占一行的元素称为块元素(block element),不会独占一行叫做行内元素(inline element)
各种标题标签属于块元素;p标签中的内容表示一个段落,也是一个块元素;hgroup标签用来为标题分组,可以将一组相关的标题同时放在hgroup中;em标签表示语音语调的一个加重,属于行内元素;strong标签表示强调重要内容,也属于行内元素;blockquote标签表示内容是长引用,属于块元素;q标签表示短引用,属于行内元素;br标签表示换行。
在网页中一般通过块元素对页面进行布局,行业元素主要用来包裹文字,一般情况块元素中可以放行内元素,而行内元素中不放块元素,块元素内基本什么元素都可以放,但特殊的:p元素中不能放任何块元素。
浏览器在解析网页时,会自动对网页中不符合规范的内容进行修正,比如标签写在了根元素外部,p元素嵌套了块元素,根元素出现了除head和body以外的子元素等情况,会进行自动修正,不会影响用户查看网页,但建议尽量保证规范。
以下是h5新属性:
header标签表示网页的头部;main标签表示网页的主体部分(一个页面中只有一个main);footer标签表示网页的底部;nav标签表示网页中的导航;aside标签表示和主体相关的其他内容(侧边栏);article标签表示一个独立的文章;section标签表示一个独立的区块,上面的标签都不能表示时可以使用section。
用的不多,目前一般还是使用div标签较多,div没有语义,就用来表示一个区块,是目前主要的布局元素;另一个是span,语义上与div没有区别,但div是块元素,span是行内元素,例如随便打开一个网页的源代码
列表list
1.有序列表:
ul标签,li标签表示列表项
2.无序列表:
ol标签,li表示列表项
3.定义列表
dl标签,dt表示定义内容,dd表示对内容进行描述
列表之间是可以互相嵌套的
超链接
超链接可以让我们从一个页面跳转到其他页面,或者是当前页面的其他的位置,使用a标签来定义,是一个行内元素,在a标签中可以嵌套除自身外的任何元素。
属性href:1.可以是一个外部网站的地址;2.也可以写一个内部页面的地址(相对路径,一般以./或者…/开头,省略不写默认为./,./表示在当前文件所在的目录,…/表示当前文件所在目录的上一级)可以用#或者javascript:;来作为超链接的占位符;3.#表示回到顶部
属性target:
_self 默认值,在当前页面中打开超链接
_blank 在一个新的页面中打开超链接
属性id:
每一个标签都可以添加一个id属性,id属性是元素的唯一标识,同一个页面不能出现重复的id属性,可以借助id属性完成页面内容跳转
图片标签
img属于替换元素(基于块和行内元素之间,具有两种元素特点),是一个自结束标签,属性有:
src:外部图片路径,路径规则与超链接一样
alt:图片的描述,默认是图片无法加载的时候显示,搜索引擎会根据alt中的内容来识别图片
width:图片宽度 height:图片高度(单位是像素)宽度和高度只修改一个会将另一个等比例缩放,一般在pc端不建议修改图片大小,但在移动端经常需要进行缩放(主要是大图缩小)
多种图片格式:jpeg(jpg),gif,png,webp:效果一样用小的,效果不一样用效果好的;base64用于需要和网页同步加载的图片
内联框架
iframe标签,用于向当前界面引入一个其他页面,内联框架引的页面不会被搜索引擎检索
src指定要引入的网页的路径,frameborder指定内联框架的边框(0为无,1为有),跟图片一样可以设置宽和高
音视频播放
audio标签,用来向页面中引入外部音频文件,音视频文件引入时默认情况是不允许用户自己控制播放和停止,其属性有:
src指定要引入音频的路径 controls表示是否允许用户控制播放(不需要赋值)loop为循环播放(不需要赋值)
autoplay设置自动播放(不需要赋值),但是目前来讲大部分浏览器考虑了用户体验问题,不会自动对音乐进行播放
除了直接通过src指定路径,还可以通过source来指定文件,优势在于可以在浏览器不支持的时候出现提示文字,也可以放入多个版本的音频文件(默认执行第一个,不支持的时候执行下面的)
embed标签,用来在老版本的浏览器引入音频文件,缺点是会自动播放,利用type属性指定文件类型,可以指定宽度和高度
video标签,用来向页面引入视频文件,用法和audio基本一样,不兼容的也可以使用embed解决,只需要在type指定类型即可。还有一种简便的引入网络视频的方式,即打开网络视频,点击分享,复制通用代码粘贴到代码中即可
注:一般在开发中,不会把音视频直接放在服务器上,而是可以放在一个专用的服务器上只引入其地址,或者直接引入网上的音视频等。