HTML+CSS+JS学习

文章目录

HTML
CSS
JavaScript

HTML

1.文档声明

 声明必须位于 HTML5 文档中的第一行，也就是位于  标签之前。该标签告知浏览器文档所使用的 HTML 规范。
1

2.HTML5的基本结构


DOCTYPE html>

<html>
  
  <head>
    
    <meta charset="utf-8" />
    
    <title>网页的标题title>
  head>
  
  <body>
    
    <h1>网页的大标题h1>
  body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3.字符实体

有些时候，在HTML中不能直接书写一些特殊符号，如

多个连续的空格（在网页中编写的多个空格默认情况下会自动被浏览器解析为一个空格）
字母两边的大于小于号
如果我们需要在网页中书写这些特殊的符号，则需要使用HTML中的实体（转义字符）实体的语法：&实体的名字，如下图所示：

实体名称	显示结果	描述
		空格
>	>	大于号
<	<	小于号
&	&	与

更多实体，可以参考w3school网站

4.meta标签

meta主要用于设置网页中的一些元数据，元数据并不是给用户看的

charset: 指定网页的字符集
name: 指定的数据名称
- keywords：表示网站的关键字，可以指定多个关键字，关键字之间使用==，==分割。
- description：表示网站的描述信息
content：指定数据的内容，会作为搜索结果的超链接上的文字显示
http-equiv: 模拟一个Http请求头信息，如下所示，就是模拟一个Http请求头，请求参数为refresh，请求内容为content中的内容

<meta charset="utf-8" />

<meta http-equiv="refresh" content="3;url=https://www.mozilla.org" />
1
2
3

default-style：设置默认的 CSS 样式表集的名称。
x-ua-compatible：设置X-UA-Compatible的值，可以指定网页的兼容性模式设置。（Edge mode指示IE以目前可用的最高模式显示内容。）
content-type：声明文档的MIME 类型和字符编码。如果指定，content 属性必须有 "text/html; charset=utf-8 "的值。这相当于一个指定了 charset 属性的元素，并对文档中的位置有同样的限制。注意：只能在使用text/html的文档中使用，不能在使用 XML MIME 类型的文档中使用。

5.语义标签

在网页中HTML专门用来负责网页的结构，所以在使用HTML标签的时候，应该关注的是标签的语义，而不是他的样式，这里先介绍几个基本的于一标签，还有些常用的标签放在后面具体讲解。

5.1基础的几个

	标签	作用	描述
块元素	~	标题	一共有6级，一般情况下一个页面只有一个，一般情况下很少用到4-6级标签
		标题组	标签被用来对标题元素进行分组。
		段落	页面中的一个段落
		长引文	之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体
行内元素		短引文	表示一个封闭的并且是短的行内引用的文本
		换行
		强调	标签是一个短语标签，用来呈现为被强调的文本,不建议用

5.2HTML5新增的标签

在这里插入图片描述

6.行内元素和块元素

块元素
- 在网页中一般通过块元素来对页面进行布局
- 默认宽度是父元素的全部，高度是内容的高度
行内元素
- 主要用来包裹文字，一般情况下会在块级元素中放行级元素。
- 默认高度和默认宽度是内容的宽度和高度

7.内容修正

浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正，这个通过浏览器中的查看网页源代码并不能看到效果，但是使用 F12 进行开发者调试时是能够看到上述几种情况被修正的结果。

不过虽然浏览器能够对不规范的页面内容进行修正，还是不建议编写不规范的代码，因为这对后期代码维护或团队代码协作将是非常不好的后果和体验。

8.布局标签

header：表示页面的头部
main：表示页面的主体（一个页面中会有一个main)
footer: 表示页面的底部
nav：表示页面的导航
aside：侧边栏
article：表示一个独立的文章
section：表示一个独立的区块，上边标签都不能用欧的时候用这个标签
div：块元素，表示一个区块
span：行内标签，被用来组合文档中的行内元素

9.列表

有序列表

<ol>
  <li>Mix flour, baking powder, sugar, and salt.li>
  <li>In another bowl, mix eggs, milk, and oil.li>
  <li>Stir both mixtures together.li>
  <li>Fill muffin tray 3/4 full.li>
  <li>Bake for 20 minutes.li>
ol>
1
2
3
4
5
6
7

无序列表

<ul>
  <li>Milkli>
  <li>
    Cheese
    <ul>
      <li>
        Blue cheese
        <ul>
          <li>Sweet blue cheeseli>
          <li>Sour blue cheeseli>
        ul>
      li>
      <li>Fetali>
    ul>
  li>
ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

定义列表
标签用于结合
（定义列表中的项目）和
（描述列表中的项目）。

<dl>
  <dt>Beast of Bodmindt>
  <dd>A large feline inhabiting Bodmin Moor.dd>

  <dt>Morgawrdt>
  <dd>A sea serpent.dd>

  <dt>Owlmandt>
  <dd>A giant owl-like creature.dd>
dl>
1
2
3
4
5
6
7
8
9
10

10.超链接

超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置使用a标签来定义超链接，href属性指定跳转的目标路径，值可以是一个外部网站的地址，也可以写一个内部页面的地址超链接是也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素，那么嵌套的元素就相当于一个超链接

<ul>
  <li><a href="https://www.baidu.com">Websitea>li>
  <li><a href="mailto:example@outlook.com">Emaila>li>
  <li><a href="tel:+123456789">Phonea>li>
ul>
1
2
3
4
5

当我们需要跳转一个服务器内部的页面时，一般我们都会使用相对路径，会以./或…/开头

10.1target属性（用来指定超链接打开的位置）

_self在当前页面中打开超链接，默认值
_blank在新建页面中打开超链接

10.2锚点跳转（在浏览网页时，用户通过点击锚点链接就可以跳转到当前页面的指定位置。）

可以使用javascript:void(0);来作为href的属性，此时点击这个超链接什么也不会发生
可以将#作为超链接的路径的占位符使用。可以直接将超链接的href属性设置为#，这样点击超链接以后页面不会发生跳转，而是转到当前页面的顶部的位置
可以跳转到页面的指定位置（锚点），只需将href属性设置#目标元素的id属性值（唯一不重复）

11.图片

图片标签用于向当前页面中引入一个外部图片。
img标签是一个自结束标签，这种元素属于替换元素（块和行内元素，具有两种元素的特点）

src：指定外部图片的路径（路径规则和超链接是一样的）
alt：图片的描述，这个描述默认情况下不会显示，图片无法加载的时候时显示。

12.内敛框架（iframe，用于向当前页面中引入其他页面）

src指定要引入的网页的路径
frameborder指定内敛框架的边框

13.音视频

13.1音频

audio标签用来向页面中引入一个外部的音频文件。

属性：
- controls是否允许用户控制播放
- autoplay音频文件是否自动播放（如果设置了autoplay，则音乐在打开页面时会自动播放
  但是目前来讲大部分浏览器都不会自动对音乐进行播放）
- loop音乐是否循环播放
- source：指定内部文件的目录

13.1.1注意点

E8 下不支持audio元素，但是可以使用元素在文档中的指定位置嵌入外部内容。

<embed src="./source/audio.mp3" />
1

13.2视频

video标签来向网页中引入一个视频，使用方式和audio基本上是一样的

<video controls>
  <source
    src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
    type="video/webm"
  />
  <source
    src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
    type="video/mp4"
  />
  <embed
    src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
    type="video/mp4"
  />
video>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

女人都是感性动物，注重细节，这种场景下"大大咧咧"的男生就成为了次品。无怪乎，喜欢渣男，也难免被渣。不说了，继续卷。

14.表格（table）

使用

创建一个表格，主要可以通过table中以下子标签生成表格，具体子标签如下：

<table>
        
        <tr>
            
            <td>td>
            
            <td colspan="合并的格数">td>
            
            <td rowspan="合并的列数">td>
        tr>
    table>

    
    <table>
        
        <thead>
            <tr>
                <td>
                    
                td>
            tr>
        thead>
        
        <tbody>
        <tr>
            <td>

            td>
        tr>
        tbody>
        
        <tfoot>
        <tr>
            <td>

            td>
        tr>
        tfoot>
    table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

14.1注意点

默认情况下，如果没有设置

，浏览器会自动添加一个标签。

border-spacing：指定边框之间的距离，但是如果设置border-collapse为collapse，此属性将失效

border-collapse：设置边框的合并，但是设置为合并模式，依然会出现有的颜色深，有的颜色浅的问题，建议用如下代码解决：

table {
    width: 500px;
    margin: 0 auto;
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-spacing: 0px;
}

table tr td {
    width: 100px;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    text-align: center;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

15.表单


    <form action="www.baidu.com" method="get">
        
        
        
        
        <input type="类型" name="参数值">
        
		<input type="button" value="按钮" />
		
		<button type="button">按钮button>
        
        <input type="radio" name="man" value="男">
    form>
    
    <input type="radio" name="man" value="男" checked>男
     <input type="radio" name="woman" value="女">女

     <br/>

     
     <input type="checkbox" name="1" value="1">1
     <input type="checkbox" name="2" value="2">2

     <br/>

     
     <select name="drop-down">
         <option value="1">1option>
         <option value="2">2option>
         <option value="3">3option>
     select>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

15.1和

input是自闭合标签，不需要就能结束；button不是自闭合标签，跟一般标签一样是成对出现的
button因为不是自闭合标签，所以使用起来更灵活，可以嵌套其他的标签

CSS

1.CSS的用法

1.1行内样式

通过标签的style属性来设置元素的样式

<p style="color:red;font-size:60px">学习p>
1

每个样式生命之间使用==；==分割，否则样式会失效。
使用这种形式，只能给每个元素设置特有的样式，但是当这种样式被多个元素使用的时候，就不合适了。在正式的开发过程中避免使用这种形式。

1.2内嵌样式

为解决上述问题，使得我们的样式能够在一个html文件中重复被使用。我们引入了==“内嵌样式”==

顾名思义，内嵌样式就是将样式定义到标签中，使得样式可以被重复使用。

<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>Documenttitle>
    <style>
        h1 {
            font-size: 20px;
            color: red;
        }
    style>
head>
1
2
3
4
5
6
7
8
9
10
11
12

定义的样式必须写到