微信公众号个人可以做网站么,做策划 都上什么网站,做网站需要有公司吗,商业摄影网站源码HTML5的新特性
HTML5新增的语义化标签
HTML5 的新增特性主要是针对于以前的不足#xff0c;增加了一些新的标签、新的表单和新的表单属性等。
这些新特性都有兼容性问题#xff0c;基本是 IE9 以上版本的浏览器才支持#xff0c;如果不考虑兼容性问题#xff0c;可以大量…HTML5的新特性
HTML5新增的语义化标签
HTML5 的新增特性主要是针对于以前的不足增加了一些新的标签、新的表单和新的表单属性等。
这些新特性都有兼容性问题基本是 IE9 以上版本的浏览器才支持如果不考虑兼容性问题可以大量使用这 些新特性。 好图当赏
一千布局我们是用div来做的但是div对搜索引擎来说是没有语义的
div class“header” /div
div class“nav” /div
div class“content” /div
div class“footer” /div
HTML5新增了语义化标签 tips 这种语义化标准主要是针对搜索引擎的 这些新标签页面中可以使用多次 在IE9中需要把这些元素转换为块级元素 HTML5新增的多媒体标签 新增的多媒体标签主要包含 音频audio 视频video 使用他们可以更方便的在页面中嵌入音频和视频而不再使用flash和其他浏览器插件
HTML5 在不使用插件的情况下也可以原生的支持视频格式文件的播放支持的格式是有限的
当前video元素支持三种视频格式尽量使用MP4格式 video src文件地址 controlscontrols/video 有些低版本浏览器可能不支持这个格式
video有一些常见的属性 关于音频当前的 audio元素支持三种音频格式 audio src文件地址 controlscontrols/audio audio controlscontrols source srchappy.mp3 typeaudio/mpeg source srchappy.ogg typeaudio/ogg
/ audio
音频的常见属性 谷歌浏览器吧音频和视频的自动播放给禁止了
多媒体标签总结 HTML5新增的input类型 语义化会更明显
我们需要重点记住number tel search这三个
有了这个提交表单如果格式不一样会报错
HTML5新增的表单属性 我们可以通过以下的方式修改placeholder里面的字体颜色
input::placeholder { color: pink; }
CSS3的新特性
CSS3现状 新增的CSS3特性有兼容性问题ie9才支持 移动端支持优于PC端 不断的改进中 应用相对广泛 CSS新增选择器
CSS新增的选择器可以更加便捷更加自由的选择目标元素
属性选择器
属性选择器可以根据元素特定的属性来选择元素这样就可以不用借助类或者id选择器 看到了吗孩子这就是属性选择器
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleinput[value]{color: pink;}/style
/head
bodyinput typetext value请输入input typetext
/body
/html 类选择器属性选择器伪类选择器的权重为10
结构伪类选择器
结构伪类选择器主要根据文档结构来选择器元素经常用于根据父级选择器里面的子元素 这个nth-child可以选择某个父元素的一个或者多个特定的子元素 n可以是数字关键字和公式 n如果是数字就是选择第n个子元素里面的数字从1开始 n 可以是关键字even 偶数odd 奇数 n 可以是公式常见的公式如下 ( 如果n是公式则从0开始计算但是第 0 个元素或者超出了元素的个数会被忽略 ) 这俩的区别 1. nth-child 对父元素里面所有孩子排序选择序号是固定的 先找到第n个孩子然后看看是否和E匹配 2. nth-of-type 对父元素里面指定子元素进行排序选择 先去匹配E 然后再根据E找第n个孩子 小结 伪元素选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素而不需要HTML标签从而简化HTML结构 tips 1.before 和 after 创建一个元素但是属于行内元素 2.新创建的这个元素在文档树中是找不到的所以我们称为伪元素 3.语法 element::before {} 4.before 和 after 必须有 content 属性 5.before 在父元素内容的前面创建元素after 在父元素内容的后面插入元素 6.伪元素选择器和标签选择器一样权重为 1 伪元素选择器有使用的场景伪元素字体图标 p::before { position: absolute; right: 20px; top: 10px; content: \e91e; font-size: 20px; } 这就是伪元素选择器
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylep{position: relative;width: 300px;height: 100px;background-color: pink;}p::before {position: absolute;right: 20px;top: 10px;background-color: aqua;content: ;font-size: 20px;}/style
/head
bodyp你好/p
/body
/html content是必须要写的否则显示不出来
伪元素选择器使用场景2仿土豆效果
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.tudou{position: relative;width: 500px;height: 400px;}.tudou img{width: 100%;height: 100%;}.tudou::before{display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;content: ;background-color: rgb(0,0,0,0.4);}.tudou:hover::before{display: block;}/style
/head
bodydiv classtudouimg src./1714915128_new_IMG-20240503-WA0094.jpg alt/div
/body
/html 就是这个
然后伪元素还有一个使用场景是伪元素清除浮动
伪元素清除浮动 1.额外标签法也称为隔墙法是W3C推荐的做法 2.父级添加overflow属性 3.父级添加after伪元素 4.父级添加双伪元素 这个要求新的空标签必须是块级元素
伪元素清除浮动算是第一种额外标签法的升级和优化 CSS3盒子模型
CSS3中可以通过box-sizing来指定盒模型有两个值content-box和border-box
这样计算盒子大小的方式就发生了改变
可以分成两种情况 1. box-sizing: content-box 盒子大小为 width padding border 以前默认的 2. box-sizing: border-box 盒子大小为 width 如果盒子模型我们改为了box-sizing: border-box 那padding和border就不会撑大盒子了前提padding 和border不会超过width宽度 CSS3还有其他特性了解即可可以让图片变模糊计算盒子宽度widthcalc函数
filter CSS属性将模糊或颜色偏移等图形效果应用于元素。
filter: 函数(); 例如 filter: blur(5px); blur模糊处理 数值越大越模糊 calc此CSS函数让我们声明CSS属性值时执行一些计算 width: calc(100% - 80px);
括号里面可以使用 - * / 来进行计算
CSS过渡
这是一个重点的特性过渡transition)是CSS3中具有颠覆性的特征之一我们可以在不使用 Flash 动画或 JavaScript 的情况下当元素从一种样式变换为另一种样式时为元素添加效果。 过渡动画 是从一个状态 渐渐的过渡到另外一个状态 可以让我们页面更好看更动感十足虽然 低版本浏览器不支持ie9以下版本 但是不会影响 页面布局。
现在经常和:hover一起搭配使用
transition: 要过渡的属性 花费时间 运动曲线 何时开始; 1.属性 想要变化的 css 属性 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都 变化过渡 写一个all 就可以。 2. 花费时间 单位是 秒必须写单位 比如 0.5s 3. 运动曲线 默认是 ease 可以省略 4.何时开始 单位是 秒必须写单位可以设置延迟触发时间 默认是 0s 可以省略 过渡就是谁需要就给谁加
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width: 200px;height: 100px;background-color: pink;transition: width .5s;}div:hover{width: 400px;}/style
/head
bodydiv/div
/body
/html
如果想要写多个属性就要利用,进行分割
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width: 200px;height: 100px;background-color: pink;transition: width .5s,height .5s;}div:hover{width: 400px;height: 400px;}/style
/head
bodydiv/div
/body
/html
在Linux阶段我们自己手工搓了一个进度条很原始我们后端原始人是这样的
前端可以实现更优雅的进度条至少看起来是这样代码难度肯定是后端高 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.bar{width: 250px;height: 10px;border: 1px solid red;border-radius: 7px;padding: 1px;}.bar_in{width: 50%;height: 100%;background-color: red;transition: width .8s;}.bar:hover .bar_in{width: 100%;}/style
/head
bodydiv classbardiv classbar_in/div/div
/body
/html 针对H5和C3有他们自己的相对论
HTML5结构标签本身
CSS3相关样式 而广义的HTML5是HTML5CSS3JS
这是HTML5 MDN的介绍
https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML
课后作业 制作这样的模块 有点不完全一样但是也还行
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box{height: 300px;width: 200px;background-color: white;}.box1 img{width: 100%;height: 180px;}span{font-size: 14px;color: #707070;}.old{font-size: 22px;color: rgb(226, 49, 49);font-weight: 700;}.new{font-weight: 700;text-decoration: line-through;}.box2{width: 150px;height: 30px;}.box2-in{width: 100px;height: 8px;border: 1px solid red;border-radius: 7px;padding: 1px;}.box2-in-in{width: 50%;height: 100%;background-color: red;transition: width .8s;}.box2-in:hover .box2-in-in{width: 100%;}.box3{width: 200px;height: 50px;color: white;font-weight: 700;background-color: rgb(179, 25, 27);text-align: center;line-height: 50px;}/style
/head
bodydiv classboxdiv classbox1img src./1714915128_new_IMG-20240503-WA0094.jpg alt/divspan安分守己苹果石榴(128G) 银色移动联通电信5G手机/spanspan classold$6088/spanspan classnew$6988/spandiv classbox2div classbox2-indiv classbox2-in-in/div/div/divdiv classbox3立即抢购/div/div
/body
/html
这就是前端
