HTML概述
HTML:Hyper Text Markup language 超文本标记语言
超文本：比普通文本功能更加强大，可以添加各种样式
标记语言：通过一组标签，来对内容进行描述.<关键字>
<h1>清明</h1>
<b> <i>--杜牧</i></b><br/>
<p>清明时节雨纷纷，</p>
<p>路上行人欲断魂。</p>
<p>借问酒家何处有，</p>
<p>牧童遥指杏花村。</p>
HTML语法规范
<!DOCTYPE html>
<!--
1.上面一个是文档声明
2.根标签是 html
3.html文件主要包含两部分.头部分和体部分
头部分： 主要是用来放置一些页面信息
体部分：主要来放置我们的HTML页面内容
4.通过标签来对内容进行描述，标签通常都是由开始标签和结束标签组成
5.标签不区分大小写
-->
<html>
<head>
<!--meta 网站配置信息-->
<!--指定浏览器打开页面的编码方式-->
<meta charset="utf-8" />
<!--指定网站标题-->
<title>入门案例</title>
</head>
<body>
Hellow world
</body>
</html>
标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>demo1</title>
</head>
<body>
<!--
h1标题：
h后面数字的取值范围：1~6
-->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
</body>
</html>
表格以及输入框属性
<form action="#" method=post>
<table width="60%" >
<tr>
<td align="right"><p>注册邮箱：</p></td>
<td >
<input type="text" name="email" />
</td>
</tr>
<tr>
<td align="right"><p>创建密码：</p></td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td align="right"><p> 真实姓名：</p></td>
<td><input type="username" name="username" /></td>
</tr>
<tr>
<td align="right"><p>性别：</p></td>
<td><input type="radio" name="sex" value="男" checked="checked">男</input>
<input type="radio" name="sex" value="女" >女</input>
</td>
</tr>
<tr>
<td align="right">爱好：</td>
<td>
<input type="checkbox" name="hobby" value="篮球" checked="checked" />篮球
<input type="checkbox" name="hobby" value="足球 " />足球
<input type="checkbox" name="hobby" value="乒乓球 " />乒乓球
<input type="checkbox" name="hobby" value="羽毛球 " />羽毛球
</td>
</tr>
<tr>
<td align="right"><p>生日：</p></td>
<td>
<select name="year">
<option value="1990">1990</option>
<option value="1991" selected="selected">1991</option>
<option value="1992">1992</option>
</select> 年
<select name="month">
<option value="12">12</option>
<option value="11">11</option>
<option value="10"selected="selected">10</option>
</select>月
<select name="day">
<option value="31">31</option>
<option value="30" selected="selected">30</option>
<option value="29">29</option>
</select>日
</td>
</tr>
<tr>
<td align="right"><p>我现在：</p></td>
<td>
<select name="doing">
<option value="正在上学">正在上学</option>
<option value="已毕业">已毕业</option>
</select>
</td>
</tr>
<tr>
<td class="me">问题详细描述</td>
<td><textarea cols="45" rows="5" name="detail" ></textarea>*必填 </td>
</tr>
</table>
</form>
文本格式化标签
<b> 定义粗体文本。
<big> 定义大号字。
<em> 定义着重文字。
<i> 定义斜体字。
<small> 定义小号字。
<strong> 定义加重语气。
<sub> 定义下标字。
<sup> 定义上标字。
<ins> 定义插入字。
<del> 定义删除字。
html框架标签
1.框架标签不能和body同时出现
2.frameset: border去除框架标签的框 ，示例：border="0"
border="10px" bordercolor="yellow"
3.frame框大小不变：两种情况:
第一种：border ="0"
第二种： noresize="noresize" 不改变大小
备注:scrolling是否显示滚动条
yes 显示
no 不显示
auto 如果内容高度超过屏幕高度直接显示滚动，
4. frame 是框，内容使用src来填充，
定位显示到指定位置： 使用name属性
例如：
点击left.html的标签跳转内容显示在right.html
1.给right.html的frame添加name属性，方便定位。
2.在left.html中使用target目标定位，根据name名查找
<frameset rows="200,*" border="10px" bordercolor="yellow">
<frame src="top.html" scrolling="yes" noresize="noresize" />
<frameset cols="200,*">
<frame src="left.html" scrolling="yes" noresize="noresize" />
<frame src="right.html" name="content" scrolling="yes" />
</frameset>
</frameset>
其他标签
<!--该网页的关键字-->
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<!--该网页的描述-->
<meta http-equiv="description" content="this is my page">
<!--该网页的编码-->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- href：引入css文件的地址-->
<link rel="stylesheet" type="text/css" href="./styles.css">
<!--src：js的文件地址-->
<script type="text/javascript" src=""></script>
CSS概述：
Cascading Style Sheets:层叠样式表
作用：
用来美化我们的HTML页面的
HTML 决定网页的骨架
CSS 化妆
CSS的简单语法：
在一个style标签中，去编写CSS 内容，最好将style标签写在这个head标签中
<style>
选择器{
属性名称：属性的值；
属性名称2：属性的值2；
}
<\style>
CSS选择器：帮助我们找到我们要修饰的标签或者元素
元素选择：
元素的名称{
属性名称：属性的值；
属性名称：属性的值；
}
ID选择器：
以#号开头
#ID的名称{
属性名称：属性的值；
属性名称：属性的值；
}
类选择器：
以 . 开头
.类的名称{
属性名称：属性的值；
属性名称：属性的值；
}
类和ID选择器的异同点
同：都可以应用于任何元素
异：1. ID选择器在文档中只能使用一次，类选择器可以使用多次
- 可以使用类选择器词列表方法为一个元素同时使用多个样式
子选择器
用于选择指定标签元素的第一代子元素
例如： .food>li{border:1px solid red;} 这行代码会使class名为food下的子元素li加入红色实线边框
后代选择器
加入空格用来指定标签元素下的后辈元素
.first span{color:red;}
子选择器与后代选择器的区别
子选择器仅指它的直接后代或者说是第一代后代，而后代选择器是作用于所有子后代元素 后代选择器通过空格来进行选择 而子选择器是通过 > 来选择
特殊性
为同一个元素设置了不同的样式，浏览器会根据权值来判断使用哪种样式。使用权值高的。
权值规则：标签的权值为1；类选择符权值为10； ID选择符的权值最高是100，还有一个比较特殊的权值--继承，有些文献显示它只有0.1
层叠
在HTML中对于同一个元素有多个CSS样式存在，而且有相同的权重，会根据这些CSS样式的前后顺序来决定，处于最后面的样式将被应用（后面的会覆盖前面的样式）
内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）
CSS的引入方式：
外部样式：通过link标签引入一个外部的CSS文件
内部样式：直接再style标签内编写CSS代码
行内样式：直接在标签中添加一个style属性，编写CSS样式
CSS首页优化（LOGO部分）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.logo{
float: left;
width: 33%;
/*border-width: 1px;
border-style: solid;
border-color: red;*/
height: 60px;
line-height: 60px;
/* border: 1px solid red;*/
}
.amenu{
color: white;
text-decoration: none;
height: 50px;
line-height: 50px;
}
.product{
float: left; text-align: center; width: 16%; height: 240px;
}
</style>
</head>
<body>
<!--
1. 创一个最外层div
2. 第一部份: LOGO部分: 嵌套三个div
3. 第二部分: 导航栏部分 : 放置5个超链接
4. 第三部分: 轮播图
5. 第四部分:
6. 第五部分: 直接放一张图片
7. 第六部分: 抄第四部分的
8. 第七部分: 放置一张图片
9. 第八部分: 放一堆超链接
-->
<div>
<!--2. 第一部份: LOGO部分: 嵌套三个div-->
<div>
<div class="logo">
<img src="../img/logo2.png"/>
</div>
<div class="logo">
<img src="../img/header.png"/>
</div>
<div class="logo">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<!--清除浮动-->
<div style="clear: both;"></div>
<!--3. 第二部分: 导航栏部分 : 放置5个超链接-->
<div style="background-color: black; height: 50px;">
<a href="#" class="amenu">首页</a>
<a href="#" class="amenu">手机数码</a>
<a href="#" class="amenu">电脑办公</a>
<a href="#" class="amenu">鞋靴箱包</a>
<a href="#" class="amenu">香烟酒水</a>
</div>
<!--4. 第三部分: 轮播图-->
<div>
<img src="../img/1.jpg" width="100%"/>
</div>
<!--5. 第四部分:-->
<div>
<div><h2>最新商品<img src="../img/title2.jpg"/></h2></div>
<!--左侧广告图-->
<div style="width: 15%; height: 480px; float: left;">
<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
</div>
<!--
右侧商品
-->
<div style="width: 84%; height: 480px;float: left;">
<div style="height: 240px; width: 50%; float: left;">
<img src="../products/hao/middle01.jpg" height="100%" width="100%" />
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅</p>
<p style="color: red;">$998</p>
</div>
</div>
</div>
<!--6. 第五部分: 直接放一张图片-->
<div>
<img src="../products/hao/ad.jpg" width="100%"/>
</div>
<!--7. 第六部分: 抄第四部分的-->
<div>
<div><h2>最新商品<img src="../img/title2.jpg"/></h2></div>
<!--左侧广告图-->
<div style="width: 15%; height: 480px; float: left;">
<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
</div>
<!--
右侧商品
-->
<div style="width: 84%; height: 480px;float: left;">
<div style="height: 240px; width: 50%; float: left;">
<img src="../products/hao/middle01.jpg" height="100%" width="100%" />
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅</p>
<p style="color: red;">$998</p>
</div>
</div>
</div>
<!--8. 第七部分: 放置一张图片-->
<div>
<img src="../img/footer.jpg" width="100%"/>
</div>
<!--9. 第八部分: 放一堆超链接-->
<div style="text-align: center;">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a>
<br />
Copyright © 2005-2016 传智商城 版权所有
</div>
</div>
</body>
</html>
CSS的盒子模型
万物皆盒子
内边距：
padding-top:
padding-right:
padding-bottom:
padding-left:
padding: 10px; 上下左右都是10px
padding: 10px 20px; 上下都是10px 左右是20px
padding: 10px 20px 30px; 上 10px 右 20px 下 30px 左 20px
padding: 10px 20px 30px 40px; 上右下左，顺时针方向
外边距:
margin-top:
margin-right:
margin-bottom:
margin-left:
CSS绝对定位：
position: absulte
top:控制距离顶部的位置
left:控制距离左边的位置
步骤分析：
1.总共5部分
2.第一部分是LOGO部分
3.第二部分是导航菜单
4.第三部分是注册部分
5.第四部分是FOOTER图片
6.第五部分是一堆超链接
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/main.css"/>
</head>
<body>
<!--
1. 总共是5部分
2. 第一部分是LOGO部分
3. 第二部分是导航菜单
4. 第三部分是注册部分
5. 第四部分是FOOTER图片
6. 第五部分是一堆超链接
-->
<div>
<!--2. 第一部分是LOGO部分-->
<div>
<div class="logo">
<img src="../img/logo2.png" />
</div>
<div class="logo">
<img src="../img/header.png" />
</div>
<div class="logo">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<!--清除浮动-->
<div style="clear: both;"></div>
<!--3. 第二部分是导航菜单-->
<div style="background-color: black; height: 50px;">
<a href="#" class="amenu">首页</a>
<a href="#" class="amenu">手机数码</a>
<a href="#" class="amenu">电脑办公</a>
<a href="#" class="amenu">鞋靴箱包</a>
<a href="#" class="amenu">香烟酒水</a>
</div>
<!--4. 第三部分是注册部分-->
<div style="background: url(../image/regist_bg.jpg);height: 500px;">
<div style="position:absolute;top:200px;left:350px;border: 5px solid darkgray;width: 50%;height: 50%;background-color: white;">
<table width="60%" align="center">
<tr>
<td colspan="2"><font color="blue" size="6">会员注册</font>USER REGISTER</td>
</tr>
<tr>
<td>用户名:</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password"/></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password"/></td>
</tr>
<tr>
<td>email:</td>
<td><input type="email"/></td>
</tr>
<tr>
<td>姓名:</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>性别:</td>
<td><input type="radio" name="sex"/> 男
<input type="radio" name="sex"/> 女
<input type="radio" name="sex"/> 妖
</td>
</tr>
<tr>
<td>出生日期:</td>
<td><input type="date"/></td>
</tr>
<tr>
<td>验证码:</td>
<td><input type="text"/></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="注册"/></td>
</tr>
</table>
</div>
</div>
<!--5. 第四部分是FOOTER图片-->
<div>
<img src="../img/footer.jpg" width="100%"/>
</div>
<!--9. 第四部分: 放一堆超链接-->
<div style="text-align: center;">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a>
<br />
</div>
</div>
</body>
</html>
网友评论