HTML基础教程-优快云博客

HTML篇

目标:能够说出网页的基本组成

能够说出什么是HTML

能够说出常用的浏览器(常用浏览器(FireFox, Chrome, Internet Explorer)

能够说出Web标准的三大组成部分

什么是网页

Web标准

1.网页

1.什么是网页?

2.什么是HTML

3.网页的形成?

1.什么是网页

网站:是指在因特网上根据一定的规则,使用HTML等制作的用于展示特定相关内容的页面集合.

网页:是网站中的一"页",通常是HTML格式的文件,他要通过浏览器来阅读.

网页时构成网站的基本元素,它通常由图片,链接,文字,声音,视频等元素组成.通常我们看到的网页,常见以.htm或.html后缀结尾的文件,因此将其俗称为HTML文件.

1.2什么是HTML

HTML指的是超文本标记语言(Hyper Text Markup Language),它时用来描述网页的一种语言

HTML不是一种编程语言,而是一种标记语言(markup language)

标记语言是一套标记标签(markup tag)

所谓超文本,有两层含义:(笔记做到P3)

一.HTML

(一).什么是HTML(Hyper Text Markup Language 即超文本标记语言)

1. 出现于1993 现在主流使用的是 2013年的版本HTLM5

注:HTML5,提供了新的元素与更多有趣的特性,同时建立了一些新的规则,这些元素,特性和规则的建立,提供了许多新的网页功能,如使用网页实现动态渲染图形,图表,图像和动画,以及不需要任何插件直接使用网页播放视频等(以前是需要Flash插件的)

同时世界的知名浏览器厂商都对HTML5有支持(微软,Google, 苹果等)

2. 超文本

超文本包括文字,图片,音频,视频,动画等

3. W3C(World Wide Web Consortium (万维网联盟))

成立于1994年,Web技术领域最权威和最具影响力的国际中立性技术标准机构

W3C标准
包括结构化标准语言(HTML,XML) 表现标准语言(CSS) 行为标准语言(DOM, ECMAScript)

注: 例子 http://www.w3.org/ 其中的org代表的是开源的意思

4.开放标签和闭合标签

例子 <body> </body> 等成对的标签,分别叫做开放标签和闭合标签

注:IDE IDE是 Integrated Development Environment 的缩写 ,中文称为集成开发环境,用来表示辅助程序员开发的应用软件,也是它们的一个总称

5.解读index

index在互联网上表示网站的默认主页。

二.网页的基本信息

1.HTML中的注释是 

2.<!DOCTYPE html> 其中的DOCTYPE:告诉浏览器,我们要使用什么规范不加也可以平时默认的也是HTML

3. SEO

SEO(Search Engine Optimization 即搜索引擎优化) : SEO是一种方式,利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名.目的是让其在行业内占据领先地位,获得品牌收益.

SEO的作用是为了提高有效访问量

SEO分类 1.白帽子和黑帽子法前者是为用户创造内容和价值,并且纠正某些错误后者是通过欺骗等手段达到商业价值

4.

<!DOCTYPE html>

<html>
	
	
	<head>
		
		
		<meta charset="utf-8">

		
		<title> 我的第一个网页 </title>
	</head>
	
	
	<body>
		<h1>helloss</h1>
	</body>
</html>

三.网页基本标签使用时可多查文档

1.标题标签

2.段落标签

3.换行标签

4.水平线标签

5.字体样式标签

6.注释和特殊符号
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<h1>一级标题</h1>
	<h2>二级标题</h2>
	<h3>三级标签</h3>
	<h4>四级标签</h4>
	<h5>五级标签</h5>
	<h6>六级标签</h6>
 <hr>   
<h1>字体样式标签</h1>

粗体 :  <strong>I love you  </strong>  
斜体 : <em>i love you</em>


&gt;  大于号 
&lt;	小于号
<br/> 
&copy;版权所有

空格  :   &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

		
		
	<P>两只老虎，两只老虎，</P>	
	<P>一只没有眼睛，一只没有尾巴，</P>	
	<br/>
	<p> 
		真奇怪！真奇怪！
		两只老虎，两只老虎，
		跑得快，跑得快，
		一只没有耳朵，
		一只没有尾巴
	</p>
	
</body>
</html> 
对标题标签的补充

HTML中常用的是六个级别的标签

首先从语法层次出发一般情况下h1也就是一级标签仅仅使用一次其他标签可多次使用

其次从用户角度出发标签的作用帮助用户更有效的获取主要信息

四.图像标签

1.JPG:JPG是一种图像文件格式。它是JPEG（Joint Photographic Experts Group）联合图像专家组定义的一种用于连续色调静态图像压缩的标准。由于采用这种技术将图片大小压缩后，人们还能清晰地看到图片内容

JPG图像格式对应的JPEG压缩技术的先进性在于，它用有损压缩的方式去除冗余的图像数据，从而使得处理过后的图像文件变小（图像所占据的磁盘资源变小），而对其品质却没有很大影响

2.GIF:GIF是压缩格式的文件，用于减少文件在网络上传递的时间.GIF的全称是Graphics Interchange Format，可译为图形交换格式，用于以超文本标志语言（Hypertext Markup Language）方式显示索引彩色图像，在因特网和其他在线服务系统上得到广泛应用。GIF是一种公用的图像文件格式标准，版权归Compu Serve公司所有。

3.PNG: png是一种采用无损压缩算法的位图格式，其设计目的是试图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。PNG使用从LZ77派生的无损数据压缩算法，一般应用于JAVA程序、网页或S60程序中，原因是它压缩比高，生成文件体积小。

4.BMP:BMP是英文Bitmap（位图）的简写，它是Windows操作系统中的标准图像文件格式，能够被多种Windows应用程序所支持。随着Windows操作系统的流行与丰富的Windows应用程序的开发，BMP位图格式理所当然地被广泛应用。这种格式的特点是包含的图像信息较丰富，几乎不进行压缩，但由此导致了它与生俱来的缺点--占用磁盘空间过大。所以，BMP在单机上比较流行。

五.超链接标签及应用

	<!-- 锚链接
	作用 1.需要一个锚标记
		2. 跳转到标记 -->


	<a href="#top">回到顶部</a>
	
	<img src="../OIP-C.jpg" alt="">
	<a href=""></a>
	<a href="down"></a>
</body>



<!-- 功能性链接
	邮件链接 : mailto
	QQ链接
-->

<a href="mailto:2457162728@qq.com">点击联系我</a>


<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>

</html>

六.行内元素和块元素

块元素(块标签)

无论内容多少,该元素独占一行,例子: (P, h1-h6....)

行内元素(行标签)

内容撑开宽度,左右都是行内元素的可以在排在一行 例子(a. strong .em)

不会换行的叫行内标签

七.列表标签

什么是列表

列表就是信息资源的一种展示形式.它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能更快捷地获得相应的信息

列表的分类

无序列表, 有序列表,定义列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表学习</title>
</head>
<hr>
    
    <!-- 有序列表
        应用范围: 试卷,问答.... -->   
<ol>
    <li> JAVA   </li>
    <li>Python</li>
</ol>


<hr/>

    <!-- 无序列表 
        应用范围: 导航, 侧边栏....-->
        <ul>
            <li>JAVA</li>
            <li>Python</li>
            <li></li>
            <li></li>
            <li></li>

        </ul>

    <!-- 自定义列表 
    dl: 标签
    dt: 列表名称
    dd: 列表内容
    
    公司网站底部-->
    <dl>
        <dt>学科</dt>
        <dd>sadasd</dd>
        <dd>asdasd</dd>
        <dd>sadas</dd>
        <dd>aaaaa</dd>
        
        <dt>位置</dt>
        <dd>陕西</dd>
        <dd>新疆</dd>
        
    </dl>
</body>
</html>

八.表格标签

为什么使用表格

简单通用结构稳定

基本结构

单元格 , 行列跨行跨列

<!DOCTYPE html> 
狂神里面的那个表格    
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1px">

    
    <tr>
        <td colspan="3" align="center">学习成绩</td>
    </tr>
    <tr>
        <td rowspan="2">狂神</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">秦疆</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
</table>
</body>
</html>

九.媒体元素

视频元素

video

音频元素

audio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>媒体元素学习</title>
</head>
<body>
    

<!-- 音频和视频
    src:  资源路径
    controls    控制条 控制播放
    autoplay  自动播放


-->

<video src="../  .mp4"></video>
<audio src=""></audio>
</body>
</html>

十.页面结构分析

header 标题头部区域的内容(用于网页或页面中的一块区域)

footer 标记脚部区域的内容 (用于整个页面或页面的一块区域)

section Web页面中的一块独立区域

article 独立的文章内容

aside 相关内容或应用(常用于侧边框)

nav 导航类辅助内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页结构分析</title>
</head>
<body>
<header>
    <h2>网页头部</h2>
</header>

<section>
    <h2>网页主体</h2>
</section>
    
<footer>
    <h2>网页脚部</h2>
</footer>
</body>
</html>

十一.ifame内联框架

src="引用页面地址" name="框架标识名"


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iframe</title>
</head>
<body>
    


<iframe src="https://blog.youkuaiyun.com/WhereIsHeroFrom/article/details/117369499?spm=1001.2014.3001.5506"  name="hello"frameborder="0" width="10000px" height="800px"></iframe>


</body>
</html>

十二.初识表单post和get提交

method="规定如何发送表单数据常用值: get | post" action="表示向何处发送表单数据"

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>登陆注册</title>
</head>
<body>
	
	<h1>注册</h1>

	<!-- 表单form
	action: 表单请求的位置 可以是网站  也可以是一个请求处理地址
	method  post get 提交方式     解释url是链接的意思
		get 方式提交 我们可以在url  中看到我们提交的信息 不安全 但高效
		post 方式提交 比较安全  看不到信息   可以传输大文件  
		 -->

	<form action="">
		<!-- 文本输入框  input  type="text" -->
		<p>名字: <input type="text" name="username"></p>
		<!-- 密码框:  input type="password"-->
		<p>密码: <input type="password"   name="pwd"></p>
		<p>
			<input type="submit">
			<input type="reset">
		</p>
	

	</form>
</body>
</html>

十三.文本框和单选框

type 指定元素的类型.text password checkbox radio submit reset file hidden image button 默认为text

name (必填) 指定表单元素的名称

value 元素的初始值. type为radio时必须指定一个值

size 指定表单元素的初始宽度.当type为text或password时,表单元素的大小以字符为单位..对于其他类型,宽度以像素为单位

maxlength type为text 或 password 时,输入的最大字符数

checked type为radio或checkbox时,指定按钮是否被选中
<body>
	
	
<p>性别
	<input type="radio" value="boy" name="sex"/>男
	<input type="radio" value="girl" name="sex"/> 女
</p>

</body>
input 标签一定需要name值

十四.按钮和多选框


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>多选框和按钮</title>
</head>
<body>
	
<!-- input type="button  普通按钮
	<input type="image"		图像按钮
	<input type="submit">	提交按钮
	<input type="reset">	重置
		 -->


<!--	 <input type="checkbox">多选框	 -->
	<p>爱好
			<input type="checkbox"  value="sleep" name="hobby">睡觉
			<input type="checkbox"  value="code" name="hobby">敲代码
			<input type="checkbox"  value="chat" name="hobby">聊天
			<input type="checkbox"  value="game" name="hobby">游戏
	</p>


	<p>按钮   <!--此时用value表示按钮上边的字-->
		<input type="button" name="btn1" value="点击变长" >
		<input type="image" src="../OIP-C.jpg">
	</p>
	
	<p>
		<input type="submit">
		<input type="reset" value="清空表单">
	</p>
	
</body>
</html>

十五.列表框文本域和文件域

<!-- 文本域
		-->

		<p>反馈
				<textarea name="textarea"  cols="50" rows="10">文本内容</textarea>
		</p>



		<!-- 文件域
		<input type="file" name="files"> -->
		<p>
			<input type="file" name="files">
			<input type="button" value="上传" name="upload">
		</p>
		</p>

十六.搜索框滑块和简单验证

	<!--邮件验证  -->
	<p>邮箱:
		<input type="email" name="email">
	</p>

	<!-- URL -->

	<p>URL:
		<input type="url" name="url">
	</p>

	<p>
		<input type="submit">
		<input type="reset" value="清空表单">
	</p>

	<!-- 数字 -->
	<p>
		<input type="number" name="num" max="100" min="0" step="10"> 
	</p>
	

	<!-- 滑块 -->
	<p>音量 :
		<input type="range" min="0" max="100" step="2" >

	</p>
	

	<p>搜索 :
		<input type="search" name="search">
	</p>
</body>
</html>

十七.表单应用

隐藏域 hidden

只读 readonly

禁用 disabled

十八.表单初级验证

思考?为什么要进行表单验证

第一:减轻服务器的压力第二保证数据安全性

常用方式

placeholder 提示信息输入框中

required 非空判断

pattern 正则表达式

十九.HTML仅仅是结构学习CSS美化可以自己实现一遍基础标签然后建议直接CSS 一起学习吧兄弟们