html5 基本布局+新标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">header{background:#abcdef; height:150px;}nav{height:30px; background: #ff9900; margin-top: 100px;}nav li{float:left; width:100px; list-style: none; height:30px; line-height: 30px;}div{margin-top:10px;}section{width:70%;background:#abcdef;float:left;}article{background:#f90; width:500px; margin:0 auto; text-align:center;}aside{width:28%;float:right; background: #abcdef;}footer{background: #abcdef; height:100px; margin-top:20px; clear:both;}</style>
</head>
<body>
<header><p>this is header</p><nav><ul><li>首页</li><li>文章</li><li>帮助中心</li></ul></nav>
</header>
<div><!--主要部分--><section><p>this is section</p><article><h2>春晓</h2><p>春眠不觉晓，<br/>处处蚊子咬，<br/>打上敌敌畏,<br/>不知死多少。<br/></p></article><hr/><article><h2>上学歌</h2><p>春眠不觉晓，<br/>处处蚊子咬，<br/>打上敌敌畏,<br/>不知死多少。<br/></p></article><hr/><figure><figcaption>UFO</figcaption><p>不明飞行物</p></figure><figure><dt>DDS</dt><dd>大吊死</dd></figure><hr/><dialog><dt>今天几号？</dt><dd>母鸡</dd><dt>问你几号啊？</dt><dd>19</dd></dialog><hr/><menu><li>点击</li><li>右键单击</li></menu><hr/><!--firefox 才有右键菜单效果--><span contextmenu="caidan">右键单击</span><menu type="context" id="caidan"><menuitem label="菜单一" onclick="alert('这是菜单一')" icon="../img/logo.png"></menuitem></menu><hr/><!--温度计,有一个效果提示--><meter min="0" max="100" value="20" low="3" high="25"></meter><!--调透明度等 --><input type="range" /><!--进度条--><progress max="100" value="50" id="pro"></progress><script type="text/javascript">var pro=document.getElementById('pro');var jidu= setInterval(function(){var value=parseInt(pro.value);if(value>=parseInt(pro.max)){value=0;//  clearInterval(jidu);
               }pro.value+=1;},100);</script><hr/><!--展开折叠效果--><details><dt>这是一个问题？</dt><dd>to be or not to be?</dd><dt>这是一个问题？</dt><dd>to be or not to be?</dd><dt>这是一个问题？</dt><dd>to be or not to be?</dd></details><hr/><p>偏僻字注意功能，浏览器firefox不支持时,加（），支持者是拼音状态</p><ruby>狂<rp>(</rp><rt>kuang</rt><rp>)</rp></ruby><hr/><p> mark 是标记重点突出的效果</p><mark>男生最喜欢</mark>玩游戏</section><aside><p>this is aside</p><hgroup><h3>股票有风险？</h3><h3>投资股票吗？</h3></hgroup></aside>
</div>
<footer><p>this is footer</p><hr/><small>联系我们</small><small>商户合作</small></footer></body>
</html>

新标签 2

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--单击文字，可输入-->
<label for="a">名称</label><input type="text" id="a"/>
<!--为控件分组，指定标题-->
<fieldset><legend>main</legend>name: <input type="text">user:<input type="text">
</fieldset>
<!--摘要与细节，只有 chrome 支持-->
<details><summary>三国志</summary><p>this is content.</p>
</details>
<!--进度条-->
<meter min="0" max="100" value="20" title="20%">进度条</meter><br/>
<!--时间元素 日期与时间之间用 T 分割 利于seo-->
<!--mark高亮文本显示-->
欢迎<mark>大家</mark>光临<time datetime="1995-05-15">我的生日</time>聚会，明天<time datetime="2015-02-04T18:00:00">下班后</time>准时开始<!--select分组-->
<select name="location"><optgroup label="北京市"><option value="dcq">东城区</option><option value="hdq">海淀区</option></optgroup><optgroup label="上海市"><option value="pdq" selected="true">浦东区</option><option value="pxq">浦西区</option></optgroup>
</select><br/>
工作地点<select name="workplace" size="6" multiple="true"><optgroup label="北京市"><option value="dcq">东城区</option><option value="hdq">海淀区</option></optgroup></select>
<hr/>
<style type="text/css">input:focus{outline: red solid 1px;   /*外线，不占空间*/}
</style>
<input />
<!--box-shadow border-image css多列 看 w3c-->
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)"><input type="range" min="0" max="50" name="a" />+<input type="text" name="b" value="50" />=<output name="result"></output>
</form>
</body>
</html>

新选择器

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="utf-8" /><title>新选择器</title><style>h1{font-size:16px;}li:first-child{color:#f00;}/*<h1>注意是li:first-child，而不是ul:first-child</h1><ul><li>结构性伪类选择符 E:first-child</li><li>结构性伪类选择符 E:first-child</li></ul>*/.a [type=text]{color:red;}/*<div class="a"><input type="text" name="name" /></div>*/p:before{content:'子曰：';}p:after{content:'——摘自《论语》';}li:before{content: url(../img/logo.png);}/*<p>学而时习之，不亦说乎。</p><p>三人行，必有我师焉。</p><p>人不知而不晕，不亦君子乎。</p><br/><ul><li>宫保鸡丁</li><li>酱爆鸡丁</li><li>鱼香鸡丁</li></ul>*/</style>
</head>
<body></body>
</html>

线性渐变

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>背景线性渐变</title><style>div{height:250px;/*background-image: linear-gradient(180deg,#f00 0%,#ff0 70%,#fff 100%);*//*background-image: linear-gradient(180deg,#f00 ,#ff0 ,#fff);*//*径向渐变 第一个为半径 at 圆心坐标 ，后面为颜色*/background-image: radial-gradient(250px at 0 0,#f00,#ff0,#fff);/*background-image: radial-gradient(500px at 100px 100px,#f00,#ff0,#fff);*/background-repeat: no-repeat;}.div2{background-image: linear-gradient(to top ,#E13335 0%, pink 100%); height: 20px;}</style>
</head>
<body>
<p>background-image:linear-gradient; 背景线性渐变 向上0度 向右90度 向下180度 向左270度radial-gradient; 径向渐变repeating-linear-gradient 重复线性渐变重复径向渐变</p>
<div></div>
<div  class="div2">漂亮的导航 漂亮的线性渐变</div>
</body>
</html>

转载于:https://www.cnblogs.com/gyz418/p/5297366.html

html5 基本布局+新标签+新选择器 + 线性渐变相关推荐

  1. html5彩虹色填充,使用css技术的线性渐变来设计彩虹

    在网页设计中,有时候会需要用到渐变效果,渐变可以创建出类似于彩虹的视觉图案效果,在没有CSS3之前,为了显示一个渐变需要专门制作一个图片,这种不法不但不灵活还增加请求数,而CSS3可以轻松实现网页渐变 ...

  2. HTML5新特性总结（一）-新标签

    一. 语义化标签 1. 使用语义化标签的原因/优点 根据内容的结构化使用语义化标签,能够使开发者更好的阅读和理解以及浏览器爬虫与搜索引擎解析. 2. 新标签 新block标签:header,foote ...

  3. html5新特性 移除哪些,html5\CSS3有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？...

    (1)HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,地理定位等功能的增加. 绘画canvas元素: 用于媒介回放的video和audio元素: 本地离线存储localStorage ...

  4. 【前端系列教程之HTML5】06_HTML5新标签

    一.HTML5新布局标签 许多现有网站都包含以下HTML代码: <div id="nav">, <div class="header"> ...

  5. HTML5增加的几个新的标签

    HTML5又2008年诞生,HTML5大致可以等同于=html+css3+javascriptapi.... so --->支持css3强大的选择器和动画以及javascript的新的函数 先来 ...

  6. 第四节：HTML5给表单带来的新标签、新属性、新类型

    上一章节讲了21个语义化的标签,这一节我们来讲表单标签,HTML5不仅仅给表单带来了新的标签,还给原来的标签带来了新的属性,这一节我们会来介绍介绍它们. 到目前为止,我们对HTML5的学习还是停留在新 ...

  7. HTML5新标签与特性

    HTML5新标签与特性 1.兼容性问题(ie9以上的版本) [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8hkif4aQ-1647847660818)(C:\User ...

  8. HTML5新标签及特性

    HTML5 html经过了第5次重大改版,增加了一些语义化的标签 高版本浏览器支持,ie9以下不支持, html5是向后兼容的,原来html4的 标签仍然可以用 1.新特性 新增语义化元素 新增表单相 ...

  9. 用HTML5新标签构建页面

    HTML5新标签与传统DIV标签页面布局区别 在之前的HTML页面中,大家基本上都是用了Div+CSS的布局方式.而搜索引擎去抓取页面的内容的时候,它只能猜测你的某个Div内的内容是文章内容容器,或者 ...

最新文章

  1. MultiRow发现之旅（二）- 详解属性管理器
  2. leetcode221 Maximal Square
  3. document怎么取得日期选择框的值_一次性取得跨年度的租金收入如何进行财税处理？...
  4. 成功解决Python的Reshape your data either using array.reshape(-1, 1) if your data has a single feature or
  5. 文件夹获取管理员权限脚本
  6. 坚持做一件事情真的很不容易，首先必须要克服惰性！
  7. oracle 会话实例,返璞归真：Oracle实例级别和会话级别的参数设置辨析
  8. mysql have_mysql having的用法
  9. [转载] C++转JAVA的转换方法及约定
  10. JS版日期格式化和解析工具类
  11. javaWeb详细教程
  12. 51单片机最小系统原理分析
  13. Dubbo之@Adaptive
  14. 类和对象7：构造和析构方法
  15. windows下安装openssl工具及生成pfx文件
  16. Unity 3d 中Debug.Log和Print的区别。
  17. 背阔肌（05）：史密斯机俯身划船
  18. Git版本控制管理——diff
  19. 肖秀荣8套卷2018pdf下载|2018肖秀荣冲刺8套卷pdf下载电子版
  20. MATLAB 相机标定中标定板角点像素坐标系到世界坐标系的转换

热门文章

  1. 雷库兹韦尔量子计算机,人物 | 他说，再挺11年，送你长生不老，要不要？
  2. 一周新书榜：程序员最受关注的书有这样6本
  3. python使用Elasticsearch对wikipedia的数据进行检索（详细流程）
  4. 怎么画动漫人物的五官：耳鼻眼嘴
  5. 2020 第十一届蓝桥杯大赛软件类省赛第二场 C/C++ 大学 B 组 完整题面和题解
  6. html 未读消息红点,消息未读之点不完的小红点（Node+Websocket）
  7. java新手，写了个简单的计算器，求高手指点一二
  8. javascript成神之路(1)：如何编写高质量的js代码
  9. mybatis-plus在Mapper类中使用@select标签进行多表联合动态条件查询
  10. 直流充电桩和交流充电桩有什么区别？