财经大学网站建设,嘉兴网络建站模板,去掉由WordPress提供,青海建设工程信息网站参考书籍#xff1a; 《HTML与CSS3基础教程》 参考视频#xff1a; HTML5完整教学通俗易懂 2023新版前端Web开发HTML5CSS3移动web视频教程#xff0c;前端web入门首选黑马程序员 参考网站#xff1a; w3school 文章目录 零.开发环境准备1.需要的工具2.Vscode所需要插件3.其… 参考书籍 《HTML与CSS3基础教程》 参考视频 HTML5完整教学通俗易懂 2023新版前端Web开发HTML5CSS3移动web视频教程前端web入门首选黑马程序员 参考网站 w3school 文章目录 零.开发环境准备1.需要的工具2.Vscode所需要插件3.其他辅助软件 一.HTML基本语法1.HTML基本骨架2.注释3.HTML语法规范4.标签规范 二.HTML网页基本标签1.标题标签2.段落标签3.换行标签4.水平线标签5.文本格式化标签5.1粗体标签5.2斜体标签5.3下划线标签5.4删除线标签 6.图像标签7.链接标签8.表格标签9.列表标签9.1无序列表9.2有序列表9.3自定义列表 10.分组标签 三.HTML的特殊符号1.空格2.大于小于符号( , )3.版权符号 零.开发环境准备
1.需要的工具
Vscode编译器软件编写HTML代码辅助代码补充
浏览器谷歌Microsoft Edge等展示HTML页面
2.Vscode所需要插件
汉化菜单插件Chinese打开网页插件open in browser自动刷新页面: live serve
3.其他辅助软件
PxCook前端设计辅助软件放入UI美工设计的Psd文件即可获得页面所需要的相关数据例如间距px颜色的RGB代码等
一.HTML基本语法
1.HTML基本骨架 html : 整个网页 head :网页头部用来存放给浏览器看的信息例如CSS meta:描述性标签描述网站的一些信息title网页标题 body : 网页主体用来存放给用户看的信息例如图片文字 生成HTML基本骨架的快捷键回车
!-- DOCTYPE:告诉浏览器要使用的规范 --
!DOCTYPE html
html langen!-- head代表网页头部 --
head!-- meta描述性标签描述网站的一些信息 --meta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0!-- title网页标题 --title网页标题/title
/head!-- body代表网页主体 --
body存放给用户看的内容
/body
/html2.注释
注释添加快捷键Ctrl/
!--内容--3.HTML语法规范
HTML中不区分大小写但是我们一般都使用小写HTML中的注释不能嵌套HTML标签必须结构完整要么成对出现要么自结束标签HTML标签可以嵌套但是不能交叉嵌套HTML标签中的属性必须有值且值必须加引号(双引号单引号都可以)
4.标签规范
单标签
标签名 [属性名属性值,...]双标签
标签名 [属性名属性值,...]/标签名二.HTML网页基本标签
1.标题标签
标题标签有h1~h6(双标签)显示特点文字加粗字号逐渐减小独占一行换行h1标签一般一个网页只用一次
h1一级标题/h1
h2二级标题/h2
h3三级标题/h3
h4四级标题/h4
h5五级标题/h5
h6六级标题/h62.段落标签
段落标签p(双标签)段落标签的特点独占一行段落间存在间隙
示例
!-- p段落/p --p两只老虎两只老虎~/p p跑得快跑得快/p p一只没有眼睛一只没有尾巴~/p p真奇怪真奇怪~/p3.换行标签
换行标签br单标签)特点相对于段落标签p来说它的间隙更小
示例
!-- br --
两只老虎两只老虎~br跑得快跑得快br一只没有眼睛一只没有尾巴br真奇怪真奇怪~4.水平线标签
水平线标签hr单标签)
hr5.文本格式化标签
用来添加文本样式使文字展示不同的样式效果
5.1粗体标签
粗体标签strong(双标签)或b(双标签)作用添加加粗的字体样式
strong加粗字体测试/strong
b加粗字体测试/b5.2斜体标签
斜体标签em(双标签)或i双标签)作用添加斜体的字体样式
em斜体字体测试/em
i斜体字体测试i5.3下划线标签
下划线标签ins(双标签)或u双标签)作用添加下划线的字体样式
ins下划线字体测试/ins
u下划线字体测试u5.4删除线标签
删除线标签del(双标签)或s双标签)作用添加删除线的字体样式
del下划线字体测试/del
s下划线字体测试s6.图像标签
图像标签img单标签)作用在网页中插入图片默认是等比例缩放src用于指定图像的位置和名称是图像标签的必须属性
常用属性
属性值描述srcURL图像的目标链接alttext图像无法显示时的替代文字titletext鼠标悬停提示文字widthx图像宽度heighty图像高度
img srcpath !--省略其他属性--
img srcpath alttext titletext widthx heighty7.链接标签
超链接a(双标签)作用点击打开另一个网页
a hrefhttps://www.baidu.com百度/a !--打开另一个链接--
a hrefhttps://www.baidu.com target_blank百度/a !--在另一个页面打开链接--
a hrefhttps://www.baidu.com target_self百度/a !--在当前页面打开链接--!--点击图像打开链接--
a hrefhttps://www.baidu.comimg src../resorces/image/baidu.jpg alt百度
/a
常用属性
属性值描述hrefURL规定目标的URLtarget_blank,_parent,_self,_top,framename规定在何处打开目标 URL.
8.表格标签
!--建立表格--
table border1px cellpadding0px cellspacing0pxtr !--建立行--th表头一/thth表头二/thth表头三/thth表头四/th/trtrtd单元格一/tdtd单元格二/tdtd单元格三/tdtd单元格四/td/tr
/table9.列表标签
9.1无序列表
9.2有序列表
9.3自定义列表
10.分组标签 三.HTML的特殊符号
1.空格
在HTML代码中输入空格在页面中只会显示一个因此使用特殊符号可以显示多个空格
空格符号一个符号代表一个空格多次使用可以展示多个空格
nbsp; 2.大于小于符号( , )
大于符号()一个符号代表一个大于符号多次使用可以展示多个大于符号
gt; 小于符号()一个符号代表一个小于符号多次使用可以展示多个小于符号
lt; 3.版权符号
版权符号(©)一个符号代表一个版权符号多次使用可以展示多个版权符号
copy;
