前端入门第一课：HTML 基础语法 + 常用标签 + 实战全解

文章目录

关于html的一些介绍
前端环境的搭建
html
- html常见标签

关于html的一些介绍

浏览器中按F12能看到当前页面的前端代码

--其中elements是查看标签结构 console是查看控制台 network是查看前后端交互过程
vscode里面创建.html文件然后输入!再按Tab就能给你快速生成一个框架:
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>
  
</body>
</html>
<!DOCTYPE html>：这是文档类型声明，写在 HTML 文件的最开头，作用是告诉浏览器当前文件遵循 HTML5 标准，让浏览器以标准模式渲染页面

<html lang="en">HTML 的根标签，lang属性用于声明页面的主要语言。lang="en"表示页面为英文页面，浏览器会根据这个属性判断是否提供翻译提示；中文网站通常会改为lang="zh-CN"。

name="viewport"：指定该 meta 标签的作用是定义页面的 "视口"（即设备屏幕上显示网页的可视区域）。

width=device-width：让页面宽度自动适配设备屏幕宽度，避免手机端页面显示不全、需要横向滑动的问题。

initial-scale=1.0：设置页面加载时的初始缩放比例为 1（不放大也不缩小），保证页面以原始大小正常显示。
引申:以后需要图标图片可以去 https://www.iconfont.cn/ 找

前端环境的搭建

用vscode的话直接创建.html结尾的文件就行了
关于vscode里面的前端插件推荐:

Auto Rename Tag:自动同步修改成对的 HTML 标签

view-in-browser:快速在浏览器中打开本地 HTML 文件

Live Server:启动本地开发服务器 + 页面自动刷新(就不用按F5或者重新进入才能刷新了)
关于前端代码的调试:F12去console然后shift+ctrl+r

html

html标签:eg:<body>hello<body>

标签名 (body) 放到 < > 中

大部分标签成对出现. <body> 为开始标签，</body> 为结束标签.

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

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

开始标签中可能会带有 "属性"

标签的层次关系有:兄弟关系和父子关系
html 复制代码
<html>
    <head>
        <title>第一个页面</title>
    </head>
    <body>
        hello world
    </body>
</html>
head 和 body 是 html 的子标签

title 是 head 的子标签. head 是 title 的父标签.

head 和 body 之间是兄弟关系.
html文件的基本结构:
html 复制代码
<html>
    <head>
        <title>第一个页面</title>
    </head>
    <body>
        页面中显示的内容
    </body>
</html>
html 标签是整个 html 文件的根标签 (最顶层标签)

head 标签中写页面的属性.

body 标签中写的是页面上显示的内容

title 标签中写的是页面的标题

html常见标签

注释标签:<!-- 我是注释内容 --> --也可以通过ctrl+/来进行或取消注释

--css的话是//
标题标签:h1-h6有六个从 h1 - h6. 数字越大，字体越小和越细
html 复制代码
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>

段落标签:
html 复制代码
<p>这是一个段落</p>
换行标签:（这是个单标签）
html 复制代码
下面会换行<br/>
这俩的区别:段落标签的那种会有明显的间隔空白，换行标签没有
关于文本的排版:

1.会自动根据浏览器宽度来决定排版(多久会迫不得已换行显示)

2.html内容首位处的换行和空格均无效

3.html文本中直接输入换行显示出来其实只是一个空格

4.html文本中输入多个空格显示出来只有一个空格
引申:html文本中，有些字符必须要打成转移字符才能正确显示:

比如:空格，< > &

空格需要 才能用于打出连续的空格

<才能显示< >才能显示> &才能显示&
格式化标签：
html 复制代码
<strong>strong 加粗</strong>
<b>b 加粗</b>

<em>倾斜</em>
<i>倾斜</i>

<del>删除线</del>
<s>删除线</s>

<ins>下划线</ins>
<u>下划线</u>

图片标签:
html 复制代码
<img src="rose.jpg" alt="鲜花" title="这是一朵鲜花" width="500px" height="800px" border="5px">
src是必须带上的,里面填相对路径或者绝对路径或者图片的url

其他属性可填可不填:

alt: 替换文本。图片加载失败时会才会显示这个文本

title: 提示文本。鼠标放到图片上，就会有提示.

width/height: 控制宽度高度。高度和宽度一般改一个就行，另外一个会等比例缩放。否则就会图片失衡.

border: 边框，参数是宽度的像素。但是一般使用 CSS 来设定.

--属性之间用空格(多个空格也行)或换行分割

--属性之间不分先后顺序
超链接标签:(标签中间必须有文案/图片，不然a标签的宽度为0，根本点不了超链接)
html 复制代码
<a href="http://www.baidu.com" target="_blank">百度</a>
href: 必须具备，表示点击后会跳转到哪个页面.
href后面可以带的链接有:

1.外部链接:eg:http://www.baidu.com

2.网页内部的链接(写相对路径)

3.空链接:eg:#

4.下载链接(点击后就直接触发下载):eg:<a href="test.zip">下载文件</a>，这样就会直接下载当前目录下的test.zip文件

5.网页元素标签:<a href="http://www.sogou.com"> <img src="rose.jpg" alt=""> </a>，这样的话，点击这个照片就会自动跳转到那个链接

6.锚点链接:点击后跳转到当前页面的指定位置
html 复制代码
<a href="#one">第一集</a>
<a href="#two">第二集</a>
<a href="#three">第三集</a>

<p id="one">
    第一集剧情<br>
    第一集剧情<br>
    ...
</p>
<p id="two">
    第二集剧情<br>
    第二集剧情<br>
    ...
</p>
<p id="three">
    第三集剧情<br>
    第三集剧情<br>
    ...
</p>
想让能点击但是不能跳转的话填:<a href="javascript:void(0);"> 或者 <a href="javascript:;">
target: 打开方式。默认是 _self. 如果是 _blank 则用新的标签页打开.

默认的超链接颜色:

没有访问过这个超链接的话是蓝色；已经访问过了的话是紫色；鼠标放上去的话是红色
表格标签:
html 复制代码
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="500">
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>10</td>
    </tr>
    <tr>
        <td>李四</td>
        <td colspan="2">女</td>
        <td>11</td>
    </tr>
</table>
table 标签：表示整个表格

table标签的属性有:

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

border 表示边框. 1 表示有边框 (数字越大，边框越粗), "" 表示没边框.

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

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

width / height: 设置尺寸.

tr: 表示表格的一行

td: 表示一个单元格

合并单元格:

跨行合并: rowspan="n"

跨列合并: colspan="n"

跨列合并，左侧是目标单元格；跨行合并，上方是目标单元格

th: 表示表头单元格。会居中加粗

thead: 表格的头部区域 (注意和 th 区分，范围是比 th 要大的)

tbody: 表格的主体区域.
列表标签:

无序列表 ul li

有序列表 ol li

自定义列表 dl (总标签) dt (小标题) dd (围绕标题来说明)

ul/ol 中只能放 li 不能放其他标签，dl 中只能放 dt 和 dd

li 中可以放其他标签.
html 复制代码
<h3>无序列表</h3>
<ul>
    <li>这是无序列表</li>
</ul>

<h3>有序列表</h3>
<ol>
    <li>这是有序列表</li>
</ol>

<h3>自定义列表</h3>
<dl>
    <dt>这是自定义列表</dt>
    <dd>1</dd>
    <dd>2</dd>
    <dd>3</dd>
</dl>

表单标签:

表单标签分为两个部分:

表单域：包含表单元素的区域。重点是 form 标签.
html 复制代码
form标签:描述了要把数据按照什么方式，提交到哪个页面中
<form action="test.html">
    ... [form 的内容]
</form>
表单控件：输入框，提交按钮等。重点是 input 标签
关于input标签:

他的属性:

type（必须有）：取值种类很多，如 button、checkbox、text、file、image、password、radio 等。
文本框:
html 复制代码
<input type="text">
密码框:
html 复制代码
<input type="password">
单选框:(单选框之间必须有相同的name属性，才能实现多选一的效果)
html 复制代码
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女
复选框:
html 复制代码
<input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox"> 打游戏
普通按钮:
html 复制代码
<input type="button" value="我是个按钮">
提交按钮:提交按钮必须放到 form 标签内。点击后会尝试给服务器发送数据
Html 复制代码
<form action="test.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
</form>
清空按钮:清空按钮必须放在 form 中。点击后会将 form 内所有的用户输入内容重置。
html 复制代码
<form action="test.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
    <input type="reset" value="清空">
</form>
选择文件:点击选择文件，会弹出对话框，选择文件
html 复制代码
<input type="file">
name：给 input 起名字，尤其是对于单选按钮，具有相同 name 才能实现 "多选一"。

value：input 中的默认值。

checked：默认被选中（用于单选按钮和多选按钮）。

maxlength：设定输入内容的最大长度。
label标签：搭配 input 使用，点击 label 也能选中对应的单选 / 复选框
for 属性：指定当前 label 和哪个相同 id 的 input 标签对应（此时点击才是有效的）。
html 复制代码
<label for="male">男</label> <input id="male" type="radio" name="sex">

select标签:(下拉菜单)
html 复制代码
<select>
    <option>--请选择年份--</option>
    <option>1991</option>
    <option>1992</option>
    <option>1993</option>
    <option selected="selected">1994</option>
    <option>1995</option>
</select>
option 中定义 selected="selected" 表示默认选中,如果没有定义这个的话，就是默认选中第一个选项
textarea标签:多行文本输入框
html 复制代码
<textarea rows="3" cols="50">

</textarea>

无语义标签:div(分割)和span(跨度)

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>div&span</title>
</head>
<body>
<div>
    <span>咬人猫</span>
    <span>咬人猫</span>
    <span>咬人猫</span>
</div>
<div>
    <span>兔总裁</span>
    <span>兔总裁</span>
    <span>兔总裁</span>
</div>
<div>
    <span>阿叶君</span>
    <span>阿叶君</span>
    <span>阿叶君</span>
</div>
</body>
</html>