背景知识

我的前端学习分为三个语言
HTML——页面规划，指放什么字，什么图片，那些又是什么格式（侧重标签）。有的标签可以达到同样的显示效果，但是意义不同
CSS——指具体的设计，比如字体
JS(javaScript)——页面交互

HTML学习

文件结构

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
40
41
42
43
44
45
46
<!--这是注释-->
<!DOCTYPE html><!--说明这是html格式-->
<html>
    <head><!--对文件信息进行说明-->
        <title>文档标题</title>
        <meta charset="UTF-8">
        <!--和外部链接-->
        <link rel="stylesheet" type="text/css" href="styles.css">
        <script src="script.js"></script>
    </head>
    <body><!--网页内容-->
        <h1>一级标题</h1>
        <h2>一级标题</h2>
        <p>这是段落</p>
        <p>
            <b>字体加粗</b>
            <br><!--换行-->
            <hr><!--创建水平分割线-->
            <i>斜体</i>
            <u>下划线</u>
            <s>删除线</s>
        </p>

        <ul>
            <li>无序列表</li>
            <li>无序列表</li>
        </ul>

        <ol>
            <li>有序列表</li>
            <li>有序列表</li>
        </ol>

        <table border="1"><!--说明边框空隙，不然是没有边框的-->>
            <tr>
                <th>表头</th>
                <th>表头</th>
            </tr>
            <tr>
                <td>表格数据</td>
                <td>表格数据</td>
            </tr>
        </table>>
        <a href="https://www.wxample.com">这是一个链接</a>
    </body>
</html>

属性

通过属性对标签进行定义
开始标签 属性名="属性值"
比如<p id="describe">xxx</p>

有的属性是标签特有的，有的是通用的
和css使用有关

属性 描述
class 为元素定义类名
id 定义元素唯一的id
style 定义元素行内样式

超链接特殊——规定页面跳转方式
图片——<img src="xx" alt="文字">src是图片路径，alt是若没图片没有加载出来要显示什么文字。还可以用width和height标签说明，这是拉伸，不是裁剪

块元素与行内元素

涉及到网页显示时内容会不会自动换行

块元素（block）——创建页面的主要部分，将内容分隔成逻辑块，比如<p>,<h1>,<ul>,<ol>,<li>,<table>,<form>,<div>
行内元素（inline）——在文本中插入小的元素，比如<span>,<a>,<strong>,<em>,<img>,<br>,<input>

关于<div>

块级标签，创建可以包含其他HTML元素的容器块
没有语义，仅用于组织内容——常用于创建页面的布局结构

1
2
3
4
5
6
7
8
9
10
<!--就是这样，将导航栏与内容区域分隔开-->
<div class="nav">
    <a href="#">链接 1</a>
    <a href="#">链接 2</a>
 </div>

 <div class="contend"></div>
    <h1>123</h1>
    <p>这是一个段落</p>
</div>

关于<span>

将一小部分文本包装起来，以便于对他们使用样式，css或者js行为
因为这样，就是内联文本，文本就不会换行

html表单

<form>标签是表单的容器

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
<form action="#"><!--这里是填url，上传到的位置。没有的话就是`#`,占位作用-->
            <!--填空-->
            <span>姓名：</span>
            <input type="text" placeholder="请输入姓名">
            <input type="submit" value="提交">
            <label for="password1">密码一号：</label><!--专门为input元素做标记的标签，仅限于和input对应使用-->
            <input type="text" id="password1" value="请输入密码">
            <label for="password2">密码二号：</label>
            <input type="password" id="password2" placeholder="请输入密码"><!--这样就不是明文-->
            <!--value是有规定开始有的值，placeholder是输入后提示语自动消失-->
            <input type="submit" value="提交">
            <br>
            <br>
            <!--单选-->
            <!--for属性可以将label标签绑定到input元素——一般与id所对应——但是id对每个元素都是唯一的，所以在这里不合适，而上面可以用-->
            <label for="">性别：</label>
            <!--后面给name定死了，就是单选的-->
            <input type="radio" name="gender">男
            <input type="radio" name="gender">女
            <input type="radio" name="gender">保密
            <br>
            <br>
            <!--多选-->
            <label for="">爱好：</label>
            <input type="checkbox" name="hobby">篮球
            <input type="checkbox" name="hobby">足球
            <input type="checkbox" name="hobby">乒乓球
            <input type="checkbox" name="hobby">羽毛球
        </form>