目录

HTML基本语法

结构元素

详解页面骨架

样式详解

Test -align(文本水平对齐方式&＃xff09;&＃xff1a;

Clear&＃xff08;清除浮动&＃xff09;

Font -weigh(设置文本粗细)&＃xff1a;

Overflow&＃xff08;规定内容溢出元素框时发生的事情&＃xff09;&＃xff1a;

长度单位

Repeat

选择器

Text-decoration&＃xff08;文本修饰属性&＃xff09;&＃xff1a;

border-style&＃xff08;边框风格&＃xff09;&＃xff1a;

div的定义

常见的html标签

HTML基本语法

HTML5目标

HTML 5目标是为了能够创建更简单的Web程序&＃xff0c;书写出更简洁的HTML代码。

例如&＃xff0c;为了使Web应用程序的开发变得更容易&＃xff0c;提供了很多API&＃xff1b;为了使HTML变得更简洁&＃xff0c;开发出了新的属性、新的元素等。总体来说&＃xff0c;为下一代Web平台提供了许许多多新的功能。

• 结构元素

页面骨架

网页标题

次级标题

提示信息

详解页面骨架

引入外部样式&＃xff1a;

      一般用于定义网页的头部内容    一般放置网页标题&＃xff0c;LOGO&＃xff0c;提示信息等

页面样式

body {
background-color:#CCCCCC;
font-family:Geneva, Arial, Helvetica, sans-serif;
margin: 0px auto;
max-width:900px;
border:solid; border-color:#FFFFFF;}
header {background-color: #F47D31;display:block; color:#FFFFFF; text-align:center; }
header h2 {margin: 0px;}
h1 {font-size: 72px;margin: 0px; }
h2 {
font-size: 24px;margin: 0px;text-align:center;color: #F47D31; }
h3 {
font-size: 18px;margin: 0px; text-align:center; color: #F47D31; }
h4 {color: #F47D31; background-color: #fff; -webkit-box-shadow: 2px 2px 20px #888; -webkit-transform: rotate(-45deg); -moz-box-shadow: 2px 2px 20px #888; -moz-transform: rotate(-45deg);position: absolute; padding: 0px 150px; top: 50px;left: -120px; text-align:center;}
nav {display:block;width:25%; float:left; }
nav a:link, nav a:visited {
display: block;border-bottom: 3px solid #fff; padding: 10px; text-decoration: none;font-weight: bold; margin: 5px; }
nav a:hover {color: white;background-color: #F47D31; }
nav h3 {
margin: 15px;
color: white; }
#container {background-color: #888; }
section {
display:block;
width:50%;float:left; }
article {background-color: #eee;display:block; margin: 10px; padding: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;-webkit-box-shadow: 2px 2px 20px #888;-webkit-transform: rotate(-10deg); -moz-box-shadow: 2px 2px 20px #888;-moz-transform: rotate(-10deg); }
article header {-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; padding: 5px;}
article footer {
-webkit-border-radius: 10px;-moz-border-radius: 10px; border-radius: 10px; padding: 5px; }
article h1 {font-size: 18px; }
aside {
display:block;width:25%; float:left; }
aside h3 {margin: 15px;color: white;}
aside p {margin: 15px; color: white; font-weight: bold;font-style: italic; }
footer { clear: both;display: block;background-color: #F47D31;color:#FFFFFF; text-align:center;padding: 15px; }
footer h2 {font-size: 14px; color: white; }
/* links */
a { color: #F47D31; }
a:hover { text-decoration: underline; }


样式详解

• background-color          背景颜色
• font-size                        字体
• font-family:Geneva, Arial, Helvetica, sans-serif; 
• margin: 0px auto;            外边边距  设置两个值时&＃xff0c;第一个值表示上下&＃xff0c;第二个值表示左右

         margin: 0px ;                            设置一个值是表示上下左右

         margin: 0px 0px 0px auto;         设置四个值是表示上&＃xff0c;右&＃xff0c;下&＃xff0c;左的外边距

• max-width:900px;            最大宽度   px像素
• border:solid;                    边框样式

border-width    边框宽度

       border-top-width       上边框宽度

       border-right-width     右边框宽度

       border-left-width        左边框宽度

       border-bottom-width  下边框宽度

border-style     边框样式    solid实线  

border-color    边框颜色

border:2px,solider,red;    边框宽度&＃xff0c;样式&＃xff0c;颜色

• Test -align(文本水平对齐方式&＃xff09;&＃xff1a;

1.          Center  居中
2.           Left   左对齐
3.          Right   右对齐
4.          Justify   左右两端对齐

• Clear&＃xff08;清除浮动&＃xff09;

•       Left 左侧不允许浮动
•       Right
•       Both  左右两边都不允许浮动
•    None   默认值&＃xff0c;左右两侧浮动都不允许出现
•    Inherit  规定应从父元素继承字体粗细

• Font -weigh(设置文本粗细)&＃xff1a;

•       Normal 默认值&＃xff0c;定义标准字符
•       Bold     粗体字符
•      Bolder    更粗的字符
•      Lighter    更细的字符

• Overflow&＃xff08;规定内容溢出元素框时发生的事情&＃xff09;&＃xff1a;

• Visible 默认值&＃xff0c;内容不会被修剪&＃xff0c;会呈现在元素框之外
• Hidden 内容被修剪&＃xff0c;元素框外的内容不可见
• Scroll  内容被修剪&＃xff0c;但浏览器会显示滚动条以便查看其余内容
• Auto 如果内容被修剪&＃xff0c;则浏览器会显示滚动条以便查看内容

长度单位

• Px(像素)&＃xff1a;是相对显示器屏幕分辨率而言的。
• 任意浏览器默认字体高度为16px。
• Em相对长度单位。相对当前对象内文本字体大小

Repeat&＃xff1a;

• Repeat-x  background图片横向铺满
• Repeat-y            图片纵向铺满
• No-repeat           不重复

选择器

• :link          为未被访问过的链接设置样式。
• :visited        用于设置指向已访问页面的链接的样式
• :hover         用于设置鼠标指针浮动到链接上时的样式。
• :active         用于鼠标按下时的样式

Text-decoration&＃xff08;文本修饰属性&＃xff09;&＃xff1a;

•           None  默认值&＃xff0c;定义标准文本
•          Underline 文本下的一条线
•          Overline   文本上的一条线
•          Blink          定义闪烁文本&＃xff08;已废除&＃xff09;

border-style&＃xff08;边框风格&＃xff09;&＃xff1a;

•           Dotted点状   solid实线 
•          double双线   dashed虚线

div的定义

标准布局中&＃xff0c;每个div框架元素都要定义Id属性&＃xff0c;方便css能够精准的控制每个div布局块。每个Id的属性的值要有含义

           Id&＃61;”main” 主体

              Top   头部

              Context 内容

              Title    标题

              Sub     实例  。。。。。等

常见的html标签

a, abbr, b, base, body, br, dd, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, head, hr, html, i, img, li, link, meta, ol, p, s, script, span, strong, style, title, u, ul, acronym, address, applet, area, basefont, bdo, big, blockquote, button, caption, center, cite, code, col, colgroup, del, dfn, dir, font, frame, frameset, iframe, input, ins, isindex, kbd, label, legend, map, menu, noframes, noscript, object, optgroup, option, param, pre, q, samp, select, small, strike, sub, sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, var