html5文件浏览器

转载

岁月静好呀 2024-10-28 14:33:33

文章标签 html5文件浏览器 web前端前端基础 html HTML 文章分类 HTML5 移动开发

一 web基础

1.什么是web

web是world wide web的简写, 称之为万维网, 广域网, 互联网

我们可以认为web就是网站

web的主要组成部分是HTML、css和JavaScript

简单来分的话：

结构: html

表现: css

行为: js

又或者：

html: 文本按钮输入框图片音频视频…

css: 用来装饰网页

javascript: 网页的动态效果

2.前后端的区别

html5文件浏览器_前端基础

二 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>