1、什么是HTML
HTML指的是 超文本标记语言 它是用来描述网页的一种语言，它不是编程语言，而是一种标记语言，可以加载图片，声音，动画等内容，可以跳转文档
2、Wed 标准
web 标准是有W3C组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织
2.1、为什么许需要web标准
浏览器不同，它们显示的页面或者排版就有些许差异
2.2、Web标准的构成
主要包括：结构（HTML）、表现（CSS）、行为（javascript） 三个方面
| 标准 | 说明 |
|---|---|
| 结构 | 用于对网页元素进行整理和分类，主要是html |
| 表现 | 用于设置网页元素的版式、颜色、大小等外观样式，CSS |
| 行为 | 是指网页模型的定义以及交互的编写，JavaScript |
3、HTML语法规范
骨架标签
<html>
<head>
<title>我是 骨架标签</title>
</head>
<body>
主体部分
<br /><!--单标签--换行-->
</body>
</html>
使用vs code生成的模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个页面</title>
</head>
<body>
哈哈哈哈哈哈
</body>
</html>
4、标签
4.1、标题标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个页面</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
4.2、换行标签 文本格式化标签 div标签 span标签
换行标签：
或者
文本格式化标签：加粗 斜体 下划线 等效果
<div> 和 <span> 是一个盒子，用来装饰内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>4.2</title>
</head>
<body>
<strong>加粗</strong> <b>或者</b> <br>
<em>倾斜</em> <i>或者</i> <br>
<del>删除线</del> <s>或者</s> <br>
<ins>下划线</ins> <u>或者</u> <br>
<div>div盒子1</div>
<div>div盒子2</div>
<div>div 占一整行</div>
<span>span 1</span>
<span>span 2</span>
<span>span 不会占一行</span>
</body>
</html>
4.3、图像标签和路径
图像标签：<img /> 必备属性 src
src路径分为 绝对路径和相对路径
=相对路径是相对于 .html文件而言的，图片跟html在一个目录，src可以直接写<img src=“xxx.png” />
绝对路径：第一种是相对于自己电脑而言的，第二种是网上的图片，选择图片右键->属性得到的路径是绝对路径
<img />的一些其他属性
| 属性 | 说明 |
|---|---|
| src | 图片路径 必要 |
| alt | 当图片不能正常显示时，直接显示alt内容 |
| title | 提示文本，鼠标放在图片上时，显示的文字 |
| width | 像素px 设置图片的宽度 |
| height | 像素px 设置图片的高度 |
| border | 像素px 设置图像边框粗细 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图像标签</title>
</head>
<body>
<img src="img.png" alt="唐老鸭" title="唐老鸭" width="500" border="15" />
<!-- 下面的是绝对路径 -->
<img src="https://img1.baidu.com/it/u=816589057,1894044968&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=1083" alt="唐老鸭" title="唐老鸭" width="100" border="15" />
</body>
</html>
4.4、超链接标签
在 HTML 中，<a>标签用于定于超链接，作用是 从一个页面跳转到另一个页面
必要元素：href=".html文件"
<a href=“跳转地址” target=“目标窗口弹出方式”> 文本或者图像 </a>
分类：
| 类型 | 说明 |
|---|---|
| 外部链接 | 比如 百度 <a href=“http://www.baidu.com” target="_blank">外部链接 百度</a> |
| 内部链接 | 网站内部页面之间的相互连接 比如 <a href=“index.html” target="_blank">内部链接 节点</a> |
| 空链接 | 使用’#‘代替 <a href="#">空链接</a> |
| 下载链接 | href中填写的下载文件路径，是相对于html文件的相对路径 |
| 网页元素链接 | 可以是文本、图像、表格、视频、音频等等等等 |
| 锚点链接 | 点击某个链接，可以快速定位到网页中的某个位置 举例：设置href属性值为 #id_name 的形式 <a href="#GPS">定位位置</a> 找到目标标签，添加一个 id 属性 <p id=“GPS”>就是这里</p> |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>超链接</title>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">外部链接 百度</a>
<br>
<a href="index.html" target="_blank">内部链接 节点</a>
<br>
<a href="#" target="_blank">空链接</a>
<br>
<a href="xxx.zip" target="_blank">下载链接 href填写文件地址</a>
<br>
<p>网页元素超链接</p>
<a href="http://www.baidu.com" target="_blank"><img src="img.png"></a>
<br>
<a href="#GPS">锚点定位</a>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br>
<p id="GPS">锚点定位就是这里</p>
</body>
</html>
4.5、特殊字符
空格
⁢ 小于号
> 大于号
4.6、表格标签
表格主要用于显示、展示数据。可以让让数据更加规整，有更好的可读性
表格结构标签：thead 将头部包含 tbody 将非头部包含
table是表格整体
th 是表头
tr 是行
tb是内容
表格table的属性：
| 属性 | 属性值 | 描述 |
|---|---|---|
| align | left、center、right | 规定表格元素的对其方式 |
| border | 1 或者 “” | 表格是否有边框，默认为""，没有边框 |
| cellpadding | 像素 | 规定表格边框与表格内容直接的距离，默认1px |
| cellspacing | 像素 | 表格和表格之前的距离 默认2px |
| width | 像素或者百分比 | 规定表格宽度 |
| height | 像素或者百分比 | 表格高度 |
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表格</title>
</head>
<body>
<table align="center" border="1" cellpadding="20" cellspacing="0" width="300px" height="500">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>大锤</td>
<td>男</td>
<td>34</td>
</tr>
<tr>
<td>二毛</td>
<td>男</td>
<td>78</td>
</tr>
<tr>
<td>三傻</td>
<td>女</td>
<td>787</td>
</tr>
</tbody>
</table>
</body>
</html>
合并单元格
跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”
合并之后需要将后面的 列 或者 行 进行删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表格</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表格</title>
</head>
<body>
<table align="center" border="1" cellpadding="20" cellspacing="0" width="300px" height="500">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>大锤</td>
<td colspan="2">男</td>
</tr>
<tr aria-rowspan="2">
<td>二毛</td>
<td>男</td>
<td>78</td>
</tr>
</tbody>
</table>
</body>
</html>
</body>
</html>
4.7、列表标签
列表是用来布局的
有序列表、无序列表、自定义列表
无序列表
<ul>
<li>列表项1</li>
<li>列表项2</li>
......
</ul>
有序列表
<ol>
<li>列表项1</li>
<li>列表项2</li>
......
</ol>
无序列表
<dl>
<dt>特色服务</dt>
<dd>礼包</dd>
<dd>随换吗</dd>
......
</dl>
4.8、表单标签
在html中，一个完整的表单是由 表单域、表单元素、提示信息 3部分组成
格式：
<form action=“URL地址” method=“提交方式” name=“表单域名称”>各种表单元素控件</form>
表单控件<input>
<input type="">
input 中的type的种类有：
| 类型 | 说明 |
|---|---|
| text | 文本框 输入 |
| button | 按钮 |
| radio | 单选按钮 可以多选一 |
| checkbox | 复选框 |
| submit | 提交按钮 |
| reset | 重置按钮，清除表单中的所有数据 |
| image | 定义图像形式的提交按钮 |
| hidden | 定义隐藏的输入字段 |
| file | 定义输入字段和”浏览“按钮，供文件上传 |
input 其他属性值：
| 属性 | 说明 |
|---|---|
| value | 自定义输入，规定input的值 |
| name | 自定义输入，规定input的值 |
| checked | 规定此input元素首次加载时应该被选中，常用于单选框、复选框 |
| maxlength | 正整数，规定输入字段中字符的最大长度 |
<label>标签
label标签用于绑定一个表单元素，当点击label标签时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验
<label for=“sex”>男</label>
<input type=“radio” name=“sex” id=“sex”/>
表单控件–下拉表单<select>
语法规范
<form>
<select name="exm" id="lizi">
<!-- selected="selected" 默认选择姓名 -->
<option value="name" selected="selected">姓名</option>
<option value="sex">性别</option>
<option value="age">年龄</option>
</select>
</form>
表单控件–文本域标签<textarea>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css</title>
</head>
<body>
<!-- cols表示每行显示多少字符 rows表示显示行数 -->
<textarea name="ziwojieshao" id="jieshao" cols="30" rows="10">自我介绍
</textarea>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
