HTML-前端设计
一、B/S 软件的结构
客户端:浏览器
服务器端:web服务器
二、前端的开发流程
三、网页的组成部分
页面由三部分内容组成!分别是内容(结构)、表现、行为。
内容(结构),是我们在页面中可以看到的数据。我们称之为内容。一般内容,我们使用 html 技术来展示。
表现,指的是这些内容在页面上的展示形式。比如说,布局,颜色,大小等等。一般使用 CSS 技术实现。
行为,指的是页面中元素与输入设备交互的响应。一般使用 javascript 技术实现。
四、HTML 简介
Hyper Text Markup Language (超文本标记语言)
HTML 通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件, 通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容。
1、HTML 文件的书写规范
<!--表示整个 html 页面的开始-->
<html>
<!--头信息-->
<head>
<title>标题</title>
</head>
<body>
body 是页面的主体内容 页面主体内容
</body>
</html>
<!--表示整个 html 页面的结束-->
2、HTML 标签
标签的格式:<标签名>封装的数据</标签名>
标签名大小写不敏感
标签拥有自己的属性
标签又分为,单标签和双标签
3、font 字体标签
font 标签:字体标签,它可以用来修改文本的字体,颜色,大小(尺寸)
color 属性:修改颜色
face 属性:修改字体
size 属性:修改文本大小
<html>
<body>
<font color="red" face="宋体" size="7">我是字体标签</font>
</body>
</html>
4、特殊字符
### 5、标题标签
<html>
<body>
<h1 align="left">标题 1 左对齐</h1>
<h2 align="center">标题 2 居中</h2>
<h3 align="right">标题 3 右对齐</h3>
</body>
</html>
6、超链接
a 标签: 超链接
href 属性:设置连接的地址
target 属性:设置哪个目标进行跳转
<a href="http://localhost:8080" target="_self">打开当前页面</a>
7、列表标签
<html>
<body>
<ul type="none">
<li>无序列表-1</li>
<li>无序列表-2</li>
<li>无序列表-3</li>
</ul>
<ol type="none">
<li>有序列表-1</li>
<li>有序列表-2</li>
<li>有序列表-3</li>
</ol>
</body>
</html>
8、img 标签
img 标签:图片标签,用来显示图片
src 属性:可以设置图片的路径
width 属性:设置图片的宽度
height 属性:设置图片的高度
border 属性:设置图片边框大小
alt 属性:设置当指定路径找不到图片时,用来代替显示的文本内容
<img src="../imgs/1.jpg" width="200" height="260" border="1" alt="图片找不到"/>
9、表格标签
table 标签是表格标签
border 设置表格标签
width 设置表格宽度
height 设置表格高度
align 设置表格相对于页面的对齐方式
cellspacing 设置单元格间距
tr 是行标签
th 是表头标签
td 是单元格标签
align 设置单元格文本对齐方式
<html>
<body>
<table align="center" border="1" width="300" height="300" cellspacing="0">
<tr>
<th>1.1</th>
<th>1.2</th>
<th>1.3</th>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
</body>
</html>
10、跨行跨列表格
colspan 属性:设置跨列
rowspan 属性:设置跨行
<html>
<body>
<table width="500" height="500" cellspacing="0" border="1">
<tr>
<td colspan="2">1.1</td>
<td>1.3</td>
<td>1.4</td>
<td>1.5</td>
</tr>
<tr>
<td rowspan="2">2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
<td>2.5</td>
</tr>
<tr>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
<td>3.5</td>
</tr>
<tr>
<td>4.1</td>
<td>4.2</td>
<td>4.3</td>
<td colspan="2" rowspan="2">4.4</td>
</tr>
<tr>
<td>5.1</td>
<td>5.2</td>
<td>5.3</td>
</tr>
</table>
</body>
</html>
11、iframe 框架标签
ifarme 标签它可以在一个 html 页面上,打开一个小窗口,去加载一个单独的页面
<html>
<body>
我是一个单独的完整的页面
<br/>
<br/>
<iframe src="3.标题标签.html" width="500" height="400" name="abc">
</iframe>
<br/>
<ul>
<li>
<a href="0-标签语法.html" target="abc">0-标签语法.html</a>
</li>
<li>
<a href="1.font 标签.html" target="abc">1.font 标签.html</a>
</li>
<li>
<a href="2.特殊字符.html" target="abc">2.特殊字符.html</a>
</li>
</ul>
</body>
</html>
12、表单标签
表单就是 html 页面中,用来收集用户信息的所有元素集合.然后把这些信息发送给服务器.
form 标签就是表单
input type=text 是文件输入框,value 设置默认显示内容
input type=password 是密码输入框,value 设置默认显示内容
input type=radio 是单选框,name 属性可以对其进行分组,checked="checked"表示默认选中
input type=checkbox 是复选框,checked="checked"表示默认选中
input type=reset 是重置按钮,value 属性修改按钮上的文本
input type=submit 是提交按钮,value 属性修改按钮上的文本
input type=button 是按钮,value 属性修改按钮上的文本
input type=file 是文件上传域,input type=hidden 是隐藏域 当我们要发送某些信息,而这些信息,不需要用户参与,就可以使用隐藏域(提交的 时候同时发送给服务器)
select 标签是下拉列表框,option 标签是下拉列表框中的选项,selected="selected"设置默认选中
textarea 表示多行文本输入框(起始标签和结束标签中的内容是默认值),rows 属性设置可以显示几行的高度,cols 属性设置每行可以显示几个字符宽度
action 属性设置提交的服务器地址
method 属性设置提交的方式 GET(默认值)或 POST
GET 请求的特点是:
1、浏览器地址栏中的地址是:action 属性[+?+请求参数]
请求参数的格式是:name=value&name=value
2、不安全
3、它有数据长度的限制
POST 请求的特点是:
1、浏览器地址栏中只有 action 属性值
2、相对于 GET 请求要安全
3、理论上没有数据长度的限制
<html>
<body>
<form action="http://localhost:8080" method="post">
<input type="hidden" name="action" value="login" />
<h1 align="center">用户注册</h1>
<table align="center">
<tr>
<td> 用户名称:</td>
<td>
<input type="text" name="username" value="默认值"/>
</td>
</tr>
<tr>
<td> 用户密码:</td>
<td>
<input type="password" name="password" value="abc"/
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" value="boy"/>男
<input type="radio" name="sex" checked="checked" value="girl" />女
</td>
</tr>
<tr>
<td> 兴趣爱好:</td>
<td>
<input name="hobby" type="checkbox" checked="checked" value="java"/>Java
<input name="hobby" type="checkbox" value="js"/>JavaScript
<input name="hobby" type="checkbox" value="cpp"/>C++ </td> </tr> <tr><td>国籍:
</td>
<td>
<select name="country">
<option value="none">--请选择国籍--</option>
<option value="cn" selected="selected">中国</option>
<option value="usa">美国</option>
<option value="jp">日本</option>
</select>
</td>
</tr>
<tr>
<td>自我评价:</td>
<td>
<textarea name="desc" rows="10" cols="20">我才是默认值</textarea>
</td>
</tr>
<tr>
<td>
<input type="reset" />
</td>
<td align="center">
<input type="submit"/>
</td>
</tr>
</table>
</form>
</body>
</html>
13、其他标签
<html>
<body>
<div>div 标签 1</div>
<div>div 默认独占一行</div>
<span>span 标签 1</span>
<span>span 标签 它的长度是封装数据的长度</span>
<p>p 段落标签 1</p>
<p>p 段落标签 默认会在段落的上方或下方各空出一行来</p>
</body>
</html>