如何做微信电子书下载网站,百度网址大全手机浏览器,自己建立一个网站,win2003搭建wordpress核心思想 —— 语义化 【面试题】如何理解 HTML 语义化 ?仅通过标签便能判断内容的类型#xff0c;特别是区分标题、段落、图片和表格
增加代码可读性#xff0c;让人更容易读懂对SEO更加友好#xff0c;让搜索引擎更容易读懂 html 文件的基本结构 html 文件的文件后缀为 … 核心思想 —— 语义化 【面试题】如何理解 HTML 语义化 ?仅通过标签便能判断内容的类型特别是区分标题、段落、图片和表格
增加代码可读性让人更容易读懂对SEO更加友好让搜索引擎更容易读懂 html 文件的基本结构 html 文件的文件后缀为 .html如 index.html
vscode 中输入英文 ! 可快捷输入
!-- HTML5的文档类型声明【必要】 --
!doctype html
!-- 整个页面语言为英文【必要】 --
html langen!-- 页面的头部【必要】 --head!-- 页面的元信息-- 文档的字符编码为 UTF-8 --meta charsetUTF-8 /!-- 页面的元信息-- 设备上显示页面的区域 viewport 的配置 -- width 为 device-width 即采用设备宽度intial-scale 为 1 即按原比例显示无缩放--meta nameviewport contentwidthdevice-width, initial-scale1.0 /!-- 页面的标题【必要】 --titleDocument/title!-- 页面中的样式 --stylehtml,body {height: 100%;}/style/head!-- 页面的身体【必要】 --body!-- 页面的内容 --div/div!-- 页面的脚本 —— JS 代码 --script/script/body
/html【面试题】为什么style/style 标签要写在head/head 中 ?浏览器解析 HTML 文档是自上而下的将 style/style 标签要写在head/head 中就能先加载样式再加载元素。
若将 style/style 标签写在body/body 下方则是先加载元素再加载样式导致用户会看到没有样式的页面结构。
【面试题】为什么script/script 标签要写在 body/body 内的底部 ?浏览器解析 HTML 文档是自上而下的 style/style 若未放在body/body 内的底部则会先加载并解析 JS 再渲染元素导致页面渲染的时间延长倘若 JS 中涉及 DOM 操作还会阻塞页面的渲染。 html 标签的分类 根据标签的默认的 display 样式值分为两类
【面试题】HTML有哪些内联元素和块状元素 ?内联元素
宽度由内容决定
display :inline 若非替换元素不能设置宽高
imgspan , a , b 等display :inline-block 可以设置宽高
input button 等块状元素
宽度由容器决定宽度会撑满整个容器可以设置宽高
display: block
divh1-h6pul, ol form , hr 等display: table
tabledisplay: list-item
liHTML 中的替换元素 通过修改某属性值大部分是 src 属性就能替换其呈现内容的元素被称为“替换元素”。
以下标签都是替换元素
img、video、iframe、canvas、textarea、input、select、object替换元素的特征
都是内联元素内容的外观不受其他标签 CSS 的影响如替换的内容中的文本等。替换的内容本身就有尺寸 img 默认的尺寸即其加载的图片的尺寸。video、iframe、canvas 等默认的尺寸不包括边框是300px * 150px。 替换元素的基线vertical-align 的默认值 baseline 即基线为元素的下边缘而不是字符 x 的下边缘若未加载替换内容如未设置 src 属性替换元素就会失去替换元素的特征变成一个普通的内联元素
替换元素的尺寸
替换元素的最终尺寸由以下三种方式共同决定它们的 优先级由高到低 依次是
通过 CSS 的 width、height、max-width/min-width、max-height/min-height 设置的尺寸替换元素上的 html 属性可以设定尺寸如 img 的 width 和 height 属性、input 的 size 属性、textarea 的 cols 和 rows 属性等替换的内容本身有尺寸 HTML5 新增的标签 【面试题】HTML5 新增了哪些标签 ? (回答几个常用的即可)结构性标签
header: 定义文档或节的头部。
nav: 定义导航链接。
section: 定义文档中的独立节。
article: 定义文档、页面、应用或网站中独立的内容区域。
aside: 定义页面的侧边栏内容。
footer: 定义文档或节的页脚。
main: 定义文档的主体内容。多媒体标签
video: 定义视频或电影。
audio: 定义音频内容。
source: 为video和audio元素定义媒体资源。
track: 为video和audio元素定义文本轨道。
embed: 定义嵌入的内容比如插件。
canvas: 用于在网页上绘制图形。表单标签
datalist: 定义选项列表与input元素配合使用以提供“自动完成”功能。
output: 定义不同类型的输出比如脚本的输出。其他标签
time: 定义日期或时间。
mark: 定义高亮显示的文本。
progress: 定义任何类型的任务的进度。
meter: 定义已知范围或分数值内的标量测量。
details: 定义用户可见的或者隐藏的额外的细节。
summary: 定义details元素的可见标题。
figure: 规定独立的流内容图像、图表、照片、代码等等。
figcaption: 定义figure元素的标题caption。HTML 常用标签实战要点 link 外链资源
限 head 标签内使用可定义文档与外部资源之间的关系如外链 css 样式外链页面标题前的小图标等。
!-- 外链--样式 --
link relstylesheet typetext/css hrefstyle.css /
!-- 外链--页面标题前的小图标 --
link relshortcut icon typeimage/x-icon hreffavicon.ico /a 超链接 超链接 a 标签的四大功能页面跳转、页内滚动【锚点】、页面刷新、文件下载 https://blog.csdn.net/weixin_41192489/article/details/140217094 给段落添加超链接 用 p 包裹 a而不是 a 包裹 p pa href段落/a/p普通文本专用标签
br 段落内换行
仅适用于 p 标签内部的换行段落间的换行或调整元素间的间距请使用样式 padding、margin 等样式。
p广东省br/广州市br/黄埔大道西601号/pspan 行内文本
用于包裹行内的部分文本来添加特殊的样式。
pspan stylecolor: red要点/span 不能长时间睡觉。/psup 上标
pmsup2/sup/psub 下标
pmsub2/sub/ppre 预定义文本
块状元素 display: block
可保留所有空白字符(空格、换行符)原封不动的输出结果常用于展示计算机的源代码。
pre
你好我昨天给你打了个电话。
/precode 代码
内联元素 display: inline
用于表示计算机源代码或者其他机器可以阅读的文本内容为保留代码的缩进格式通常和 pre 标签一起使用。
code 标签内的文本将用等宽、类似电传打字机样式的字体Courier显示出来。
precodelet a 1;/code
/pre列表相关标签
ul 无序列表
type 属性可修改序号类型 disc 实心原点【默认】square 实心方点circle 空心圆
ulli咖啡/lili茶/lili牛奶/li
/ulol 有序列表
type 属性 —— 序号类型如1( 阿拉伯数字【默认】) 、a、A、i、Istart 属性 —— 计数起点
olli咖啡/lili茶/lili牛奶/li
/olol typea li嘿嘿/lili嘿嘿/lili呵呵/li
/olol type1 start4 li哈哈/lili哈哈/lili哈哈/li
/ol列表嵌套
li 是一个容器级标签里面什么都能放包括 ul。
ullib北京市/bulli海淀区/lili朝阳区/lili东城区/li/ul/lilib广州市/bulli天河区/lili越秀区/li/ul/li
/ultable 表格
https://blog.csdn.net/weixin_41192489/article/details/140217983
i 图标
i 标签原用于表示斜体文字默认有字体倾斜的效果但现在斜体统一通过css实现。 因 i 为图标 icon 的首字母现习惯用 i 标签来展示图标所以需添加样式 font-style:normal 取消默认的倾斜。
i stylefont-style:normal#9742/iimg 图片
display :inline 内联元素
支持的图片格式jpg(jpeg)、gif、png、bmp其他格式不支持如psd、ai img src./ecLogo.jpg altEC编程俱乐部的logo /src【必要】图片的地址 alt【重要】当图片无法显示时代替图片显示的内容搜索引擎会抓取此属性。alt 源自单词 alternate “替代”代表替换资源。有的浏览器不支持 要想图片保持宽高比通常只设置 width 和 height 中的一个 【实战技巧】响应式图片 https://blog.csdn.net/weixin_41192489/article/details/126038175 【实战技巧】图片懒加载手写 https://blog.csdn.net/weixin_41192489/article/details/126263221
audio 音频
display :inline 内联元素
audio controlssource src./test.mp3 typeaudio/mp3 /您的浏览器不支持 audio 标签。
/audiosrc【必要】音频的地址controls 展示音乐播放器autoplay 自动播放loop 循环播放preload 预加载设置 autoplay 时此属性将失效
下方为使用 vue3 实现的简易音乐播放器相关属性和方法详见注释
script setup
let bgMusic_ref ref(null)function printInfo() {let musicInfo {//currentTime 当前播放进度单位秒scurrentTime: bgMusic_ref.value.currentTime,//duration 音频总时长单位秒sduration: bgMusic_ref.value.duration}console.log(musicInfo)
}function play() {// 播放音频bgMusic_ref.value.play()
}function pause() {// 暂停播放音频bgMusic_ref.value.pause()
}// 重新播放音频从头开始播放
function rePlay() {// 先将当前播放进度重置为 0bgMusic_ref.value.currentTime 0// 再播放音频bgMusic_ref.value.play()
}
/scripttemplateaudio refbgMusic_ref controls autoplaysource src./test.mp3 typeaudio/mp3 /您的浏览器不支持 audio 标签。/audiobutton clickplay播放/buttonbutton clickpause暂停/buttonbutton clickrePlay重新播放/buttonbutton clickprintInfo打印音频信息/button
/template【实用技巧】下载音乐到本地电脑 https://blog.csdn.net/weixin_41192489/article/details/122680809
video 视频
display :inline 内联元素
仅支持MP4、WebM、Ogg三种格式不支持其他格式如flv、mkv等 video controlssource src./test.mp4 typevideo/mp4 //videosrc【必要】视频的地址 controls 展示视频播放器 autoplay 自动播放 loop 循环播放 preload 预加载设置 autoplay 时此属性将失效 【实用技巧】下载视频到本地电脑-CSDN博客 https://blog.csdn.net/weixin_41192489/article/details/140223996
iframe 内嵌框架
display :inline 内联元素
在页面内嵌入网页
iframe srchttps://www.w3school.com.cn/index.html/iframesrc【必要】其他网页的地址
表单相关标签
button 按钮
display :inline-block 内联元素
button onclickalert(你好!)点击我/buttonHTML 渲染特殊字符 字符描述代码空格non-breaking spacingnbsp;小于号less thanlt;大于号greater thangt;©版权copy;和号amp;
更多特殊字符参考《html特殊字符的htmljscss写法汇总》 https://www.cnblogs.com/starof/p/4718550.html HTML 常用标签实战范例 页面布局 vue3【实战】语义化首页布局-CSDN博客 https://blog.csdn.net/weixin_41192489/article/details/140215515 CSS 【实战】 “四合院”布局-CSDN博客 https://blog.csdn.net/weixin_41192489/article/details/139243680
