网站搭建赚钱吗,重庆房产信息网官网,建设网站的基本流程,怎么在微信做企业网站HTML标签#xff08;上#xff09;
目标#xff1a; -能够说出标签的书写注意规范 -能够写出HTML骨架标签 -能够写出超链接标签 -能够写出图片标签并说出alt和title的区别 -能够说出相对路径的三种形式
目录#xff1a;
HTML语法规范HTML基本结构标签开发工具HTML常用标…HTML标签上
目标 -能够说出标签的书写注意规范 -能够写出HTML骨架标签 -能够写出超链接标签 -能够写出图片标签并说出alt和title的区别 -能够说出相对路径的三种形式
目录
HTML语法规范HTML基本结构标签开发工具HTML常用标签HTML中的注释和特殊字符
1.HTML语法规范
1.1基本语法概述
HTML标签是由尖括号包围的关键词例如HTML标签通常是成对出现的例如和我们称为双标签。标签中的第一个是开始标签第二个是结束标签。有些特殊的标签必须是单个标签极少情况例如,我们称为单标签。
1.2标签关系
双标签关系可以分为两类包含关系和并列关系。
2.HTML基本结构标签
2.1第一个HTML网页
每个网页都会有一个基本的结构标签也称为骨架标签页面内容也是在这些基本标签上书写。 3.开发工具
3.1 vscode的使用
1.新建文件并存储为 .html 文件 2.输入 ! 按tab键生成页面骨架结构 3.利用插件在浏览器中预览页面 单击右键点击open in default browser
3.2 插件的安装
3.3 VScode工具生成骨架标签新增代码
文档类型声明标签 文档类型声明作用是告诉浏览器使用哪种HTML版本来显示网页 这句代码的意思是当前页面采取的是HTML5版本来显示网页
注 声明位于文档中最前面的位置处于标签之前。 不是一个HTML标签它就是文档类型声明标签
lang语言种类
用来定义当前文档显示的语言。
en定义语言为英语zh-CN定义语言为中文
简单来说。定义为en就是英文网页定义为zh-CH就是中文网页。 其实对于文档显示来说定义为en的文档也可以显示中文定义为zh-CH的文档也可以显示英文。
这个属性对浏览器和搜索引擎来说还是有作用的。 必须写采用UTF-8来保存文字如果不写就会乱码
4.HTML常用标签
4.1标签语义
学习标签是有技巧的重点是记住每个标签的语义。简单理解就是指标签的含义即这个标签是用来干嘛的。
根据标签的语义在合适的地方给一个最为合理的标签可以让页面结构更清晰。 4.2 标题标签 -
(重要)
为了使网页更具有语义化经常在页面中用到标题标签。HTML提供了6个等级的网页标题即 -
. h1 我是一级标题/h1单词head的缩写意为头部、标题。
标签语义作为标题使用并且根据重要性递减
特点 1.加了标题的文字会变的加粗字号也会依次变大。 2.一个标题独占一行。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbody标题标签h1标题标签/h1h1标题一共六级选/h1h2文字加粗一行显/h2h3由大到小依次减/h3h4从重到轻随之变/h4h5语法规范书写后/h5h6具体效果刷新见/h6
/body/html4.3 段落和换行标签重要
在网页中要把文字有条理的显示出来就需要将这些文字分段显示。在HTML标签中
标签用于定义段落它可以将整个网页分为若干个段落。
p 我是一个段落标签 /p标签语义可以把HTML文档分割为若干段落
特点 1.文本在一个段落中会根据浏览器窗口的大小自动换行 2.段落和段落之间保有空隙 在HTML中一个段落中的文字会从左到右依次排列直到浏览器窗口的右端然后才自动换行。如果希望某段文本强制换行显示就需要使用换行标签
br /单词break的缩写意为打断、换行。 特点 1.是个单标签 2.标签只是简单的开始新的一行跟段落不太一样段落之间会插入一些垂直的间距。
4.4文本格式化标签
在网页中有时需要为文字设置粗体、斜体或下划线等效果这时就需要用到HTML中的文本格式化标签使文字以特殊的方式显示。
标签语义突出重要性比普通文字更重要。 更推荐使用前面的标签语义更强。
重点记住加粗和倾斜。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title文本格式化标签/title
/headbody我是strong加粗/strong的文字我是b加粗/b的文字我是em倾斜/em的文字我是i倾斜/i的文字我是del删除线/del我是s删除线/s我是ins下划线/ins我是u下划线/u
/body/html4.5 和 标签
和 是没有语义的它们就是一个盒子用来装内容的。 div这是头部/div
span今日价格/spandiv 是division的缩写表示分割、分区。span意为跨度、跨距。
特点 1.
标签用来布局但是现在一行只能放一个 ,大盒子。 2. 标签用来布局一行上可以多个,小盒子。 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlediv和span标签/title
/headbodydiv我是一个div标签我一个人单独占一行/divdiv我是一个div标签我一个人单独占一行/divspan百度/spanspan新浪/spanspan搜狐/span
/body/htmldiv是大盒子span是小盒子没有语义都是用来布局的。、
4.6 图像标签和路径重点
1.图像标签
在HTML标签中标签用于定义HTML页面中的图像。
img src图像URL/
单标签img后加空格和/ src是标签的必须属性它用于指定图像文件的路径和文件名
将图片插入文件中 第一步必须先把图像文件和html文件放到一起这样就可以把图片插入网页文件中。
bodyimg srcimg.jpg /
/body!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyh4图像标签的使用/h4img srcimg.jpg /
/body/html图像标签的其他属性
alt title alt和title都是显示文字alt只有在图片不能正常显示时出现title是鼠标放到图片上就显示。
widthheight
bodyh4图像标签的使用/h4img srcimg.jpg /h4alt 替换文本 图像显示不出来的时候用文字替换/h4img srcimg1.jpg alt我是pink老师 /h4title 提示文本 鼠标放在图像上提示的文字/h4img srcimg.jpg alt我是pink老师 title我是pink老师思密达 /h4 width 给图像设置宽度/h4img srcimg.jpg alt我是pink老师 title我是pink老师思密达 width500 /h4 height 给图像设置高度/h4img srcimg.jpg alt我是pink老师 title我是pink老师思密达 height100 /
/bodyborder设置图像的边框粗细
h4 border 给图像设定边框/h4img srcimg.jpg alt我是pink老师 title我是pink老师思密达 height100 border15 /图像标签注意点
图像标签可以拥有多个属性必须写在标签名的后面。属性之间不分先后顺序标签名与属性、属性与属性之间均以空格分开。属性采取键值对的格式即key“value”的格式属性“属性值”。
2.路径前期铺垫知识
目录文件夹和根目录VSCode打开目录文件夹
1目录文件夹和根目录 实际工作中我们的文件不能随便乱放否则用起来很难快速的找到他们因此我们需要一个文件夹来管理他们。
新建一个网站 -桌面新建一个文件夹命名为web。这个文件夹就是目录文件夹
**目录文件夹**就是普通文件夹里面只不过存放了我们做页面所需要的相关素材比如html文件、图片等。
-在web文件夹里面新建一个index.html文件 -在web文件夹里面新建一个images文件夹用来存放图片
**根目录**打开目录文件夹的第一层就是根目录
2VSCode打开目录文件夹 文件—打开文件夹—选择目录文件夹 后期非常方便管理文件
路径
页面中的图片会非常多通常我们会新建一个文件夹来存放这些图像文件images这时再查找图像就需要采用“路径”的方式来指定图像文件的位置。 路径可以分为 1.相对路径 2.绝对路径
相对路径
**相对路径**以引用文件所在位置为参考基础而建立出的目录路径。 这里简单来说图片相对于HTML页面的位置
**同一级路径**直接使用即可。 下一级路径: 想要使用images文件里的图片
上一级路径
绝对路径
绝对路径是指目录下的绝对位置直接到达目标位置通常是从盘符开始的路径。 例如“D\web\img\logo.gif”或完整的网络地址“http://www.itcast.cn/images/logo.gif”(在网络中复制图片的地址
MAC显示文件路径的方法右键—显示简介即可看到文件路径
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyimg src/Users/zhanghanyue/Desktop/前端基础/img.jpg /
/body/html使用网络中存在的图片 复制网页中图片的地址直接使用
4.7 超链接标签重点
在HTML标签中标签用于定义超链接作用是从一个页面链接到另一个页面。
目录 –链接的语法格式 –链接的分类
链接的语法格式
a href跳转目标 target目标窗口的弹出方式文本或图像/a单词anchor的缩写意为锚
属性 **href**用于指定链接目标的url地址必须属性当为标签应用href属性时它就具有了超链接的功能。
**target**用于指定链接页面的打开方式其中_self为默认值 当前窗口打开页面_blank为在新窗口中打开页面。
链接的分类 目录 -1. 外部链接例如 a href “http://www.baidu.com”百度
-2. 内部链接网站内部页面之间的相互链接直接链接内部页面名称即可例如首页
-3. 空链接如果当时没有确定链接目标时首页。用#代表是一个空链接。当不确定要跳转到哪个页面时用#代替
4. 下载链接 -如果href里面的地址是一个文件或者压缩包会下载这个文件。
**5. 网页元素链接**在网页中的各种网页元素如文本、图像、表格、音频、视频等都可以添加超链接。
**6.锚点链接**点击链接可以快速定位到页面中的某个位置。 · 在链接文本的href属性中设置属性值为 #名字 的形式如第二集 · 找到目标位置标签里面添加一个id属性刚才的名字如
第二集介绍 链接标签使用步骤 -链接标签 -在标签间加名字腾讯 -a里有必须属性 href在href里加上地址 腾讯 -第二个属性可以指定新窗口的打开方式 腾讯
内部链接 不需要加http在同一目录下的内部链接直接写名字。 h42.内部链接网站内部页面之间的相互链接/h4a hrefgsjj.html target_blank公司简介/a空链接 h43.空链接#/h4a href#公司地址/a下载链接 -先把img.jpg压缩一下 -img.zip h44.下载链接地址链接的是文件 .exe 或者是 zip 等压缩包形式 /h4a hrefimg.jpg.zip下载文件/a网页元素链接 -把图片当文字用即可 h45.网页元素的链接/h4a hrefhttp://www.baidu.comimg srcimg.jpg/a-点击出现的图片即可跳转到对应的链接。
锚点链接 例在个人生活和主要作品处添加锚点链接点击跳转到对应位置
5.HTML中的注释和特殊字符
5.1 注释
如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字就需要使用注释标签。
HTML中的注释以 结束。
快捷键ctrl/
5.2特殊字符
在HTML页面中一些特殊的符号很难或者不方便直接使用此时我们就可以使用下面的字符来代替。 重点记住空格、大于、小于这三个
