HTML入门

在这里插入图片描述

注意，水文自用，//并非HTML注释语言，（<！–XXX->）才是

初始文件结构

Vscode中！+ tab

<!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>

右键 open with live server 在浏览器打开

注释：Ctrl + /

<!--注释内容-->

常用文本标签

六个标题标签：
<h1>标题内容</h1>
段落标签：
<p>段落标签</p>
文本加粗：
<b>加粗</b> 或 <strong>
斜体：i
下划线：u
删除线：s
<p>更改文本样式：<b>字体加粗</b>、<i>斜体</i>、<u>下划线</u>、<s>删除线</s></p>无序列表：
<ul><li>无序列表元素1</li><li>无序列表元素2</li>
</ul>有序列表：
<ol><li>无序列表元素1</li><li>无序列表元素2</li>
</ol>表格标签：
<table border="边框宽度"> //加入表格边框<tr> //表格行<th>列标题 1</th>  //列标题<th>列标题 2</th><th>列标题 3</th></tr><tr><td>元素 1</td> //表格数据<td>元素 2</td><td>元素 3</td></tr>
</table>
换行标签：br
下划线标签：hr
大于号：&gt
小于号：&it
空格：&nbsp
引号：&quot

属性

定义元素的行为和外观

基本语法：

<开始标签 属性名=“属性值”>  //标识+定义

常用属性：

class 定义类名
id 定义元素唯一id
style 规定单个元素的行内样式

使用：

a标签：创建链接到其他网页位置
<a href="网页地址/URL路径/邮箱地址">超链接名称</a>
target：定义链接打开方式_self链接在当前窗口打开_blank链接在新标签页打开_parent链接在父窗口打开_top链接在顶层窗口打开
<a href="网页链接" target="_blank">超链接名称</a>图片标签：img，可定义图片显示长宽大小
src:图片路径 alt：当图片无法打开时显示的自定义文字
<img src="113124479_p0.jpg" alt="无法显示" width="150" height="200">

区块(在页面中的显示情况)

块元素：

组织和布局页面，如段落、标题、列表、表格等，用于创建页面

块元素通常占据整行，页面呈现独立内容块

行内元素：

文本部分应用样式，如超链接、加粗等强调文本作用；

只占据文本所需宽度，非整行；

常用标签：

div标签，容器块，无语义，组织网页内容
导航栏：
定义nav类的导航标签<div class="nav"><a href="#">链接1</a><a href="#">链接2</a></div>
<!-- 定义内容类标签 --><div class="content"><h1>标题</h1><p>内容</p><p>内容</p></div><span>标签，行内元素
<span>链接点击这里<a href="#">链接</a></span>

表单

form标签：表单中的容器，类似创建表格
<form><label for="username">用户名：</label> //label仅限于和input对应使用<input type="text" id="username" placeholder="请输入用户名"> //单标签input，type规定了input显示元素类型，text为文本框，id规定文本框名称，placeholder填写字段提示，value预填写<br><br><label for="pwd">密码：</label> //for标签绑定input元素，绑定元素需要id，id是唯一的<input type="password" id="pwd" placeholder="请输入密码"> //password类型，输入加密<br><br><label>性别：</label>//radio 单选框模式<input type="radio" name="gender"> 男  //规定name属性gender单向选择<input type="radio" name="gender"> 女<input type="radio" name="gender"> 其他<br><br><label>爱好：</label><input type="checkbox" name="hobby"> 唱  //checkbox 多选对应属性值<input type="checkbox" name="hobby"> 跳<input type="checkbox" name="hobby"> rap<input type="checkbox" name="hobby"> 篮球<br><br><hr><img src="113124479_p0.jpg" alt="无法显示" width="150" height="200"><hr><input type="submit" value="上传">  //显示提交按钮，通过form提交到
</form><form action="#"></form> //提交按钮时，通过后端提交到某API