学习前端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>
每款浏览器的特色功能 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>
总结:
该标签的用法与div用法一样
该标签有语义，div没有语义
还有很多很多标签可以查看Html标签帮助文档