前端---初识HTML（前端三剑客）

1.HTML

先为大家介绍几个学习前端的网站：菜鸟教程，w3school，CSS

HTML：超文本标记语言

超⽂本: ⽐⽂本要强⼤. 通过链接和交互式⽅式来组织和呈现信息的⽂本形式. 不仅仅有⽂本, 还可能包含图⽚, ⾳频, 或者⾃已经审阅过它的学者所加的评注、补充或脚注等等

1.1 认识 HTML 标签

HTML 代码是由 "标签" 构成的.

形如:

html 复制代码

1 <h3>我是三级标题</h3>

标签名 (body) 放到 < > 中

⼤部分标签成对出现. <h1> 为开始标签, </h2> 为结束标签.

少数标签只有开始标签, 称为 "单标签".

开始标签和结束标签之间, 写的是标签的内容.

开始标签中可能会带有 "属性". id 属性相当于给这个标签设置了⼀个唯⼀的标识符(⾝份证号码).

1.2HTML 文件基本结构

在VS中输入！后敲击回车，会自动生成HTML的基本结构

html 标签是整个 html ⽂件的根标签(最顶层标签)

head 标签中写⻚⾯的属性.

body 标签中写的是⻚⾯上显⽰的内容

title 标签中写的是⻚⾯的标题.

1.3简单HTML开发

在body中写入：第一个HTML开发，然后ctrl+s保存，在文件中以浏览器打开

1.4HTML常见标签

1.4.1标题标签h1-h6

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>这是h1标签</h1>
    <h2>这是h2标签</h2>
    <h3>这是h3标签</h3>
    <h4>这是h4标签</h4>
</body>
</html>

1.4.2段落标签p

在HTML中, 段落, 换⾏符, 空格都会失效, 如果需要分成段落, 需要使⽤专⻔的标签

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>这是h1标签</h1>
    <p>这是一个段落</p>
    <h2>这是h2标签</h2>
    <h3>这是h3标签</h3>
    <h4>这是h4标签</h4>
</body>
</html>

在HTML中用于另起一行

在HTML中：

html 内容⾸尾处的换⾏, 空格均⽆效.

在 html 中⽂字之间输⼊的多个空格只相当于⼀个空格.

html 中直接输⼊换⾏不会真的换⾏, ⽽是相当于⼀个空格

1.4.3换行标签br

换行也可以使用br标签

br 是⼀个单标签(不需要结束标签)

br 标签不像 p 标签那样带有⼀个很⼤的空隙.

<br/> 是规范写法. 不建议写成 <br>

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    换行<br/>
    换行<br/>
    换行<br/>
    换行<br/>

</body>
</html>

1.4.4 图⽚标签: img

img 标签必须带有 src 属性. 表⽰图⽚的路径.

html 复制代码

<img src="https://m.360buyimg.com/seckillcms/s150x150_jfs/t1/274275/4/2437/22524/67d2989bF5c0b9cd0/680c6ed27abdb414.jpg" alt="">

其他的参数：

width/height: 控制宽度⾼度. ⾼度和宽度⼀般改⼀个就⾏, 另外⼀个会等⽐例缩放. 否则就会图⽚失衡.

border: 边框, 参数是宽度的像素. 但是⼀般使⽤ CSS 来设

html 复制代码

    <img src="https://m.360buyimg.com/seckillcms/s150x150_jfs/t1/274275/4/2437/22524/67d2989bF5c0b9cd0/680c6ed27abdb414.jpg" width="500px" height="800px">

1.4.5 超链接: a

html 复制代码

<a href="https://www.jd.com">京东</a>

点击后会跳转到京东

href: 必须具备, 表⽰点击后会跳转到哪个⻚⾯.

target: 打开⽅式. 默认是 _self. 如果是 _blank 则⽤新的标签⻚打开

链接的⼏种形式:

1.外部链接: href 引⽤其他⽹站的地址

html 复制代码

<a href="http://www.baidu.com">百度</a>

2.内部链接: ⽹站内部⻚⾯之间的链接. 写相对路径即可.

在⼀个⽬录中, 先创建⼀个 1.html, 再创建⼀个 2.html

html 复制代码

<!-- 1.html -->

我是 1.html

<a href="2.html">点我跳转到 2.html</a>

<!-- 2.html -->

我是 2.html

<a href="1.html">点我跳转到 1.html</a>

3.空链接: 使⽤ # 在 href 中占位.

html 复制代码

<a href="#">空链接</a>

1.4.6表格标签

table 标签: 表⽰整个表格

tr: 表⽰表格的⼀⾏

td: 表⽰⼀个单元格

thead: 表格的头部区域

tbody: 表格的主体区域.

表格标签有⼀些属性, 可以⽤于设置⼤⼩边框等. 但是⼀般使⽤ CSS ⽅式来设置.

这些属性都要放到 table 标签中.

align 是表格相对于周围元素的对⻬⽅式. align="center" (不是内部元素的对⻬⽅式)

border 表⽰边框. 1 表⽰有边框(数字越⼤, 边框越粗), "" 表⽰没边框.

cellpadding: 内容距离边框的距离, 默认 1 像素

cellspacing: 单元格之间的距离. 默认为 2 像素

width / height: 设置尺⼨.

注意, 这⼏个属性, vscode 都提⽰不出来

html 复制代码

    <table border="1">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>   
    </table>

1.4.7表单标签

表单域: 包含表单元素的区域. 重点是 form 标签

表单控件: 输⼊框, 提交按钮等. 重点是 input 标签

1.4.7.1 input标签

type(必须有), 取值种类很多, button, checkbox, text, file, image, password, radio 等

name: 给 input 起了个名字. 尤其是对于单选按钮, 具有相同的 name 才能多选⼀

value: input 中的默认值

checked: 默认被选中.(⽤于单选按钮和多选按钮)

1.4.7.2 from标签

提交按钮必须放到 form 标签内. 点击后就会尝试给服务器发送请求

html 复制代码

<form action="test.html">
 <input type="text" name="username">
 <input type="submit" value="提交">
</form>

action：将数据提交到那个界面

1.4.8 select 标签

下拉菜单

option 中定义 selected="selected" 表⽰默认选中

html 复制代码

    <select>
    <option>北京</option>
    <option selected="selected">上海</option>
   </select>

1.4.9无语义标签div / span

真实业务一般都用这个

用于页面布局

div是下图的大盒子

span是下图的小盒子

在盒子中有许多元素

html 复制代码

    <div>
        <span>span</span>
        <span>span</span>
        <span>span</span>
    </div>