文章目录
前言
HTML是超文本标记语言（Hyper Text Markup Language），HTML是用来标记Web信息如何展示以及其他特性的一种语法规则。HTML在Web迅猛发展的过程中起着重要作用，有着重要的地位。
一、HTML标签（上）
1.1标签语法规范
1.1.1用尖括号将关键词括起来。
- 单标签
<br />
- 双标签
<html></html>
1.1.2关系
- 父子关系
<head></head>与<title></title>
<head>
<title>我是标题</title>
</head>
-
并列关系
<head></head>与<body></body>
<head>
<title>我是标题</title>
</head>
<body>
<p>我在主体部分</p>
</body>1.2基本结构标签
| HTML标签 | <html></html> |
| 头部 | <head></head> |
| 标题 | <title></title> |
| 主体 | <body></body> |
<html>
<head>
<title>我是标题</title>
</head>
<body>
<p>我在主体部分</p>
</body>
</html>
1.3开发工具
1.3.1使用软件
- Visual Studio Code
step1: 创建一个HTML文件，并保存。（此处省略图示）
step2: 输入英文叹号，点击出现的第一行，自动出现骨架标签。
- Dreamweaver
step1: 创建一个HTML文件，并保存。（此处省略图示）
step2: 打开HTML文件，自动出现骨架标签。
1.3.2插件下载
针对Visual Studio Code
| 插件名称 | 功能 |
| Chinese | 语言，中文(简体) |
| Auto Rename Tag | 用来自动重命名标签的。修改标签时，只需手动改变起始标签的名字，结束标签会跟着自动修改 |
| One Dark Pro | 用于更换主题配色 |
| 设置-格式化 | 系统自带。进行粘贴、保存等功能设置。 |
| open in browser | 在浏览器中打开。 |
| Live Server | 可在浏览器中实时浏览。 |
| vscode-icons | 通过文件的图标就可以快速知道文件的类型 |
| Easy LESS | 编译less并输出css文件 |
| 会了吧 | 翻译代码里的英文 |
1.3.3快捷键记忆
| 快捷键 | 功能 |
| shift+alt+向下箭头 | 复制一行 |
| ctrl+d | 选择多次出现的单词 |
| ctrl+alt+上/下 | 多光标定位 |
| ctrl+h | 替换全部 |
| ctrl+g | 定位到某一行 |
| shift+alt+拖动鼠标 | 选中区块 |
| ctrl+加/减 | 放大、缩小代码 |
| ctrl+/ | 单行注释 |
| shift+alt+a | 多行注释 |
除了上述部分快捷键，还可自定义快捷键，方便后续代码的编写。
1.4常用标签
1.4.1标题标签
- 标签语义：作为标题使用，依重要性递减。
- 特点：
（a）字变粗，字号变大；
（b）独占一行；
（c）共六级选择。
- 语法格式
<h1>--<h6>
- 代码展示
<body>
<!-- 标题标签 -->
<h1>我是h1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
<h4>我是h4</h4>
<h5>我是h5</h5>
<h6>我是h6</h6>
</body>
1.4.2段落和换行标签
（1）段落标签<p></p>
- 标签语义：将文档内容分为若干段落
- 特点：
（a）一个段落，根据浏览器窗口自动换行；
（b）段落间有空隙。
（2）换行标签<br />
- 标签语义：强制换行
- 特点：
（a）单标签；
（b）开始新的一行，与段落标签不同，段落标签会使段落垂直间隔显示。
（3）代码展示
<body>
<p>我是段落标签一</p>
<p>我是段落标签二</p>
我是换行标签一
<br />
我是换行标签二
</body>
1.4.3文本格式标签
- 标签语义：突出文字重要性，比普通文字更重要
- 文本格式标签类型
| 加粗 | <strong></strong>或<b></b> |
| 倾斜 | <em></em>或<i></i> |
| 删除线 | <del></del>或<s></s> |
| 下划线 | <ins></ins>或<u></u> |
- 代码展示
<body>
<p>我是普通文字</p>
<p>我是<strong>加粗</strong>文字</p>
<p>我是<b>加粗</b>文字</p>
<p>我是<em>倾斜</em>文字</p>
<p>我是<i>倾斜</i>文字</p>
<p>我是<del>有删除线</del>文字</p>
<p>我是<s>有删除线</s>文字</p>
<p>我是<ins>有下划线</ins>文字</p>
<p>我是<u>有下划线</u>文字</p>
</body>
1.4.4div和span标签
- 标签语义：无标签语义，为盒子，装内容。
- 特点：
（a）div用于布局，独占一行，大盒子；
（b）span用于布局，可一行多个span，小盒子。
- 代码展示
<body>
<div>我是大盒子1</div>
<div>我是大盒子2</div>
<div>我是大盒子3</div>
我是<span>小盒子1</span>
<span>小盒子2</span>
<span>小盒子3</span>
</body>
1.4.5图像标签和路径
（1）图像标签<img />
- 语法格式
<img src="图像地址" alt="替代文字" title="提示文字" width="图像宽度" height="图像高度" />
- 注意点
（a）属性在标签名后面；
（b）属性元素无前后顺序，但以空格分隔开；
（c）属性=“属性值”为键值对形式。
（2）路径
- 目录文件夹：普通文件夹。
- 根目录：目录文件夹的第一层。
- 相对路径：引用文件所在位置，图片相对HTML页面的位置。
- 绝对路径：电脑中的位置，或完整的网络地址。
- 代码展示：
<body>
<h1>相对路径：</h1>
<h2>同一级路径：</h2>
<img src="同一级.png" title="同一级" />
<h2>下一级：</h2>
<!-- 使用/格式 -->
<img src="下一级/下一级.png" title="下一级" />
<h2>上一级：</h2>
<!-- 使用../格式 -->
<img src="../上一级.png" title="上一级" />
<h1>绝对路径：</h1>
<!-- 不建议使用 -->
<img src="D:\AStudy\大二下\web\pink\HTML标签\HTML标签（上）\案例\图像标签和路径\同一级.png" title="绝对路径" />
</body>1.4.6超链接标签
- 语法格式
<a href="url" target="目标文件位置" title="超链接的文字注释" id="锚点">内容</a>
- 链接类型
| 类型 | 语法格式 |
| 外部链接 | <a href="绝对路径"></a> |
| 内部链接 | <a href="相对路径"></a> |
| 空链接 | <a href="#"></a> |
| 下载链接 | 地址为文件.exe或压缩包.zip |
| 网页元素链接 | <a href="绝对路径">网页元素</a> |
| 锚点链接 | 方法一： 建立锚点：<a name="锚点名称">内容</a> 链接锚点： （1）同一文件中：<a href="#锚点名称">内容</a> （2）其他文件中：<a href="链接到的网页的地址#锚点名称">内容</a> 方法二： 建立锚点：<a href="#锚点名称">内容</a> 链接锚点：找到目标位置标签，设置id="锚点名称"。例如<h3 id="锚点名称">内容</h3> |
- 代码展示
<!--方法二-->
<h1>李白</h1>
<h3>基本介绍</h3>
<h3>著名作品</h3>
<h3><a href="#生平经历">生平经历</a></h3>
<!-- 锚点链接 -->
<p></p>
<h5>基本介绍</h5>
<p>李白，是一位著名的诗人。。。。。</p>
<p></p>
<h5>著名作品</h5>
<p>《静夜思》......</p>
<p></p>
<h5 id="生平经历">生平经历</h5>
<!-- 锚点链接 -->
<p>他不爱慕荣华富贵，一生痴迷于诗歌创作。。。</p>
1.5注释和特殊符号
- 注释：<!--注释内容-->
| 注释 | 快捷键 |
| 单行注释 | ctrl+/ |
| 多行注释 | shift+alt+a |
- 特殊符号
| 类型 | 特殊符号 |
| 空格 | |
| 小于 | < |
| 大于 | > |
二、使用步骤
2.1表格
- 基本语法格式
<table>
<tr>
<td>单元格内容1</td>
<td>单元格内容2</td>
<!-- 更多单元格 -->
</tr>
<!-- 更多行 -->
</table>
- 功能：用于显示和展示数据
- 表格标签
| 标签 | 描述 |
| <table> | 定义表格 |
| <caption> | 定义表格标题，每个表格只能含有一个标题 |
| <th> | 定义表格内的表头单元格，居中，粗体 |
| <tr> | 定义表格的行 |
| <td> | 定义表格单元格，包含在<tr>标签中，左对齐，普通文本 |
| <thead> | 定义表格的表头 |
| <tbody> | 定义表格的主体 |
| <tfoot> | 定义表格的页脚 |
| <col> | 定义用于表格列的属性 |
- 表格属性：align等属性写入table标签，不常用，一般用CSS设置。
- 跨行和跨列设置
（1）基本语法格式
<table>
<tr>
<td rowspan="所跨行数">单元格内容</td>
<td rcolspan="所跨列数">单元格内容</td>
</tr>
</table>
（2）合并显示三部曲：
（a）确定跨列/行显示
（b）找到目标单元格
（c）删除多余的单元格
- 代码展示：
<body>
<table border="1">
<thead>
<th>
表头1
</th>
<th>
表头2
</th>
<th>
表头3
</th>
<th>
表头4
</th>
</thead>
<tbody>
<tr>
<td colspan="2">
11+12
</td>
<td>
13
</td>
<td rowspan="2">
14+24
</td>
</tr>
<tr>
<td>
21
</td>
<td>
22
</td>
<td>
23
</td>
</tr>
</tbody>
</table>
</body>2.2列表
- 功能：用于布局
- 基本语法
<!-- 无序列表 -->
<ul>
<li>列表项1</li>
<li>列表项2</li>
<!-- 更多列表项 -->
</ul>
<!-- 有序列表 -->
<ul>
<li>列表项1</li>
<li>列表项2</li>
<!-- 更多列表项 -->
</ul>
<!-- 自定义列表 -->
<dl>
<dt>
<dd>项目1</dd>
<dd>项目2</dd>
<!-- 更多项目 -->
</dt>
</dl>
- 注意点
| 列表类型 | 提示 | |
| 无序列表 | <ul></ul>标签中只能放<li></li> | |
| <li></li>标签为一个容器，可以存放其他所有元素 | ||
| 有序列表 | <ol></ol>中只能放<li></li> | |
| <li></li>标签为一个容器，可以存放其他所有元素 | ||
| 自定义列表 | <dl></dl>中只能放<dt></dt> | |
| <dt></dt>中只能放<dd></dd> | ||
| dt,dd无个数限制，一般为一个dt对多个dd | ||
- 代码展示：
<body>
<!-- 无序列表 -->
<p>我爱吃的食物：</p>
<ul>
<li>
火锅
</li>
<li>
炸鸡
</li>
<li>
米线
</li>
</ul>
<!-- 有序列表 -->
<p>每天起床做的事情：</p>
<ol>
<li>
洗漱
</li>
<li>
吃早饭
</li>
<li>
上学
</li>
</ol>
<!-- 自定义列表 -->
<dl>
<dt>
每天课程：
</dt>
<dd>
数据库
</dd>
<dd>
数理统计
</dd>
<dd>
毛概
</dd>
</dl>
</body>2.3表单
- 功能：收集用户信息
- 表单标签
<form action="url地址" method="提交方式" name="表单名称" target="目标页面" >
各类表单控件
</form>
- 表单域
<input name="表单元素名称" type="类型" value="值" size="显示宽度" maxlength="输入的最大字符长度" checked="是否选中" />
（1）文本框
<input type="text" name="......" size="......" maxlength="......" value="......" />
密码框
<input type="password" name="......" size="......" maxlength="......" value="......" />
（2）单选框（组中选项的name相同）
<input type="radio" name="......" size="......" maxlength="......" value="......" />
复选框
<input type="checkbox" name="......" size="......" maxlength="......" value="......" />
（3）文件域
<input type="file" />
隐藏域
<input type="hidden" />
（4）下拉列表和列表框
<select name="指定列表名称" size="行数" mutiple="可将下拉列表变为列表框">
<option selected="selected">选项1</option>
<option>选项2</option>
<option>选项3</option>
......
</select>
（5）多行文本框：用于输入较长内容的表单对象。
<textarea name="..." cols="..." rows="..."></textarea>
- 表单按钮
<input type="submit" value="提交按钮" name="button" />
<input type="reset" value="重置按钮" name="reset" />
<input type="button" value="普通按钮" name="cancle" />
- 代码展示：
<body>
<form>
<!-- 文本框 -->
用户名
<input type="text" name="text" />
<br />
<!-- 密码框 -->
密码
<input type="password" name="password" />
<br />
<!-- 单选框按钮 -->
<!-- name一致，实现单选 -->
姓名
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
<br />
<!-- 复选框按钮 -->
爱好
<input type="checkbox" name="checkbox" checked="checked" />羽毛球
<input type="checkbox" name="checkbox" />篮球
<input type="checkbox" name="checkbox" />足球
<br />
<!-- select标签 -->
学历
<select>
<option selected="selected">本科</option>
<option>博士</option>
<option>研究生</option>
</select>
<br />
<!-- label标签中for属性值与input标签中id属性值相同 -->
<!-- 实现更多交互 -->
<label for="number">
密码
<input type="password" id="number" />
<br />
</label>
<!-- 多行文本输入 -->
留言板
<br />
<textarea>
请输入您的留言！
</textarea>
</form>
</body>2.4查阅文档
| 查询资料网站 | 网址 |
| 百度 | 百度一下，你就知道 |
| W3C | http://www.w3school/ |
| MDN | MDN Web Docs |
2.5综合案例
<body>
<form>
<table>
<th>青春不常在，抓紧谈恋爱</th>
<tr>
<td>
性别
</td>
<td>
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
</td>
</tr>
<tr>
<td>
生日
</td>
<td>
<select>
<option selected="selected">--请选择年--</option>
<option>2008</option>
<option>2009</option>
</select>
<select>
<option selected="selected">--请选择月--</option>
<option>1</option>
<option>2</option>
</select>
<select>
<option selected="selected">--请选择日--</option>
<option>12</option>
<option>5</option>
</select>
</td>
</tr>
<tr>
<td>
所在地区
</td>
<td>
<label>
<input type="text" name="text" value="北京思密达" />
</label>
</td>
</tr>
<tr>
<td>
婚姻状况
</td>
<td>
<input type="radio" name="situation" />未婚
<input type="radio" name="situation" />已婚
<input type="radio" name="situation" />离婚
</td>
</tr>
<tr>
<td>
学历
</td>
<td>
<label>
<input type="text" name="text" />幼儿园
</label>
</td>
</tr>
<tr>
<td>
喜欢的类型
</td>
<td>
<input type="checkbox" name="checkbox" />妩媚的
<input type="checkbox" name="checkbox" />可爱的
<input type="checkbox" name="checkbox" />小鲜肉
<input type="checkbox" name="checkbox" />老腊肉
<input type="checkbox" name="checkbox" />都喜欢
</td>
</tr>
<tr>
<td>
自我介绍
</td>
<td>
<textarea>
自我介绍
</textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<label>
<input type="submit" value="免费注册" />
</label>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" />我同意注册条款和会员加入标准
</td>
</tr>
<tr>
<td></td>
<td>
<a href="#">我是会员，立即登陆</a>
</td>
</tr>
<tr>
<td></td>
<td>
<h2>我承诺</h2>
<ul>
<li>年满18岁，单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
</form>
</body>总结
以上为HTML基础部分，能够为HTML的初学者提供一定的学习帮助！
8603
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
