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

web开发 专栏收录该内容
40 篇文章 0 订阅



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>&lt;!DOCTYPE&gt;声明</li>
<li>HTML版本</li>
<li>常用的声明</li>
</ul>
</li>
<li>
&lt;head&gt;元素
<ul>
<li>&lt;head&gt;元素的作用</li>
<li>&lt;title&gt;元素</li>
<li>&lt;meta&gt;元素</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>
&lt;input&gt;元素
<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>


网页运行结果






  • 1
    点赞
  • 0
    评论
  • 1
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

越前

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值