当前位置：首页 > article >正文

学习前端HTML

article 2024/10/28 2:44:56

学习前端Html

一、认识我们常见的网页

网页的组成：文字，图片，按钮，搜索框，视频等等我们肉眼能看得到的。实际就是Html标签组成的。
网页的标准：
（1）Html: 搭建网页的结构（骨骼）
（2）Css:网页美容（样式）
（3）JavaScript:行为(简称js，是Jquery(JQ)框架的一个类库)，可用于做动画和表单验证等等。
打开网页的工具
我们常见的浏览器

浏览器都有自己的一个内核（渲染引擎）：讲网页的标签信息渲染我们人眼能够看到的视图信息。
浏览器内核分别为：百度百科
IE：trident
Google:blink
火狐：gecko
苹果：webkit
欧鹏：Presto
开发工具：Sublime、WebStorm 这些软件百度你能找得到的
初识Html
HTML : Hyper Text Markup Language
超文本标记语言
超文本：在网页中能够实现页面跳转的文字（超链接）
标记：指的是在网页中的html标签
（1）Html结构：

<!DOCTYPE html><!--这里是告诉浏览器当前的文档类型-->
<html><!--此标签为结构的跟标签-->
<head>
	<title>网页标题</title>
</head>
<body>
网页的内容（身体）。
</body>
</html>
<!--网页就像人一样、有头部head、身体body、名字title-->

（2）Html标签写法（重点）
单标签（只有开始没有结束）：meta ,hr 分割线（横线）, br换行
双标签（既有开始又有结束）：head body title
标签与标签之间的关系：并列（兄弟关系）、包含（嵌套）可以理解为父子关系

单标签：

横线标签  <hr>
设置网页编码 <meta charset="UTF-8">
换行标签  <br>
注释标签  <!-- 内容 -->

双标签：

 <h1>好好学习，天天向上</h1>
 <h2>好好学习，天天向上</h2>
 <h3>好好学习，天天向上</h3>
 <h4>好好学习，天天向上</h4>
 <h5>好好学习，天天向上</h5>
 <h6>好好学习，天天向上</h6>

打开文件后缀名为html的文件，以浏览器方式打开
每款浏览器的特色功能 F12 可以查看网页的标签组成内容还有样式等等。
段落标签

<!DOCTYPE html>
<html>
<head>
	<title>网页标题</title>
</head>
<body>
<p>
	静夜思
     李白
床前明月光，疑是地上霜。
举头望明月，低头思故乡。
</p>
</body> 
</html>

打开浏览器效果

这是打开浏览器的效果。没有样式。浏览器以默认的文本格式输出

格式化标签:

<!DOCTYPE html>
<html>
<head>
	<title>网页标题</title>
</head>
<body>
<strong>文字加粗</strong>  或者  <b>文字加粗</b>
<em>文字斜体</em> 或者  <i>文字斜体</i>
<ins>文字下划线</ins> 或者  <u>文字下划线</u>
<font color="red" size="12">color为文字的颜色  Size为文字的大小</font>
</body> 
</html>

打开浏览器后
在这里插入图片描述

块标签：div 显示独占一行
行内标签：span一格，不独占一行

图片标签：img
src=””: 通过该属性设置图片的相对路径或绝对路径，用来向浏览器展示所要显示的图片
title=“”：设置鼠标悬停到图片上的文字提示
alt=””: 设置图片描述信息（注意：该属性并不是给用户展示的，为搜索引擎提供服务）
width: 设置宽度
height:设置高度

路径
相对路径：凡是带有磁盘目录或者网站地址的路径
相对路径必须保证在同一个根目录下
没有磁盘目录或者网站地址的路径
在这里插入图片描述
a.html与iamge同级

<body>
<img src="image/pika.jpg">
</body>

在同个文件家中的话直接设置文件名字即可，还有就是图片的后缀也要
在这里插入图片描述

如果是不再同一个文件夹中的话 Html中存放网页 image放到是图片
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>网页标题</title>
</head>
<body>
<img src="../image/pika.jpg">
</body> 
</html>

还有要注意的 文件的路径不要使用中文

绝对路径：凡是带有磁盘目录或者网站地址的路径

<!DOCTYPE html>
<html>
<head>
	<title>网页标题</title>
</head>
<body>
<img src="C:\Users\Administrator\Desktop\web学习\Text\image">
</body> 
</html>

超链接：实现页面的跳转，点击网页上的带有超链接的文字，图片等，可以跳转到本身某个部位（锚点）或者其他网页

<a href=”目标页面的路径”>文字</a>

属性介绍：
target=“_blank” 在新窗口中打开页面
“_self” 默认值在当前窗口中打开页面
在head标签中添加base标签，在base标签中设置target属性为_blank;
title: 设置鼠标悬停到超链接上的文字提示
超链接在本页面内部跳转（锚点）
直接设置href的值为=”#” #后面可以为id属性值或者class属性值

特殊字符
在这里插入图片描述
特殊字符对照表

语意标签
概念：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）
作用：
网页的语义性更明确（搜索引擎）
网页结构更合理
实现：
选择有语义的标签
在语义不明确的时候，要选择有语义的标签
如果要设置样式，推荐使用css。

<body>
 <nav></nav>  表示的就是导航区域
 <header></header> 在网页布局中的头部
 <footer></footer> 在网页布局中的结尾部分
 <article></article>
 <aside></aside> 在网页布局中侧边栏部分
 <section></section> 网页布局中的区域	
</body>