Web概述

最新推荐文章于 2024-03-19 20:30:00 发布

Chemist_Dong

最新推荐文章于 2024-03-19 20:30:00 发布

阅读量445

点赞数 1

文章标签： web基础

本文链接：https://blog.csdn.net/Chemist_Dong/article/details/103240441

版权

Web基础

一、课程介绍
1)Web基础的作用
Web基础就是教大家如何做网页；
2)分为3部分
A.HTML
用来勾勒网页的结构和内容;
B.CSS
用来给网页化妆，美化网页;
C.JavaScipt
用来让网页呈现出动态的数据和效果;
3)重点
JavaScipt:
–Java程序员使用JS来实现页面的业务逻辑;
–美工做出静态页面(HTML+CSS)
–JS操作的目标是HTML、CSS，是以透明为基础的，所以也必须掌握他们;
4)为什么要学习做网页
A.什么是Web项目
–带网页的项目;
–使用浏览器访问的项目;
B.Web项目的客户端使用网页实现,
所以我们要掌握Web

Web三要素：
	*浏览器
	*服务器
	*HTTP协议

2.XML和HTML的关系

	1)XML
		A.XML是可扩展标记语言，用来存储或传输数据;
			--标签可扩展
			--属性可扩展
			--元素之间的嵌套关系可扩展
		B.标签
			双标签：<标签名></标签名>
			单标签：<标签名/>
			关系：	<标签名/> = <标签名></标签名>
		C.属性
			--属性必须定义在开始标签上;
			--属性名="属性值"
			--属性名不能重复，且无序
		D.元素
			<标签名 属性名="属性值">内容</标签名>
	2)HTML
		A.HTML是超文本标记语言，用来显示数据
		B.实际上HTML是语法固定的XML
			--标签固定
			--属性固定
			--元素嵌套固定
		C.学习HTML就是学习这些固定的标签、属性、嵌套关系
		D.HTML基本结构
			<!-- html是唯一的根 -->
			<html>
				<head>
					<!-- 设置文档标题、编码、引入的资源 -->
				</head>
				<body>
					<!-- 页面上要呈现的内容 -->
					Hello,html.
				</body>
			</html>
		
3)HTML文档类型
	常用声明：
		HTML 5
		<!DOCTYPE html>
		
4)head元素
	title元素设置标题
		<title>我的第一个网页</title>

3.如何解决乱码问题

	1)创建HTML时，需要将文件编码设置为UTF-8
	2)需要再head元素下，使用meta元素设置页面内容的编码;
		<meta charset="UTF-8"/>

4.文本元素列表

	-标题元素
		<h1>1级标题</h1>
		<h2>2级标题</h2>
	-段落元素
		<p>文本内容</p>(每一个p都是一段)
	-列表元素
		列表类型：
			*有序列表<ol></ol>
			*无序列表<ul></ul>
		列表项：<li></li>,用于指示具体的列表内容
			<!-- 列表嵌套，有序列表和无序列表可以随意嵌套. -->
			<ol>
				<li></li>
				<li></li>
			</ol>
			<ul>
				<li></li>
				<li></li>
			</ul>
			
	-分区元素
		*分区元素用于元素分组，常用于页面布局
		*块分区元素:<div></div>
		*行内分区元素:<span></span>
		*div用来勾勒出页面的布局便于开发页面
	-行内元素
		*span元素是内联元素，可用作文本的容器。
		*span元素也没有特定的含义，当与CSS一同使用时，
		 span元素可用于为部分文本设置样式属性。
			<p>
			<span style="color:red">大家</span>好
			</p>
		*<i></i>元素用来定义斜体字。
		*<em></em>用来定义着重文字。
		*<b></b>元素用来定义粗体文字。
		*<strong></strong>元素用来定义加重文字。
		*<del></del>元素来定义带删除线的文字。
		*<u></u>元素用来定义带下划线的文字。
		*空格折叠，多个空格或tap会被压缩为一个空格
		*<br>元素可以创建手工换行
		*当需要使用空格或其他特殊字符时，可以使用实体引用来进行使用
			如：空格，&nbsp;和号&,&amp;引号",&quot;等

5.元素显示方式

	-块级元素
		*默认情况下，块级元素会独占一行，即元素前后都会自动换行
		*如：<p></p>、<div></div>、<hn></hn>、<ol></ol>
		*占据一个矩形区域
		*块级元素会影响页面的布局
	-行内元素
		*不会换行，可以和其他行元素位于同一行
			*如：<span></span>、<a></a>、<i></i>
		*不会占据矩形区域，只是用来修饰段落中的某几个字的
		*行内元素不会影响页面布局

6.图像元素

	*使用<img>元素将图像添加到页面
	*必须属性：src(路径)
	*常用属性：width、height
	
	*绝对路径
		-C:\Users\yangd\Desktop\WebWorkPlace\web\images
	*相对路径
		-页面和图片在同一个目录下
			*pig.png
		-页面和图片不在同一个目录下
			*../images/pig.png
			*../表示向上跳一级，可以多次使用向上多跳几级

7.超链接

	*使用<a></>元素创建一个超级链接，语法如下：
	* <a href=""target="">文本</a>
		-href属性：链接URL(地址)
		-target属性目标打开法师，可取值为_blank(新窗口)、_self(当前窗口)等
			<a href="http://www.baidu.com" target="_blank">百度一下</a>
	*锚点
		-锚点是文档中某行的一个记号
			-用于链接到文档中的某个位置
		-定义锚点
			-<a name="bottom">底部-</a>
		-链接到锚点：在锚点名前加上#
			-<a href="#bottom">回到底部-</a>

8.表格

	*表格的作用
		-表格通常用来组织结构化的信息
		-表格是一些被称作单元格的矩形框按照从左到右，从上到下的顺序排列在一起而形成的
		-表格的数据保存在单元格里
			列
		 行 111  222
			333  444
	*创建表格
		-定义表格：使用成对的<table></table>标记
		-创建行：使用成对的<tr></tr>标记
		-创建列(单元格)：使用成对的<td></<td>标记
			        <!-- 创建一个表格，两行两列 -->
    <table border="1px" width="100px" cellspacing="0px">
        <!-- 第一行 -->
        <tr>
            <!-- 第一列 -->
            <td>111</td>
            <!-- 第二列 -->
            <td>222</td>
        </tr>
        <!-- 第二行 -->
        <tr>
            <!-- 第一列 -->
            <td>333</td>
            <!-- 第二列 -->
            <td>444</td>
        </tr>
    </table>
	*表格的常用属性
		-<table></>元素
			-border(边框)
			-width/height
			-align
			-cellpadding:单元格边框与内容之间的间距
			-cellspacing:单元格之间的间距
		-<tr></>元素
			-align/valign
		-<td></>元素
			-align/valign/width/height/
			-colspan(跨行)
				-使当前单元格沿着垂直方向延伸，值为一正整数，代表次单元格垂直延伸的单元格格数
				-有点像Excel中的合并单元格，创建一个更大的单元格
			-rowspan(跨列)
		-样式能够代替这些相应的属性
	*行分组
		-表格可以划分为3个部分：表头、表主体和表尾
		-表头行分组：<thead></thead>
		-表主体行分组：<tbody></tbody>
		-表尾行分组：<tfoot></tfoot>

9.表单

	*什么是表单
		-表单用于显示、收集信息、并提交信息到服务器
		-表单二要素
			-Form元素(范围)
			-表单控件
		-表单就是从浏览器向服务器传输数据的手段
	*表单元素
		-定义表单：使用成对的<form></form>标记，表示要将此元素中所覆盖的控件中的数据传输给服务器
		-主要属性
			-action：表单提交的URL(地址)
			-method：指出表单数据提交的方式
			-enctype：表单数据进行编码的方式
	*表单控件
		-表单可以包含很多不同类型的表单控件
		-表单控件是一种HTML元素，信息输入项
		-表单控件包括：
			-input元素(具有不同的外观)
				-文本框、密码框
					-文本框：<input type="text"/>
					-密码框：<input type="password"/>
					<p>
						<label for="user_password">密码：</label>
						<input type="password" id="user_password"/>
					</p>
					-主要属性：
						-value属性：由访问者自有输入的任何文本
						-maxlength属性：限制输入的字符数
						-readonly属性：设置文本控件只读
				-单选框、复制框
					-单选框：<input type="radio"/>	(单选)√男生 ×女生 
					-复选框：<input type="checkbox"/> (多选)
					-主要属性
						-value：文本，当提交form时，如果选中了此单选按钮，那么value就被发送到服务器
						-name：用于实现分组，一组单选框或者复选框的名称必须相同
						-checked：设置选中
				-按钮
					-提交按钮：<input type="submit"/>
						-传送表单数据给服务器端或其他程序处理
					-重置按钮：<input type="reset"/>
						-清空表单的内容并把所有表单控件设置为最初的默认值
					-普通按钮：<input type="button"/>
						-用于执行客户端脚本
					-主要属性
						-value：按钮的名字
				-隐藏域、文本选择域
					-隐藏域：<input type="hidden"/>
						-在表单中包含不希望用户看见的信息，需要给其赋上默认值
					-文件选择框：<input type="file"/>
						-选择要上传的文件
			-其他元素
				标签、文本域、下拉选
					-标签
						-表单中的文本，用于给空间设置显示名称
						-语法：<label for="控件ID">文本</label>
						-主要属性：
							-for：设置该文本所关联的控件ID，关联后点击标签等同于点击控件
					-文本域
						-相当于多行文本框
						-语法：
							-<textarea>文本</textarea>
						-主要属性：
							-cols：指定文本区域的列数
							-rows：指定文本区域的行数
							-readonly：只读
					-下拉选：
						-下拉选择内容
						-语法：
							<select>
								<option value="1">java</option>
								<option value="2">php</option>
								<option value="3">.net</option>
							</select>