目录
HTML基本语法
结构元素
详解页面骨架
样式详解
Test -align(文本水平对齐方式）：
Clear（清除浮动）
Font -weigh(设置文本粗细)：
Overflow（规定内容溢出元素框时发生的事情）：
长度单位
Repeat
选择器
Text-decoration（文本修饰属性）：
border-style（边框风格）：
div的定义
常见的html标签
HTML基本语法
<!--案例一 在HTML5文档中，下面写法都是合法的。-->
<!-- 只写属性，不写属性值，代表属性为true-->
<input type="checkbox" checked>
<!-- 不写属性，代表属性为false-->
<input type="checkbox">
<!-- 属性值=属性名，代表属性为true-->
<input type="checkbox" checked="checked">
<!-- 属性值=空字符串，代表属性为true-->
<input type="checkbox" checked="">
<!--案例二 在HTML5文档中，下面写法都是合法的。-->
<input type="text">
<input type='text'>
<input type=text>
<!--案例三 在HTML5的目标。-->
<h1>HTML5目标</h1>
<p>HTML 5目标是为了能够创建更简单的Web程序，书写出更简洁的HTML代码。
<br/>例如，为了使Web应用程序的开发变得更容易，提供了很多API；为了使HTML变得更简洁，开发出了新的属性、新的元素等。总体来说，为下一代Web平台提供了许许多多新的功能。结构元素
页面骨架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<title>HTML5结构元素</title>
<link rel="stylesheet" href="html5.css">
</head>
<body>
<header>
<h1>网页标题</h1>
<h2>次级标题</h2>
<h4>提示信息</h4>
</header>
<div id="container">
<nav>
<h3>导航</h3>
<a href="#">链接1</a> <a href="#">链接2</a> <a href="#">链接3</a> </nav>
<section>
<article>
<header>
<h1>文章标题</h1>
</header>
<p>文章内容......</p>
<footer>
<h2>文章注脚</h2>
</footer>
</article>
</section>
<aside>
<h3>相关内容</h3>
<p>相关辅助信息或者服务......</p>
</aside>
<footer>
<h2>页脚</h2>
</footer>
</div>
</body>
</html>详解页面骨架
引入外部样式：<link rel="stylesheet" href="html5.css">
<header></header> 一般用于定义网页的头部内容 一般放置网页标题，LOGO，提示信息等
<nav></nav> 一般用于定义导航栏的区域 一般放置网页导航栏，超链接等
<section></section> 一般用于定义网页主要内容
<article></article> 一般用于定义网页重要内容
<aside></aside> 一般用于定义网页侧边框
<footer></footer> 一般用于定义网页页脚 一般存放网页版权信息
页面样式
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; 外边边距 设置两个值时，第一个值表示上下，第二个值表示左右
margin: 0px ; 设置一个值是表示上下左右
margin: 0px 0px 0px auto; 设置四个值是表示上，右，下，左的外边距
- 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; 边框宽度，样式，颜色
Test -align(文本水平对齐方式）：
- Center 居中
- Left 左对齐
- Right 右对齐
- Justify 左右两端对齐
Clear（清除浮动）
- Left 左侧不允许浮动
- Right
- Both 左右两边都不允许浮动
- None 默认值，左右两侧浮动都不允许出现
- Inherit 规定应从父元素继承字体粗细
Font -weigh(设置文本粗细)：
- Normal 默认值，定义标准字符
- Bold 粗体字符
- Bolder 更粗的字符
- Lighter 更细的字符
Overflow（规定内容溢出元素框时发生的事情）：
- Visible 默认值，内容不会被修剪，会呈现在元素框之外
- Hidden 内容被修剪，元素框外的内容不可见
- Scroll 内容被修剪，但浏览器会显示滚动条以便查看其余内容
- Auto 如果内容被修剪，则浏览器会显示滚动条以便查看内容
长度单位
- Px(像素)：是相对显示器屏幕分辨率而言的。
- 任意浏览器默认字体高度为16px。
- Em相对长度单位。相对当前对象内文本字体大小
Repeat：
- Repeat-x background图片横向铺满
- Repeat-y 图片纵向铺满
- No-repeat 不重复
选择器
- :link 为未被访问过的链接设置样式。
- :visited 用于设置指向已访问页面的链接的样式
- :hover 用于设置鼠标指针浮动到链接上时的样式。
- :active 用于鼠标按下时的样式
Text-decoration（文本修饰属性）：
- None 默认值，定义标准文本
- Underline 文本下的一条线
- Overline 文本上的一条线
- Blink 定义闪烁文本（已废除）
border-style（边框风格）：
- Dotted点状 solid实线
- double双线 dashed虚线
div的定义
标准布局中，每个div框架元素都要定义Id属性，方便css能够精准的控制每个div布局块。每个Id的属性的值要有含义
Id=”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
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
