一 web基础
1.什么是web
web是world wide web的简写, 称之为 万维网, 广域网, 互联网
我们可以认为web就是网站
web的主要组成部分是HTML、css和JavaScript
简单来分的话：
结构: html
表现: css
行为: js
又或者：
html: 文本 按钮 输入框 图片 音频 视频…
css: 用来装饰网页
javascript: 网页的动态效果
2.前后端的区别
二 HTML
1. HTML版本
HTML5之前是HTML4.01
（XHTML不包含在内）
建议使用HTML5标签头，HTML5向下兼容低版本
即
<!DOCTYPE html>
2.html骨架标签
一个新建的HTML文档一般包括以下内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>:文档类型声明
html: 网页的根标签,其它的标签都被包含
head:头部标签,网页的一些配置信息
title: 浏览器选项卡中的文本
body:主体标签, 所有浏览器显示内容都被包含
3. 标签的类型
双标签: 有开始有结束 例如: <html></html>
单标签: 在开始中结束 例如: <meta /> <br />
4. 标签的关系
嵌套关系: 包含关系, 祖先和后代之间的关系
并列关系: 同级关系,兄弟之间的关系
5. 常用标签
<head>
<meta charset="utf-8">
<title></title>
<!-- 关键词 -->
<meta name="keywords" content="气象新闻，气象，天气"/>
<!-- 描述信息 -->
<meta name="description" content="气象新闻页面"/>
</head>
<body>
<!--
img的属性：
src：图片的路径
width：图片宽度
height：图片的高度
<!--单独设置宽或高时，图片会等比例缩放-->
title：提示文本
alt：替换文本，图片不存在时显示该文本
border：图片边框-->
<!-- 右边的更强调语意 -->
<!-- 不推荐使用 推荐使用 -->
<b>加粗</b> <strong>加粗</strong>
<i>倾斜</i> <em>倾斜</em>
<u>下划线</u> <ins>下划线</ins>
<s>删除线</s> <del>删除线</del>
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
<p>段落</p>
<!-- 换行标签 -->
<br />
<!-- 文本标签 -->
<font color="red">文本标签</font>
<!-- 该标签为注释文本 -->
</body>
6. 相对路径和绝对路径
相对路径：顾名思义，就是这个相对这个HTML到其他文档的路径。
路径格式为：src="…/mm.jpg"
其中：
在本文档上一级的用…/表示，有几级用几个表示
例：src="…/…/mm.jpg"
同级的直接写文件名称
例：src=“mm.jpg”
相对本文档下一级的写明文件夹名字，有几级写几级
例：src=“image/mm.jpg”
7. 超链接
a标签属性：
href：路径
target：
_self（默认值）从当前选项卡直接跳转到目标页
_blank 重新打开一个选项卡，跳转到目标页
<!-- 内部链接 -->
<a href="背景.html">背景设置页面</a>
<!-- 跳转到当前网站的其他页面 -->
<br/>
<!-- 外部链接 -->
<a href="https:www.baidu.com">百度</a>
<!-- 从当前网站跳转到其他网站 -->
<br/>
<!-- 空链接 -->
<!-- 空链接: 当a标签还没有决定跳转到哪个页面时,我们通常写一个空链接,一个#会跳转到页面顶部,所以通常写##号 -->
<a href="##">空链接</a>
<br/>
<!-- 锚点链接 -->
<!-- 将a标签的href属性关联跳转标签的id名称 -->
<a href="#yewei">页面底部</a>
8. 简单的背景设置
<!-- 背景色属性 bgcolor="颜色" -->
<!-- 背景图 background="url" -->
<body background="image/mm.jpg">
</body>
9. 列表
无序列表
<!-- 不遵循一定顺序排列的列表 -->
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
</ul>
有序列表
<!-- 遵循一定顺序排列的列表 -->
<ol>
<li>第一</li>
<li>第二</li>
<li>第三</li>
<li>第四</li>
</ol>
自定义列表
<!-- 列表项围绕着主题 -->
<dl>
<dt>主题</dt>
<dd>列表项</dd>
<dd>列表项</dd>
</dl>
10. 表格
标签:
table 表格标签
tr 行标签
td 单元格标签
th 表头标签
caption 表格的标题
属性:
border:边框
width:宽度
height:高度
cellspacing 单元格与单元格之间的距离
align: 文本的水平位置 left(默认)/center/right
示例代码：
<table border="1" align="center" cellspacing="0" width="600"height="300">
<tr bgcolor="beige" align="center">
<th>排名</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>爱好</th>
<th>同人数值</th>
</tr>
<tr align="center">
<td>1</td>
<td>白乐德</td>
<td>未知</td>
<td>1001</td>
<td>睡觉</td>
<td><img src=up.jpg" ></td>
</tr>
<tr align="center">
<td>2</td>
<td>李雷</td>
<td>男</td>
<td>13</td>
<td>韩梅梅</td>
<td><img src="down.jpg" ></td>
</tr>
<tr align="center">
<td>3</td>
<td>韩梅梅</td>
<td>女</td>
<td>13</td>
<td>读英语</td>
<td><img src="up.jpg" ></td>
</tr>
<tr align="center">
<td>4</td>
<td>王小明</td>
<td>男</td>
<td>16</td>
<td>看百变小樱魔术卡</td>
<td><img src="up.jpg" ></td>
</tr>
</table>
11. 表单
<!-- form 表单域 属性:
action 提交地址
method 提交方式
get 通过url提交
post 通过请求报文提交
-->
<form action="https:www.baidu.com" method="get">
<!-- label 属性：
for：关联标签的id值；实现点击label时，焦点为id所属标签 -->
<!-- input属性:
type：
text 输入框
password 密码框
radio 单选按钮 属性：
checked 默认选中，格式可为checked=“”；checked=“checked”；checked；三种作用相同
name 组的概念,将多个radio设置相同的组名,实现单选切换
button 普通按钮 属性 :
value 按钮的文本
submit 提交按钮 需要在form中使用
reset 重置按钮
-->
<label for="text1">姓名：</label>
<input type="text" id="text1">
<br />
<br />
<label for="text2">密码：</label>
<input type="password" id="text2" />
<br />
<br />
性别：
<br />
<label for="te1">男</label>
<input type="radio" name="12" id="te1" checked="" />
<label for="te2">女</label>
<input type="radio" name="12" id="te2" />
<br />
<br />
爱好：
<br />
<label for="ah1">游戏</label>
<input type="checkbox" name="ah" id="ah1" checked="" />
<label for="ah1">音乐</label>
<input type="checkbox" name="ah" id="ah2" />
<label for="ah1">旅游</label>
<input type="checkbox" name="ah" id="ah3" />
<br />
<br />
居住地：
<br />
<!-- select下拉框
option下拉项
selected 默认选中，属性类似checked。即可为：selected=“”；selected=“selected”；和selected；3种
optgroup下拉组 属性：
label 下拉组标题 -->
<select>
<optgroup label="中国">
<option>北京</option>
<option>天津</option>
<option>上海</option>
<option>深圳</option>
<option>河北</option>
<option>南京</option>
<optgroup label="美国">
<option>旧金山</option>
<option>哥谭市</option>
<option selected="selected">221B</option>
<option>黄石公园</option>
<option>华尔街</option>
<option>好莱坞</option>
</select>
<br />
<br />
请输入详细信息：
<br />
<!-- textarea 文本域 多行文本 -->
<textarea>
</textarea>
<br />
<br />
<input type="submit" value="提交" />
<input type="reset" value="重置" />
<!-- button 属性 :
type：
button 普通按钮
submit 提交按钮 需要在form中使用
reset 重置按钮
value 按钮的文本
-->
<br />
<button type="button">button按钮</button>
</form>
3765
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
