<!--一个网页的基本结构写法-->

  1. <!doctype html>
  2. <html>
  3. <head>//头部
  4. <title>标题</title>
  5. </head>
  6. <body>主体内容……</body>
  7. </html>

<head>……<head/>(头部)<title>……<title>(标题)<body>……</body>(身体)

<h#>标题内容</h#> (#：1~6) <p>字段内容</p> (用于分段) <br>（换行作用） <hr>（水平线） &nbsp;（空格）&copy（©）

color（颜色）size（厚度）bgColor（背景颜色）background（背景图片）marquee（滑动字幕）

<!--注释内容--> （网页中注释符的写法）

示例：

  1. <!doctype>
  2. <html>
  3. <head><title>示例</title></head>
  4. <body bgcolor="#bbffff">
  5. <h1 align="center">大主宰</h1>
  6. <hr size="5px" width="70%" color="bule">
  7. <br>
  8. <h2>第一章</h2>
  9. <p>这里是第一章……</p>
  10. <h2>第二章</h2>
  11. <p>这里是第二章……</p>
  12. </body>
  13. </html>

<ul><li>……</li></ul>（无序列表）<ol><li>……</li></ol>（有序列表）<a href="链接地址">……</a> (导航链接)

片段（把代码复制到body中查看效果）
<nav>
<a href="#">首页</a>
<a href="#">上一页</a>
<a href="#">下一页</a>
</nav>

片段（把代码复制到body中查看效果）

<table border="2"><caption>学员信息</caption>
<tr><th>姓名：</th><th>性别：</th></tr>
<tr><td><i><b>陈扬胜</b></i></td><td><b><i>男</i></b></td></tr>
</table>

<u>……</u>（下划线）<i>……</i>（倾斜）<b>……</b>（加粗） border（边框宽度）width（表格宽度）eight（表格高度）

<table>……</table>（表格）<caption>……</caption>（表格的标题）<th>……</th>（列头单元格）<tr>……</tr>（行）<td>……</td>（列）

<img src="图片文件地址" alt="图片">（alt:图片说明） <audio src="音频文件地址" controls="controls">您的游览器不支持aduio标签</audio>

<video src="视频文件地址" width+"宽" eight="高" controls="controls">您的游览器不支持video标签</video>

（宽、高，替换成数字，controls属性是暂停播放的属性控件）

片段（把代码复制到body中查看效果）

<div> <!--嵌套列表标签的使用例子-->

<ul><li><a href="#">信息</a></li></ul>
<ul><li>姓名：</li><li>性别：</li></ul>
</div>

多行文本代码片段　　　　　　　　　　　　　　　　　　　　　　　　　　　　  按钮代码片段

<textarea rows="3" cols="20">……</textarea>（多行文本,3、20参数，根据需求填） <button type="button">点我啊！</button>（按钮）

<select><option value="姓名">陈扬胜</option></select>（创建菜单和选项）

片段（把代码复制到body中查看效果）

  1. <select>
  2. <optgroup label="组长"><option value="组长">张健文</option></optgroup>
  3. <optgroup label="组员"><option value="组员">陈扬胜</option><option value="组员">肖商富</option><option value="组员">李木炜</option></optgroup>
  4. </select>
  1. <form><!--简单表单代码片段-->
  2. <label for="txtName">姓名：</label><input type="text" id="txtName"/>
  3. </form>
  1. <form><!--组合表单代码片段-->
  2. <fieldset><legend>个人信息</legend>姓名：<input type="text" id="txtName"/></fieldset>
  3. </form>

选择器 属性 值      属性      值
css基础语法： h1{color:red;font-size:14px;}

<标记名 style="样式规则的集合">网页内容</标记名>

行内样式的定义及应用：

  1. <p style="color:bule;font-size:10pt">css实例</p>

写在<head>里 样式集合（内容由自己定义）

嵌入样式的定义及应用：

  1. <head><style type="text/css">p{color:blue;font-size:20pt;}</style>……</head>

外部样式的应用：

  1. <head><style type="text/css">@import"*.css";</style></head>

（*填样式文件的名字）

外部样式示例：

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <style type="text/css">@import"ys.css"；</style>
  5. <title>外部样式示例</title>
  6. </head>
  7. <body>CSS样式的应用</body></html>

css样式文件的内部结构：

  1. p
  2. {
  3. text-decoration:blink;<!--文本闪烁-->
  4. text-decoration:none;<!--文本去掉下划线-->
  5. text-decoration:underline;<!--文本加下划线-->
  6. text-decoration:overline;<!文本顶端画下划线>
  7. text-decoration:line-through;<!--文本中间加个贯穿线-->
  8. text-indent:5em;<!--文本缩进-->
  9. background-position:top;<!--图形位置-->
  10. word-wrap:break-word;<!--自动换行-->
  11. font-family:serif;<!--字体样式-->
  12. font-style:italic;<!--字体风格-->
  13. font-size:30pt;<!--字体大小-->
  14. font-weight:900;<!--字体加粗-->
  15. }
  16.  
  17. body
  18. {
  19. background-image:url(img\1.jpg),url(img\2.png);;<!--多重背景图片-->
  20. }

链接样式属性：

  1. a:link{color:#FF0000;}/*！未被访问时链接的效果*/
  2. a:visited{color:#00FF00;}/*已被访问的链接效果*/
  3. a:hover{color:#FF00FF;}/*！鼠标指针移动到链接上时的效果*/
  4. a:active{color:#0000FF;}/*正在被点击时的链接效果*/
  5. a:link{decoration:none;}/*去掉链接中的下划线*/
  6. <!--当为链接的不同状态设置样式时，请按照以上的次序来写-->

鼠标在字体上滑动停留效果

  1. <marquee onMouseOver="this.stop()" onMouseOut="this.start()"></marquee>

设置链接的背景色

  1. a:link{background-color:#0066FF;}<!--在样式中写-->

设置列表项标志形状

  1. ul{list-style-type:square;}<!--写在样式中-->

设置列表项图像

  1. ul li{list-style-image:url(图像位置)}

表格的宽度和高度

  1. table{width:100% eight:50px;}<!--两种写法都可以-->

表格文本对齐方式

  1. td{text-align:center;}

表格内边距

  1. td{padding:15px;}

设置链接字体变大效果

  1. a:link{font-size:10px;}
  2. a:hover{font-size:15px;}<!--写在样式里-->

折叠边框

  1. table{border-collapse:collapse;}

组选择器

  1. body,h2,p,table,th,td,pre,strong,em{color:gray;}<!--如果你想把多个元素显示为灰色，可以组合选择器，统一写规则-->

包含（后代）选择器

  1. table tr td p{font-size:9pt}

子元素选择器

  1. <!--如果你希望选择只作为h1元素子元素strong元素，可以这样写，这样写的范围缩小了，而且更准确-->
  2.  
  3. h1>strong{color:red;}

后代选择器和子选择器

  1. table td >p

类选择器

相邻兄弟选择器

  1. <style>
  2. 　　　　p+span{
  3. 　　　　　　border:1px solid red;
  4. 　　　　　　background:yelllow;
  5. 　　　　}
  6. 　　</style>
  7.  
  8. 　　<div>
  9. 　　　　<p>
  10. 　　　　　　我是p
  11. 　　　　</p>
  12. 　　　　<span>我是相邻p标签的span</span>
  13. 　　　　<span>我不是相邻的span</span>
  14. 　　</div>

作用范围：选择相邻的两个元素 元素一定要有同一个父级，+后面的元素享受样式。
比如上面只有 ：我是相邻p标签的span享受样式

　1、什么是选择器？

　　2、选择器分文哪三种？

　　3、什么是标签选择器？

　　4、标签选择器可派生出哪4中选择器？

　　5、类和ID选择器分别要用到哪两个符号？

　　选择符的分类

　　　　属性选择符

　　　　　　h1{属性：值；}

　　　　组选择符

　　　　　　h1,h2,h3{属性：值；}

　　　　包含选择符

　　　　　　p h1{属性：值；}

　　　　class类选择符

　　　　　　.div{属性：值；}

　　　　　　<div class="div"></div>

　　　　ID选择符

　　　　　　#div{属性：值；}

　　　　　　<div id="div"></div>

　　　　伪类选择符

　　　　　　#div:pseudo-class{属性：值；}

　　　　　　a:link{属性：值;}

　　　　　　a:visited{属性：值;}

　　　　　　a:hover{属性：值；}

　　　　　　a:active{属性：值；}

　　　　　　p:first-letter{属性：值}--首字的伪类样式

　　　　　　p:first-line{属性：值}--首行的伪类样式

　　　　通配选择符

　　　　　　*{属性：值；}

边框样式（写在样式文件，或内嵌行内样式中）

  1. {border-style:solid;}<!--实线边框-->
  2. {border-style:dotted;}<!--点线边框-->
  3. {border-style:dashed;}<!--虚线边框-->
  4. {border-style:double;}<!--双线边框-->

HTML5与CSS3网页设计的更多相关文章

  1. 32+激发灵感的HTML5/CSS3网页设计教程

      HTML5是寄托在HTML4基础上取得了的广泛成就.这不仅意味着你不必完全放弃现有的一些标记,而是可以借鉴,以加强 它. CSS3也以同样的方式在互联网内容的安排下,提供了它的柔韧性.CSS3是开 ...

  2. 15个前卫的 HTML5 & CSS3 网页设计作品

    今天,我们编译收集一组使用 HTML5 和 CSS3 制作的精美网站.在此集合中,你可以看到平面设计,网页设计,作品集和企业网站设计实例. 响应式设计和基于 HTML5 & CSS3 编码的网 ...

  3. 快速完成网页设计,10个顶尖响应式HTML5网页模板助你一臂之力

    为了寻找一个优质的网页模板,网页设计师和开发者往往可能会花上大半天的时间.不过幸运的是,现在的网页设计师和开发人员已经开始共享HTML5,Bootstrap和CSS3中的免费网页模板资源.鉴于网站模板 ...

  4. 经典网页设计：20个华丽的 iPhone 应用程序演示网站

    一个物品销售很好,重要的原因之一是它的包装,因为这是最重要的细节,可以把一个人转变成购买者.一个好的包装设计和良好的表现比产品本身更重要,因此被分配了大量的金钱和资源,以创造伟大的东西. 因此,为了销 ...

  5. HTML5+CSS3的响应式网页设计：自动适应屏幕宽度

    这几天都在修改博客上面的样式.本来用的是d83.0的模板.自己又修改了许多地方,其中自己修改的一些地方在手机里面显示的效果不是很理想,于是想改成自适应的效果.对CSS3不是特别的熟练,只能去网上找找案 ...

  6. MiracleSnow网页设计HTML5+CSS3+JS全套视频教程

    终于把这套课程讲完了,虽然时间隔了很长,但也算有始有终了,这是在YY讲课中我自己录的,讲了网页设计的基础,这也是我第一次给那么多人讲课,讲的不好多多包涵. 前几次视频和课件是分开的,后几次都打包在一起 ...

  7. HTML5、CSS3响应式设计——笔记

    1.1.响应式网页设计 响应式网页设计(RWD,Responsive Web Design)这个术语,由伊桑·马科特(EthanMarcotte)提出.他在A List Apart 发表了一篇开创性的 ...

  8. 如何去设计一个自适应的网页设计或HTMl5

    如何去设计一个自适应的网页设计或HTMl5 如今移动互联网随着3G的普及,越来越火爆,更多需求跟随而来!APP应用市场和APP应用数量成倍成倍的增长!从而给移动互联网带来新的挑战! 移动设备正超过桌面 ...

  9. html5、css3及响应式设计入门

    一.响应式设计的定义 将三种已有的开发技巧(弹性网格布局.弹性图片.媒体和媒体查询)整合起来,命名为响应式网页设计.真正的响应式设计方法不仅仅只是根据视口大小改变网页布局.相反,它是要从整体上颠覆我们 ...

随机推荐

  1. mac上调整phpstorm和webstorm的使用内存(默认是128m-750m) 避免卡顿

    For Mac Only WebStorm/phpstrom用起来一卡一卡,如今才发现是它的默认内存配置太弱.修改之: 修改phpstrom vi /Applications/PhpStorm.app ...

  2. CAD增强属性块的还原（转）

    来自:http://blog.3snews.net/space.php?uid=13924959&do=blog&id=70174 作者:毛毛虫 Demo下载:CAD增强属性块的还原 ...

  3. LeetCode赛题392---- Is Subsequence

    392. Is Subsequence Given a string s and a string t, check if s is subsequence of t. You may assume ...

  4. 微信小程序-04-详解介绍.json 配置文件

    致我自己:小程序开发不是简单一两天的事,一两天只能算是了解,有时候看多了会烦,感觉很熟悉了,其实只是对表面进行了解,对编程却知之甚少,小程序开发不是简单的改模板,一两天很多部分改模板可能都做不到,坚持 ...

  5. 实用爬虫-01-检测爬虫的 IP

    实用爬虫-01-检测爬虫的 IP 本篇介绍一个识别爬虫 ip 的小实例(教你一招识破无效的 ip 代理) [注意事项]: 1.url 可能会失效(个人感觉,因为它带了一个2018,下面附上链接获取方法 ...

  6. Vue.js双向绑定原理

    Vue.js最核心的功能有两个,一个是响应式的数据绑定系统,另一个是组件系统.本文仅仅探究双向绑定是怎样实现的.先讲涉及的知识点,再用简化的代码实现一个简单的hello world示例. 一.访问器属 ...

  7. 软工读书笔记 week 5 ——《构建之法》

    本周主要对<构建之法>中的一部分进行阅读. 一.软件与软件工程究竟是什么? 本书的概论部分就指出“软件 = 程序 + 软件工程”.而我们这门课的名字就叫“现代软件工程”.其实在上课之前,我 ...

  8. SSH笔记一

    加入JAR包(包括c3p0和sql的,重复包删低版本的) 加入Spring 1)  配置web.xml文件 ------删内容留web-app--------ctrl+shift+f--------c ...

  9. 【Oracle】DBMS_STATS.GATHER_SCHEMA_STATS详解

    dbms_stats能良好地估计统计数据(尤其是针对较大的分区表),并能获得更好的统计结果,最终制定出速度更快的SQL执行计划. exec dbms_stats.gather_schema_stats ...

  10. Oracle案例09——ORA-12154: TNS:could not resolve the connect identifier specified

    DG处理的问题还是蛮多的,但这次遇到一个比较奇葩的事情,表面配置.网络都没啥问题,但主备的同步始终有问题,经过多次调整参数.重新部署问题依旧,最终还是求助mos问题得以解决,现将处理过程记录如下: 一 ...