您的位置：首页 > Web前端 > HTML

web概述、HTML概述、文本处理、图像、超链接、表格、表单

2017-07-24 21:47 656 查看


2017年7月24日学习总结

一、WEB概述

1,WEB三要素

①，浏览器

向服务器发起请求，下载服务器中的网页（HTML），然后

执行HTML显示出内容。

②，服务器

接受浏览器的请求，发送相应的页面到浏览器。

③，HTTP协议

浏览器与服务器的通讯协议。

2，常用浏览器

IE

Edge

FIREfox

Chrome

safari

3,HTML工作原理

HTML是部署在服务器上的文本文件。

根据HTTP协议，浏览器发出请求给服务器，服务器做出响应，

给浏览器返回一个HTML

浏览器解释执行HTML，从而显示出内容。

HTML部署在服务器上，运行在浏览器上。

二、HTML概述

1，什么是HTML？

HyperText Markup Language : 超文本标记语言，一种纯文本类型的语言。

用来设计网页的标记语言。

由浏览器解释执行。

可以理解为标签固定的XML。

2，什么是标记？

HTML标记通常也被称为HTML标签，HTML标签是由尖括号包围的关键词。

HTML标签通常是成对出现的。

标签对中的第一个标签是开始标签，第二个标签是结束标签。

3，注释

语法：

<!-- 注释内容-->

注释不可以嵌套

4,<!DOCTYPE>

告诉浏览器HTML是用什么版本编写的

5,<head>元素

是所有头部元素的容器。

包括<title>,<meta>,<link>,<style>,<script>等

三、文本处理

1,标题元素

<h#>...</h#>

2,段落元素

<p>...</p>

3,列表元素

有序列表:<ol>...</ol>

无序列表:<ul>...</ul>

列表项：<li>...</li>

4,分区元素

块分区元素:<div>...</div>

行内分区元素:<span></span>

5,元素显示方式

块级元素，默认情况下，元素前后都会自动换行。

行内元素，不会换行，和其他行内元素位于同一行。

四、图像

1，图像元素

<img>

将图像添加到页面

必须属性src 

2,绝对路径和相对路径

绝对路径：文件从最高级目录下开始的完整路径。

相对路径：目标文件的位置是相对于当前文件的位置。

五、超链接

<a href="" target="">文本</a>

href属性：链接URL

target属性：目标打开方式

六、表格

创建表格：<table></table>

创建行：<tr><tr>

创建列：<td><td>

七、表单

1,什么是表单？

表单用于显示、收集信息，并提交信息到服务器。

表单二要素：form元素，表单控件

表单就是从浏览器向服务器传输数据的手段

2，表单控件

是信息输入项

3，<input> 元素

文本框:<input type="text"/>

密码框:<input type="password"/>

单选框：<input type="radio"/>

复选框：<input type="checkbox"/>

提交按钮：<input type="submit"/>

重置按钮：<input type="reset"/>

普通按钮:<input type="button"/>

隐藏域:<input type="hidden"/>

文件选择框:<input type="file"/>

4,其它元素

标签:<lable for="控件ID"></lable>

for:设置该文本所关联的控件ID，关联后点击标签等同于点击控件。

文本域:<textarea>文本</textarea>

多行文本框

下拉选:

<select>
<option> ...</option>
...

</select>

一个小案例

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>WEB基础第一课</title>

</head>

<body>
<div>
<h1 style="color:blue">WEB概述</h1>
<ol>
<li>WEB三要素</li>
<li>常用浏览器</li>
<li>HTML工作原理</li>
</ol>
</div>
<div>
<h1 style="color:blue;">HTML概述</h1>
<ol>
<li>
HTML简介
<ul>
<li>什么是HTML</li>
<li>标记</li>
<li>注释</li>
</ul>
</li>
<li>
HTML文档类型
<ul>
<li><!DOCTYPE>声明</li>
<li>HTML版本</li>
<li>常用的声明</li>
</ul>
</li>
<li>
<head>元素
<ul>
<li><head>元素的作用</li>
<li><title>元素</li>
<li><meta>元素</li>
</ul>
</li>
</ol>
</div>

<div>
<h1 style="color:blue;">图像和超链接</h1>
<ol>
<li>
图像
<ul>
<li>图像元素<li>
<li>相对路径和绝对路径<li>
</ul>
</li>
<li>
超链接
<ul>
<li>超链接元素</li>
<li>锚点</li>
</ul>
</li>
</ol>
</div>

<div>
<h1 style="color:blue;">表格</h1>
<ol>
<li>表格的作用</li>
<li>创建表格</li>
<li>表格的常用属性</li>
<li>跨行属性</li>
<li>跨列属性</li>
<li>行分组</li>
</ol>
</div>

<div>
<h1 style="color:blue;">表单</h1>
<ol>
<li>
表单概述
<ul>
<li>什么是表单</li>
<li>表单</li>
<li>表单控件</li>
</ul>
</li>
<li>
<input>元素
<ul>
<li>文本框、密码框</li>
<li>单选框、复选框</li>
<li>按钮</li>
<li>隐藏域、文件选择框</li>
</ul>
</li>
<li>
其他元素
<ul>
<li>标签</li>
<li>文本域</li>
<li>下拉选</li>
</ul>
</li>
</ol>
</div>

</body>

</html>

网页运行结果



内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  web html http协议 浏览器 前端
相关文章推荐
新的分享
章节导航