网站建设的需求是什么意思,前端入门先学什么,怎样学做企业网站,滁州市住房城乡建设部网站(创作不易#xff0c;感谢有你#xff0c;你的支持#xff0c;就是我前行的最大动力#xff0c;如果看完对你有帮助#xff0c;请留下您的足迹#xff09; 目录
HTML初体验
HTML 定义
标签语法
总结#xff1a;
HTML 基本骨架
基础知识#xff1a;
总结#…(创作不易感谢有你你的支持就是我前行的最大动力如果看完对你有帮助请留下您的足迹 目录
HTML初体验
HTML 定义
标签语法
总结
HTML 基本骨架
基础知识
总结
标签的关系
父子关系嵌套关系
兄弟关系并列关系
代码格式
注释
标题标签
段落标签
换行与水平线标签
文本格式化标签
图像标签
基本使用
属性
路径
相对路径
绝对路径
超链接
多媒体标签
音频标签
视频标签 HTML初体验
HTML 定义 HTML 超文本标记语言——HyperText Markup Language。 • 超文本是什么 链接 • 标记是什么 标记也叫标签带尖括号的文本 标签形式如下其中hl /hl p等蓝色字体的就是标签
标签语法 1.标签成对出现中间包裹内容2.里面放英文字母标签名3.结束标签比开始标签多 / 我们以加粗文字的标签strong为例 加标签前 文字内容 在网页显示为 加标签后 strong文字内容/strong 在网页显示为 拓展 双标签成对出现的标签 单标签只有开始标签没有结束标签 单标签示例 br 换行 hr 水平线 以hr为例 strong文字内容/strong
hr 在网页显示为 总结 1. 保存 HTML 标签的文件扩展名是什么 .html 2. HTML 标签名要放到什么括号里面 尖括号 3. 结束标签比开始标签多什么 / 4. 标签包裹的内容放在什么位置 开始标签和结束标签之间 HTML 基本骨架
基础知识 html整个网页 head网页头部用来存放给浏览器看的信息例如CSSbody网页主体用来存放给用户看的信息例如图片、文字 title网页标题 VS Code 快速生成骨架在 HTML 文件.html中!英文配合 Enter / Tab 键 输入后点击回车即可自动生成如下骨架
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body/body
/html 我们可以试着在骨架中输入相关数据如下所示 在body之间输入学习前端第一天 在title之间输入网页标题 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title网页标题/title
/head
body学习前端第一天
/body
/html
在网页中显示为
此时网页标题变为
总结 1. VS Code 生成 HTML 骨架的符号是什么 ! 英文配合 Enter 或 Tab 2. HTML 骨架标签包含哪些 html 整个网页 head 网页头部 title 网页标题 body 网页主体 标签的关系 作用明确标签的书写位置让代码格式更整齐 父子关系嵌套关系 兄弟关系并列关系 代码格式 父子关系子级标签换行且缩进Tab键 兄弟关系兄弟标签换行要对齐 注释 在 VS Code 中添加 / 删除注释的快捷键Ctrl /
标题标签 一般用在新闻标题、文章标题、网页区域名称、产品名称等等 标签名h1 ~ h6双标签 显示特点• 文字加粗• 字号逐渐减小• 独占一行换行 • h1 标签在一个网页中只能用一次用来放新闻标题或网页的 logo • h2 ~ h6 没有使用次数的限制 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh1一级标题/h1h2二级标题/h2h3三级标题/h3h4四级标题/h4h5五级标题/h5h6六级标题/h6
/body
/html
网页显示为
段落标签 一般用在新闻段落、文章段落、产品描述信息等等。 标签名p双标签 显示特点• 独占一行• 段落之间存在间隙 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyp今天是学习前端第一天尽管我平时很忙我也会抽出时间来学习它/pp马上要期末考试啦好紧张肿么办/p
/body
/html 网页显示如下图所示p之间的内容独占一行且每段之间存在间隙
换行与水平线标签 换行br单标签 水平线hr单标签 浏览器不识别代码中的 Enter 键换行 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body小周不摆烂小周想摆烂br小周不能摆烂brbr小周偶尔摆烂hr
/body
/html
如下图所示如果不加br网页中的文本内容并不会自动换行每加一个br文本内容就自动换行一次 文本格式化标签
作用为文本添加特殊格式以突出重点。常见的文本格式加粗、 倾斜 、下划线、删除线等。 strong、em、ins、del 标签自带强调含义语义。
图像标签
基本使用 作用在网页中插入图片。 img src图片的 URL src 用于指定图像的位置和名称是 img 的必须属性。 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyimg src./图片1.jpgimg src./图片2.jpg
/body
/html 网页显示为
属性 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 路径错误网速慢等问题可能导致图片加载不出来这个时候就用alt替换文本 --img src./图片.jpg alt这是一只猫!-- 鼠标停留在照片上面时会显示title后的文字width和height可以改变图片大小 --img src./图片2.jpg title这也是一只猫 width100 height200
/body
/html
网页输出为 • 属性名属性值 • 属性写在尖括号里面标签名后面标签名和属性之间用空格隔开不区分先后顺序 路径
相对路径 相对路径从当前文件位置出发查找目标文件 / 表示进入某个文件夹里面. 表示当前文件所在文件夹 .. 表示当前文件的上一级文件夹 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 在当前文件夹中提取图片 --img src./图片2.jpg width300!-- 在当前文件夹的另一个文件夹中提取图片 --img src./图片/图片2.jpg width300!-- 在当前文件夹的上一级文件夹中提取图片 --img src../图片2.jpg width300
/body
/html 绝对路径 绝对路径 -从盘符出发查找目标文件 Windows 电脑从盘符出发 Mac 电脑从根目录/出发 img srcC:\images\mao.jpg !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 将图片保存在电脑网盘的某一处后直接复制图片的地址即可 --img srcC:\Users\周星辰\Pictures\大学专用图片\图片2.jpg width300!-- 无需保存图片在网上找到图片后直接复制图片的网址即可 --img srchttps://picb.zhimg.com/v2-550e60cd7c0380d0a7cb61bbe4eefe68_r.jpg?source1940ef5c width300
/body
/html 超链接 作用点击跳转到其他页面。 a hrefhttps://www.baidu.com跳转到百度/ahref 属性值是跳转地址是超链接的必须属性。超链接默认是在当前窗口跳转页面添加 target_blank 实现新窗口打开页面。拓展 开发初期不确定跳转地址则 href 属性值写为 #表示空链接页面不会跳转在当前页面刷新一次。 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodya hrefhttps://www.baidu.com/跳转到百度/aa href./图片1.jpg 跳转到本地照片/a!-- 用target打开新窗口显示 --a href./图片1.jpg target_blank跳转到本地照片/a
/body
/html
网页显示为 多媒体标签
音频标签
audio src音频的 URL/audio 拓展书写 HTML5 属性时如果属性名和属性值相同可以简写为一个单词。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 书写 HTML5 属性时如果属性名和属性值相同可以简写为一个单词 --audio srcC:\Users\周星辰\Music\笛子绿洲 - 美丽的神话【竹笛】.mp3 controls/audio
/body
/html 视频标签
video src视频的 URL/video !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 在浏览器中想要自动播放视频必须要有muted属性 --video srcE:\视频剪辑\4月21日 (2)(1).mp4 controls width400 muted autoplay/video
/body
/html
网页显示为
