深圳哪家做网站,网站建设行业淘宝装修模板,asp网站首页模板,怎么去优化关键词1、标签语法
HTML超文本标记语言——HyperText Markup Language
超文本是链接标记也叫标签#xff0c;带尖括号的文本 2、HTML基本骨架
HTML基本骨架是网页模板 html#xff1a;整个网页head#xff1a;网页头部#xff0c;存放给浏览器看的代码#xff0c;例如CSSbody…1、标签语法
HTML超文本标记语言——HyperText Markup Language
超文本是链接标记也叫标签带尖括号的文本 2、HTML基本骨架
HTML基本骨架是网页模板 html整个网页head网页头部存放给浏览器看的代码例如CSSbody网页主体存放给用户看的代码例如 图片、文字title网页标题
VS Code快速生成骨架在HTML文件.html中!英文配合Enter/Tab键 3、标签的关系
作用明确代码的书写位置
父子关系嵌套关系兄弟关系并列
向后缩进Tab
向前缩进ShiftTab
4、注释
注释就是对代码的解释和说明其目的是能够更加轻松地了解代码。注释是编写程序时写程序的人给一个语句、程序段、函数等的解释或提示能提高程序代码的可读性。
!-...-注释标签用来在源文档中插入注释注释不会在浏览器中显示
在VS Code中添加/删除注释的快捷键Ctrl / 5、标题标签
一般用在新闻标题、文章标题、网页区域名称、产品名称等等。
标签名h1~h6双标签 显示特点
文字加粗字号逐渐减小独占一行换行
经验分析
h1标签在一个网页中只能用一次用来放新闻标题或网页的logoh2~h6没有使用次数的限制
6、段落标签
一般用在新闻段落、文章段落、产品描述信息等等。
标签名p双标签 如上图有三个段落
显示特点
独占一行段落之间存在间隙
7、换行与水平线标签
换行br 单标签 水平线hr 单标签 8、文本格式化标签
作用为文本添加特殊格式以突出重点。常见的文本格式加粗、倾斜、下划线、删除线等。 都是双标签 9、图形标签
作用在网页中插入图片 src用于指定图像的位置和名称是img的必须属性。建议以./开头VS Code有提示功能 9.1 图像标签-属性
属性作用说明alt替换文本图片无法显示的时候显示的文字title提示文本鼠标悬停在图片上面的时候显示的文字width图片的宽度值为数字没有单位height图片的高度值为数字没有单位 属性名“属性值”属性写在尖括号里面标签名后面标签名和属性之间用空格隔开不区分先后顺序
10、路径
路径是指查找文件时从起点到终点经历的路线。
相对路径从当前文件位置出发查找目标文件绝对路径从盘符出发查找目标文件 windows电脑从盘符出发Mac电脑从根目录出发
10.1 相对路径 10.2 绝对路径
Windows电脑从盘符出发Mac电脑从根目录/出发 Windows默认是 \其他系统是 /建议统一写为 /文件的在线网址https://www.itheima.com/images/logo.png绝对路径的应用场景友情链接 11、超链接
作用点击跳转到其他页面 href属性值是跳转地址是超链接的必须属性。
不确定跳转地址可以使用 # 空链接
target_blank属性作用在新窗口打开页面。 12、音频标签 常见属性
属性作用特殊说明src必须属性音频URL支持格式MP3、Ogg、Wavcontrols显示音频控制面板loop循环播放autoplay自动播放为了提升用户体验浏览器一般会禁用自动播放功能 13、视频标签 属性作用特殊说明src必须属性视频URL支持格式MP4、WebM、Oggcontrols显示视频控制面板loop循环播放muted静音播放autoplay自动播放为了提升用户体验浏览器支持在静音状态自动播放 综合案例一
网页制作思路从上到下先整体再局部逐步分析制作
分析内容 --- 写代码 --- 保存 ---刷新浏览器看效果
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh1今日话题/h1hrpIT之家 11 月 29 日消息在今日晚间的 Redmi 十周年暨 K70 系列手机新品发布会上Redmi K70 系列新机正式发布本文主要介绍标准版机型该机定位“新一代旗舰性能新标杆”售价 2499 元起a href./综合案例二.htmlvue/aa hrefhttps://item.jd.com/100078020142.html?cutrueutm_sourcewww.ithome.comutm_mediumjingfenutm_campaignt_236375426_RV_kuIDkuZYutm_term7fabefaf6b9746d4ba0aeb4a43e67255查看详情/a /pimg srchttps://img.ithome.com/newsuploadfiles/2023/11/65fc0457-6d41-4b83-b863-041587971b95.jpg?x-bce-processimage/format,f_auto alt这是Redmi K70系列手机图片 titleRedmi K70 height300h2性能方面/h2pRedmi K70 strong搭载第二代骁龙 8/strong综合跑分超 171 万辅以LPDDR5X 内存UFS 4.0 闪存支持狂暴引擎 3.0、5000mm² 环形冷泵 VC 液冷散热。ins我很喜欢你喜欢不/ins/ppRedmi K70 拥有 Pro 版同款屏幕、影像、充电配置具体来说该机采用 6.67 英寸 3200×1400 华星光电 C8 OLED 柔性直屏手动最高亮度 700nit、全屏激发 1200nit、局部峰值亮度 4000nit支持 120Hz 刷新率480Hz 触控采样率瞬时 2160Hz3840Hz 高频 PWM 调光12bit 色深JNCD ≈ 0.35/ph2影像方面/h2p该机前置 16MP豪威 OV16A1Q后置 50MP 主摄光影猎人 8001/1.55OIS8MP 超广角豪威 OV08D102MP 微距思特威 SC202PCS三摄续航方面Redmi K70 搭载 5000mAh 电池支持120W 快充搭载自研快充芯片澎湃 P2 自研电源管理芯片澎湃 G1。/ph2其它方面/h2p该机支持 NFC、红外遥控、屏幕光学指纹、0809 X 轴线性马达搭载 10121216 立体声双扬声器通过双 Hi-Res 认证搭载小米澎湃 OS 系统。/p
/body
/html
综合案例二
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh1今日话题/h1hrpIT之家 11 月 29 日消息在今日晚间的 Redmi 十周年暨 K70 系列手机新品发布会上Redmi K70 系列新机正式发布本文主要介绍标准版机型该机定位“新一代旗舰性能新标杆”售价 2499 元起a href./综合案例二.htmlvue/aa hrefhttps://item.jd.com/100078020142.html?cutrueutm_sourcewww.ithome.comutm_mediumjingfenutm_campaignt_236375426_RV_kuIDkuZYutm_term7fabefaf6b9746d4ba0aeb4a43e67255查看详情/a /pimg srchttps://img.ithome.com/newsuploadfiles/2023/11/65fc0457-6d41-4b83-b863-041587971b95.jpg?x-bce-processimage/format,f_auto alt这是Redmi K70系列手机图片 titleRedmi K70 height300h2性能方面/h2pRedmi K70 strong搭载第二代骁龙 8/strong综合跑分超 171 万辅以LPDDR5X 内存UFS 4.0 闪存支持狂暴引擎 3.0、5000mm² 环形冷泵 VC 液冷散热。ins我很喜欢你喜欢不/ins/ppRedmi K70 拥有 Pro 版同款屏幕、影像、充电配置具体来说该机采用 6.67 英寸 3200×1400 华星光电 C8 OLED 柔性直屏手动最高亮度 700nit、全屏激发 1200nit、局部峰值亮度 4000nit支持 120Hz 刷新率480Hz 触控采样率瞬时 2160Hz3840Hz 高频 PWM 调光12bit 色深JNCD ≈ 0.35/ph2影像方面/h2p该机前置 16MP豪威 OV16A1Q后置 50MP 主摄光影猎人 8001/1.55OIS8MP 超广角豪威 OV08D102MP 微距思特威 SC202PCS三摄续航方面Redmi K70 搭载 5000mAh 电池支持120W 快充搭载自研快充芯片澎湃 P2 自研电源管理芯片澎湃 G1。/ph2其它方面/h2p该机支持 NFC、红外遥控、屏幕光学指纹、0809 X 轴线性马达搭载 10121216 立体声双扬声器通过双 Hi-Res 认证搭载小米澎湃 OS 系统。/p
/body
/html
