做loge的网站,兰州app外包,企业网站模板网页模板,网上做网站过程第一个网页 文章目录第一个网页注释元素(标签,标记)元素的嵌套标准的文档结构语义化什么是语义化为什么需要语义化?文本元素hpspanpreHTML 实体a元素href 属性target属性路径的写法站内内资源和站外资源绝对路径和相对路径Emmet
注释 注释不参与运行 书写方式(html) !-…第一个网页 文章目录第一个网页注释元素(标签,标记)元素的嵌套标准的文档结构语义化什么是语义化为什么需要语义化?文本元素hpspanpreHTML 实体a元素href 属性target属性路径的写法站内内资源和站外资源绝对路径和相对路径Emmet
注释 注释不参与运行 书写方式(html) !-- comment --元素(标签,标记)
a hrefhttp://www.duyiedu.com杜伊教育/a整体: element element 起始标记(begin tag) 结束标记(end tag) 元素内容 元素属性 属性的分类 局部属性: 某些元素特有属性全局属性: 所有元素都有的属性 空元素 meta charsetUTF-8元素的嵌套
父元素,子元素, 后代元素,祖先元素, 兄弟元素
标准的文档结构 HTML: 页面, html文档 文档声明: 告诉浏览器当前文档使用的HTML标准为HTML5 !DOCTYPE html根元素: 一个页面最多只有一个,这个元素是其他元素的父元素或者祖先元素 html langen
.........en -- English, zh-CN(cmn-hans) -- 汉语
/htmllang属性: language, 全局属性, 表示该元素内部使用的文字是使用哪一种自然语言书写而成 文档头: 其内部内容不会显示在页面上 head
.........
/head 文档的元数据: 附加信息 metameta charsetUTF-8 !-- charset: 指定网页内容编码 --meta http-equivX-UA-Compatible contentIEedge内核用edgemeta nameviewport contentwidthdevice-width, initial-scale1.0适配手机端网页标题 titleDocument/title文档体: body!-- 超链接 --a hrefhttp://www.duyiedu.com titlebsdcsjb杜伊教育/ah1 titlethis is my first page.第一个网页/h1img srchttps://img2.baidu.com/it/u3992703645,2278223385fm26fmtautogp0.jpg
/body语义化
什么是语义化
每一个html元素都有具体的含义
a元素: 超链接p元素: 段落h1元素: 一级标题
所有元素与展示效果无关
元素展示到页面中的效果完全由CSS决定浏览器带有默认的CSS样式, 所以每个元素有一些默认样式选择什么元素取决于内容的含义, 而不是显示出来的效果 为什么需要语义化?
为了搜索引擎优化(SEO)
搜索引擎: 百度, Bing, Google工作原理: 每隔一段时间抓取页面的源代码,
为了让浏览器理解网页
安装插件:阅读模式, 语音模式 文本元素
h
h1 .... h6: 表示一级到六级标题
p 段落 乱数假文: 没有任何实际含义的文字
span 无语义, 仅用于样式的设计 某些元素(块级元素)显示时会独占一行, 某些元素(行级元素)不会
pre pre:预格式化文本元素, (无语义) 空白折叠: 在源代码中的空白字符包含: 空格, 换行, 制表, 在页面显示时会被折叠为一个空格 在pre元素中的内容不会出现空白折叠 在pre元素中的内容会按照源代码展示, 通常用于显示一些代码在网页上 pre元素功能本质: 有一个默认的CSS属性 code元素: 表示代码区域, 一般套在 pre元素外面 HTML 实体
实体字符, HTML Entity实体字符通常用于在页面中显示一些特殊符号 单词#数字 小于: lt; 大于: gt; 空格: nbsp;版权符号:copy; ©分数: frac34; ¾符号: amp; a元素
超链接
href 属性 hyper reference : 通常用于表示跳转地址 普通链接: 跳转地址 a hrefhttp://www.baidu.com百度/a锚链接: 跳转到某个锚点 a href#chapter1章节1/a
h2 idchapter1章节1/h2pLorem ipsum dolor sit amet conspid属性: 全局属性, 表示元素在文档中的唯一编号 功能链接 点击后触发某种功能 执行js代码 a hrefjavascript:alert(hello)探出:你好/a发送邮件(要求有邮件发送软件e.g.:exchange) a hrefmailto:1965503815qq.com点击给我发送邮件/a拨号(要求计算机上安装有拨号软件, 或者是移动端访问) a hreftel:183075884点击给我打电话/atarget属性
表示跳转窗口位置target属性取值: _self: default, 在当前页面打开_blank: 在新窗口中打开 路径的写法
站内内资源和站外资源
站内资源: 当前网站资源站外资源: 别人网站的资源
绝对路径和相对路径 站外资源: 绝对路径, 直接复制粘贴 站内资源: 相对路径 绝对路径书写格式: url地址: 协议名://主机名:端口号/路径
schema://host:port/path协议名: http, https, file
主机名: 域名, IP地址
端口号: http, 默认端口号为80https, 默认端口号443e.g.: https://www.bilibili.com/video/BV1yx411d7Rc
http://www.renren.com:80/
https://www.baidu.com:443/
http://127.0.0.1:5500/HTMLcore/4.%20a%E5%85%83%E7%B4%A0/target%E5%B1%9E%E6%80%A7.html当跳转目标和当前页面的协议相同时, 可以省略 相对路径书写格式: 以./开头, 表示当前资源所在目录 以../开头, 表示返回上一级目录 相对路径中, ./可以省略 a href./subhtmls/xx.htmltst/aa href./../1. 第一个网页/index.html我的第一个网页/a
