day48前端基础之html

html是什么：

超文本标记语言（Hypertext Markup Language，HTML）：通过标签语言来标记要显示的页面中的各个部分。一套规则，浏览器认识的规则。

浏览器会按照顺序去渲染网页文件，然后根据标记符解释和显示内容。但需要注意的是，对于不同的浏览器，对同一标签可能会有不完全相同的解释（兼容性）

静态网页文件扩展名：.html或. htm

html结构：

<!DOCTYPE html>这是告诉浏览器使用什么样的html或者xhtml来解析html文档。

<html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是个HTML文档，在它们之间是文档的头部<head> 和主体<body>.

<head></head>元素出现在文档的开头部分，<head>与</head>之间的内容不会在浏览器的文档的窗口显示，但是其间的元素有特殊重要的意义。

以下是在头部用到的标签：

　　　　　　<title></title>定义网页标题，在浏览器标题栏显示。

　　　　　　　　引入CSS文件，里面包含对<body>内容的渲染

　　　　　　　　引入JS文件，渲染<body>内容的动态渲染

<meta>标签：

meta的两个属性：http-equiv 和 name

name属性：主要是描述网页，与之对应的属性值为content,里面包含了用于搜索引擎查找的信息和分类信息用的。





http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确的显示网页内容，与之对应的属性值为content，包含了对应参数的变量值。
　　　　　　<meta http-equiv ="Refresh" content ="2;URL=https://www.baidu.com"> 
　　　　　　(2s后自动跳转到百度）
　　　　　　<meta http_equiv ="content-Type" charset ="UTF8">
　　　　　　<meta http-equiv = "X-UA-Compatible" content ="IE=EmulateIE7">

<

<body>内常用标签

基本标签（块级标签和内联标签）

　　1、块级标签（block）独占一行

　　　　<h1>XX</h1>---<h6>XX</h6> 标签字体大小

　　　　:修改背景色,

　　　　<hr> 水平线

　　　　<div> 什么效果都没有，相当于一张白纸，作为最佳渲染对象

　　　　<p>段落标签，包裹的内容被换行，并且上下内容之间有一行空白

　　2、内联标签（inline）只按内容扩展

　　　　<strike>$100<strike> 相当于价格加划线

　　　　<span>也是什么效果都没有（可以跟<div>对比看）

　　　　<a>专门做跳转页面用

　　　　<img> 图片标签

　　　　<b><strong>加粗标签

　　　　<em>文字变成斜体标签

　　　　特殊字符：可以百度html特殊字符

嵌套规则：

　　　　块级标签可以嵌套所有

　　　　内联标签只可以嵌套内联

运用标签：

　　1、<div></div>和<span></span>

　　　　　　<div>我是div标签</div>

　　　　　　<span>我是span标签</div>

　　2、图形标签：<img>

　　　　　　src :要显示图片的路径

　　　　　　alt:图片没有加载成功时的提示

　　　　　　title:鼠标悬浮时的提示信息

　　　　　　width:图片的宽度

　　　　　　height:图片的高度（高度和宽度只用一个时会自动等比例缩放）

　　3、超链接标签（锚标签）

　　　　　　所谓超链接就是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网　页，可以是相同网页上的不同的位置，还可以是一个图片，一个邮箱，一个文件，甚至是一个应用程序。　　　　

　　　　　　　　　　target =“_blank”是在跳转网页的时候保留原页面，开启一个新的页面。

　　　　　　href属性指定目标网页地址，该地址可以有各种类型：

　　　　　　　　　　绝对URL--指向另一个站点（比如：href="http://www.baidu.com"）

　　　　　　　　　　相对URL--指向当前中确定的路径（href="index.htm"）

　　　　　　　　　　锚 URL--指向页面中的锚（href ="#d1"） #给需要跳转到的目标加个ID

　　　　　　　　　　　　<div  id = "d1" style="height: 500px;background-color: aqua">第一段</div>
　　　　　　　　　　　　<div  id = "d2" style="height: 500px;background-color: chocolate">第二段</div>
　　　　　　　　　　　　<div  id = "d3" style="height: 500px;background-color: green">第三段</div>

什么是URL？
URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。
URL举例
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html

URL地址由4部分组成
第1部分：为协议：http://、ftp://等 
第2部分：为站点地址：可以是域名或IP地址
第3部分：为页面在站点中的目录：stu
第4部分：为页面名称，例如 index.html
各部分之间用“/”符号隔开。

URL

表格标签：

　　表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预制文本和其他的表格等内容

　　表格最重要的目的是显示表格类数据。

　　　　表格的基本结构：

　　　　　　　　tr 是创建行（块级标签）

　　　　　　　　th 、td是创建列，只不过th是加粗效果（内联标签）

<table>
         <tr>
                <th>标题</td>
                <th>标题</td>
         </tr>
         
         <tr>
                <td>内容</td>
                <td>内容</td>
         </tr>
</table>

　　　　属性：

　　　　　　　　<tr>table row 表行

　　　　　　　　<th>table head cell 表头

　　　　　　　　<td>table data cell 表内容

　　　　　　border:表格边框

　　　　　　cellpadding:内边框

　　　　　　cellspacing:外边框

　　　　　　width:像素百分比（做好通过css来设置长宽）

　　　　　　rowspan:单元格竖跨多少行

　　　　　　colspan:单元格横跨多少行（即合并单元格）