前端学习-基础部分-HTML

开始今日份整理

1.HTML基础标签

1.1 标签

标签格式

HTML规定用英文尖括号，<>包起来，例如<html>
HTML中通常标签成对出现，分为开始标签与结束标签，结束标签比开始标签多一个’/’,例如<div></div>
标签不区分大小写，<html>和<HTML>，不过在程序员中默认都是小写
标签分为俩部分：开始标签<a>和结束标签</a>.俩个标签之间的部分，我们叫做标签体，而有些标签功能比较简单，有些时候使用单标签即可，这种标签叫做自闭和标签，例如<br/><hr/><input/><img/>
标签可以有若干个属性，也可以不带属性，如<head>元素就不带任何属性
标签可以嵌套，但是不能交叉嵌套，例如：我们可以在<div>标签内可以加入<p>标签，但是不能交叉嵌套，<a><b></a></b>这么使用时错误的嵌套以及使用

标签的语法：

<标签名属性1 =“属性值1” 属性2 =“属性值2” ……>内容部分</标签名>
<标签名属性1 =“属性值1” 属性2 =“属性值2” ……>

1.2 自闭和标签和主动闭合标签

　　<meta charset="UTF-8"> (自闭合标签)

　　<title>标题</title> (主动闭合标签)

　　注: 建议自闭和标签后面加上一个/ eg: <br/>

　　注2：自闭和标签也叫单闭合标签，主动闭合标签也叫双闭合标签

1.3 标签属性与分类

1.3.1 块状元素

块状元素 display: block

每个块状元素都从新的一行开始，独占一行
元素的高度，宽度，行高以及顶部和底部边距可以设置
元素的宽度在不设置的情况下，是它本身容器的100%，除非设定宽度

常用标签有：<div><p><h1>~<h6><ol><ul><table><form><li>

1.3.2 行内元素

行内元素 display:inline

和其他元素在同一行
元素的高度，宽度，行高以及顶部和底部边距不可设置
元素的宽度不可改变

常用标签有: <a><span><br><li><em><strong><labal>

1.3.3 行内块状元素

行内块状元素 display:inline-block

和其他元素在同一行
宽，高，底和顶部都可以设置

常用标签有：<img><input>

注：可以通过display元素对块级元素，行内元素以及行内块元素进行转换

1.4 嵌套规则

块元素可以包含行内元素或某些块元素，但行内却不能包含块元素，它只能包含其它的内联元素，例如：

<div><div></div><h1></h1><p><p></div> ✔️
<a href=”#”><span></span></a> ✔️
<span><div></div></span> ❌

块级元素不能放在p标签内

<p><ol><li></li></ol></p> ❌
<p><div></div></p> ❌

某些块元素只能包含行内元素，不能包含块元素，例如：h1~h6,p
li元素可以嵌入ul，ol，div等标签

2.HTML的head标签

2.1 声明文件

<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范

<!--html5标准-->
<!DOCTYPE html>

2.2 meta标签 ——>编码，跳转，刷新，关键字，描述，IE兼容

meta标签

1 页面编码（告诉浏览器是什么编码）
2 < meta http-equiv=“content-type” content=“text/html;charset=utf-8”>
3 刷新和跳转
4 < meta http-equiv=“Refresh” Content=“30″>
5 < meta http-equiv=”Refresh“ Content=”5; Url=https://www.baidu.com“ />  # 5秒后跳转到指定网址
6 告诉搜索引擎的网站的关键词，为了SEO优化
7 < meta name="keywords" content="老男孩,oldboy,alex,鸡汤" >

2.3 title标签 –>网页的标题

title标签中内容是是现在浏览器网页上的标题

<title>测试网页</title>

2.4 link标签 –>引入css文件或者是图标文件

link标签

1 引入css:
2 < link rel="stylesheet" type="text/css" href="css/common.css" >
3 引入图标icon:
4 < link rel="shortcut icon" href="image/favicon.ico">

2.5 style标签 –> 写css代码

style标签

<style>
.nav{
            width: 960px;
            margin: 100px auto 0;
            background-color: palevioletred;
            overflow: hidden;
            border-radius: 5px;

</style>

一般style标签写在head中

2.6 script标签 –> 写JavaScript 或引入JavaScript

script标签

1 引进文件
2 < script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"> </script >
3 写js代码
4 < script type="text/javascript" > ... </script >

具体情况在后面的JavaScript中会详细介绍

2.7 base标签

　　base标签可以为页面的所有链接规定默认地址或默认目标，base标签中的href属性指定基本url，和其他标签中的链接连接在一起组成最后的url

1 <!--指定基本链接: www.ccc.com-->
2 <base href="www.ccc.com/i/">
3 
4 <!--最后的链接是: www.ccc.com/i/1.gif-->
5 <img src="1.gif">

注：在一个文档中最多使用一个base标签！建议把base标签放在head标签的最开始处

3. HTML的body标签

3.1 p标签，br标签和hr标签

　　p标签表示段落，默认段落之间是有间隔的！

　　br是换行，hr是水平线

<body>
    <p>第一段 世界大势，合久必分，分久必合</p>
    <hr/>
    <p>第二段 滚滚长江东逝水，浪花淘尽英雄。是非成败转头空。青山依旧在，几度夕阳红。
    白发渔樵江渚上，惯看秋月春风。一壶浊酒喜相逢。古今多少事</p>
    <p>第三段 斩黄巾英雄首立功</p> <br/>
</body>

这个时候我们发现hr标签是一个块级元素，默认占用整个网页宽度。

3.2 a标签

　　a标签又被称之为超链接，是指从一个网页指向一个目标的链接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。

<a href="www.baidu.com"></a>

属性

跳转：target属性，默认是_self，在当前网页上打开资源，_blank是新的网站上打开资源
提示：title属性，当鼠标悬浮在a标签上时显示title的内容
锚点：使用a中的href属性来定义要跳转的位置，锚标签用于用于跳到文档中某个部分，而HTML中的name属性用于创建锚标记

<A NAME = “marker”>xxx</A> 
- 为达到这种跳转效果，请在HREF 参数中使用该标记
<A HREF= “#marker”>跳转到xxx</A>
- 跳转到本文档中相应锚标记位置

注: 只定义NAME属性相当于定义一个位置

<!--__author__ = "wyb"-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚</title>
</head>
<body>

<a href="#center" name="first">跳到中间</a>
<p>这是开头</p>
<a href="#last">跳到结尾</a>

<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>

<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<a href="#first" name="center">跳到开头</a>
<p>这是中间</p>
<a href="#last">跳到结尾</a>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>

<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>
<p>这是段落段落段落段落段落段落这是段落段落段落落段落段落段落段落这是段落段落段落落段落段落段落这是段落段落段落段落段落</p>

<a href="#center" name="last">跳到中间</a>
<p>这是结尾</p>
<a href="#first" >跳到开头</a>

</body>
</html>

用a标签实现锚

锚点的使用