Html负责页面元素和内容（结构） ；css 负责网页元素的外观和位置等页面样式（表现） ; javaScript负责页面的动态效果（行为）
html骨架：
<html>
<head>
<title>网页标题</title>
</head>
<body>
网页主体内容
</body>
</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>快捷键：！+ 回车
下载插件：open in browser
html语法
注释：ctrl + /
<!-- -->
ctrl + / 注释取消
html标签结构：
双标签： （开始标签 ）加粗 (结束标签)
单标签： 换行
html标签的关系：
父子关系（嵌套关系）
兄弟关系（并列关系）
html标签学习
排版标签
标题标签
<body>
<h1>这是1级标题</h1>
<h2>这是2级标题</h2>
<h3>这是3级标题</h3>
<h4>这是4级标题</h4>
<h5>这是5级标题</h5>
<h6>这是6级标题</h6>
</body>
段落标签
<body>
<p>这是段落</p>
</body>换行标签
<body>
<p>这是段落<br>标签</p>
</body>水平线标签
<body>
<p>这是段落<hr>标签</p>
</body>文本格式化标签
加粗、下划线、倾斜、删除线等效果
<body>
<b>加粗</b>
<u>下划线</u>
<i>倾斜</i>
<s>删除线</s>
</body>法一：
| 标签 | 说明 |
|---|---|
| b | 加粗 |
| u | 下划线 |
| i | 倾斜 |
| s | 删除线 |
法二：
| 标签 | 说明 |
|---|---|
| strong | 加粗 |
| ins | 下划线 |
| em | 倾斜 |
| del | 删除线 |
媒体标签
图片标签
<body>
<img src="./向日葵.jpg" alt="替换文本" title="我是title的效果" width="200">
</body>图片标签的alt属性：
属性名：alt
属性值：替换文本
当图片加载失败时，才显示alt文本；当图片加载成功时，不会显示alt的文本
图片标签的title属性：
属性名：title
属性值：提示文本
当鼠标悬停时，才显示的文本
图片标签的width和height属性：
属性名：width和height
属性值：宽度和高度（数字）
如果只设置width或height中的一个，另一个没设置的会自动等比例缩放 (此时图片不会变形)
如果同时设置两个，设置不当图片变形
总：width和height属性只需要给出一个值，另一个等比例缩放，好处就是图片不变形
路径
场景：页面需要加载图片，需要先找到对应的图片
音频标签
audio + 回车
<body>
<audio src="./我超喜欢你.mp3" controls></audio>
</body>| 属性名 | 功能 |
|---|---|
| src | 音频的路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放（部分浏览器不支持） |
| loop | 循环播放 |
<body>
<audio src="./我超喜欢你.mp3" controls autoplay loop></audio>
</body>注意：音频标签目前支持三种格式：mp3、wav、ogg
视频标签
video + 回车
<body>
<video src="./video.mp4" controls muted></video>
</body>| 属性名 | 功能 |
|---|---|
| src | 视频的路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放（谷歌浏览器可以让视频自动播放，但必须是静音状态muted） |
| loop | 循环播放 |
注意：音频标签目前支持三种格式：mp4、webm、ogg
链接标签
a + 回车
<body>
<a href="https://www.baidu.com/">跳转到百度</a>
</body>注意：当开发网站初期，不知道跳到哪href的值就书写成#(空链接)
href作用：跳转的地址
链接标签的target属性：
属性名：target
属性值：目标网页的打开形式
取值 效果 _self 默认值，在当前窗口中跳转（覆盖原网页） _blank 在新窗口中跳转（保留原网页） <body> <a href="https://www.baidu.com/" target="_blank">百度</a> </body>
列表标签
无序列表
标签组成：
| 标签名 | 说明 |
|---|---|
| ul | 表示无序列表的整体，用于包裹li标签 |
| li | 表示无序列表的每一项，用于包含每一行的内容 |
显示特点：列表的每一项前默认显示圆点标识
注意：
ul标签中只允许包含li标签
li标签可以包含任意内容
ul + 回车 ；li + 回车
<body>
<h3>水果列表</h3>
<ul>
<li>榴莲</li>
<li>香蕉</li>
<li>苹果</li>
<li>橘子</li>
</ul>
</body>
有序列表
标签组成：
| 标签名 | 说明 |
|---|---|
| ol | 表示有序列表的整体，用于包裹li标签 |
| li | 表示有序列表的每一项，用于包含每一行的内容 |
显示特点：列表的每一项前默认显示序号标识
注意：
ol标签中只允许包含li标签
li标签可以包含任意内容
<body>
<h3>成绩排行榜</h3>
<ol>
<li>张三: 100</li>
<li>李四: 99</li>
</ol>
</body>
自定义列表
场景：在网页的底部导航中通常会使用自定义列表实现
标签组成：
| 标签名 | 说明 |
|---|---|
| dl | 表示自定义列表的整体，用于包裹dt/dd标签 |
| dt | 表示自定义列表的主题 |
| dd | 表示自定义列表的针对主题的每一项内容 |
显示特点：dd前会默认显示缩进效果
注意：
dl标签中只允许包含dt/dd标签
dt/dd标签可以包含任意内容
<body>
<dl>
<dt>帮助中心</dt>
<dd>账号管理</dd>
<dd>购物指南</dd>
</dl>
</body>
表格标签
基本标签：
| 标签名 | 说明 |
|---|---|
| table | 表格整体，可用于包裹多个tr |
| tr | 表格每行，可用于包裹td |
| td | 表格单元格，可用于包裹内容 |
<body>
<table>
<tr>
<td>姓名</td>
<td>成绩</td>
<td>评语</td>
</tr>
<tr>
<td>小哥哥</td>
<td>100分</td>
<td>小哥哥真帅气</td>
</tr>
<tr>
<td>小姐姐</td>
<td>100分</td>
<td>小姐姐真漂亮</td>
</tr>
</table>
</body>
相关属性：
| 属性名 | 属性值 | 效果 |
|---|---|---|
| border | 数字 | 边框宽度 |
| width | 数字 | 表格宽度 |
| height | 数字 | 表格高度 |
<body>
<table border="1" width="500" height="400">
<tr>
<td>姓名</td>
<td>成绩</td>
<td>评语</td>
</tr>
<tr>
<td>小哥哥</td>
<td>100分</td>
<td>小哥哥真帅气</td>
</tr>
<tr>
<td>小姐姐</td>
<td>100分</td>
<td>小姐姐真漂亮</td>
</tr>
</table>
</body>
表格标题和表头单元格标签：
| 标签名 | 名称 | 说明 |
|---|---|---|
| caption | 表格大标题 | 表示表格整体大标题，默认在表格整体顶部居中位置显示 |
| th | 表头单元格 | 表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示 |
注意：
caption标签书写在table标签内部
th标签书写在tr标签内部（用于替换td标签）
<body>
<table border="1" >
<caption><b>学生成绩单</b></caption>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
<tr>
<td>小哥哥</td>
<td>100分</td>
<td>小哥哥真帅气</td>
</tr>
<tr>
<td>小姐姐</td>
<td>100分</td>
<td>小姐姐真漂亮</td>
</tr>
</table>
</body>
表格结构标签（了解）：
| 标签名 | 名称 |
|---|---|
| thead | 表格头部 |
| tbody | 表格主体 |
| tfoot | 表格底部 |
注意：
表格结构标签内部用于包裹tr标签
表格结构标签可以省略
合并单元格：
跨行合并——垂直合并成一个；跨列合并——水平合并成一个
步骤：
通过左上原则，确定保留谁删除谁
-
上下合并—>只保留最上的，删除其他
-
左右合并—>只保留最左的，删除其他
给保留的单元格设置：跨行合并(rowspan)或跨列合并(colspan)
| 属性名 | 属性值 | 说明 |
|---|---|---|
| rowspan | 合并单元格的个数 | 跨行合并，将多行的单元格垂直合并 |
| colspan | 合并单元格的个数 | 跨列合并，将多列的单元格水平合并 |
<body>
<table border="1" >
<caption><b>学生成绩单</b></caption>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
<tr>
<td>小哥哥</td>
<td rowspan="2">100分</td>
<td >小哥哥真帅气</td>
</tr>
<tr>
<td>小姐姐</td>
<td>小姐姐真漂亮</td>
</tr>
<tr>
<td>总结</td>
<td colspan="2">郎才女貌</td>
</tr>
</table>
</body>
注意：只有同一个结构标签的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）
表单标签
input系列标签
| 标签名 | type属性值 | 说明 |
|---|---|---|
| input | text | 文本框，用于输入单行文本 |
<body>
<!-- 写什么就显示什么 -->
文本框：<input type="text">
</body>
常用属性：placeholder 占位符，提示用户输入内容的文本
| 标签名 | type属性值 | 说明 |
|---|---|---|
| input | password | 密码框，用于输入密码 |
<!-- 书写的内容都会变成点点显示 -->
密码框：<input type="password">
常用属性：placeholder 占位符，提示用户输入内容的文本
| 标签名 | type属性值 | 说明 |
|---|---|---|
| input | radio | 单选框，用于多选一 |
常用属性：
| 属性名 | 说明 |
|---|---|
| name | 分组，有相同name属性值的单选框为一组，一组中同时只能有一个被选中 |
| checked | 默认选中 |
性别：<input type="radio" name="sex"> 男 <input type="radio" name="sex" checked> 女
| 标签名 | type属性值 | 说明 |
|---|---|---|
| input | checkbox | 多选框，用于多选多 |
多选框：<input type="checkbox">
| 标签名 | type属性值 | 说明 |
|---|---|---|
| input | file | 文本选择，用于之后上传文件 |
常用属性：multiple 多文件选择
上传文件：<input type="file" multiple>
| 标签名 | type属性值 | 说明 |
|---|---|---|
| input | submit | 提交按钮，用于提交 |
<input type="submit" value="免费注册">
| 标签名 | type属性值 | 说明 |
|---|---|---|
| input | reset | 重置按钮，用于重置 |
<body>
<form action="">
<!-- 写什么就显示什么 -->
文本框：<input type="text" placeholder="写点什么吧">
<!-- 书写的内容都会变成点点显示 -->
<br>
密码框：<input type="password">
<br>
<br>
性别：<input type="radio" name="sex"> 男 <input type="radio" name="sex"> 女
<br>
<br>
多选框：<input type="checkbox">
<br>
<br>
上传文件：<input type="file">
<br>
<br>
<input type="submit">
<input type="reset">
</form>
</body>| 标签名 | type属性值 | 说明 |
|---|---|---|
| input | button | 普通按钮，默认无功能，之后配合js添加功能 |
<input type="button" value="普通按钮">
button按钮标签（同input的按钮系列）
| 标签名 | type属性值 | 说明 |
|---|---|---|
| button | submit | 提交按钮，点击之后提交数据给后端服务器 |
| button | reset | 重置按钮，点击之后恢复表单默认值 |
| button | button | 普通按钮，默认无功能，之后配合js添加功能 |
select下拉菜单标签
标签组成：
select标签：下拉菜单的整体
option标签：下拉菜单的每一项
常见属性：selected ：下拉菜单的默认选中
<body>
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option selected>深圳</option>
</select>
</body>textarea文本域标签
<body>
<textarea cols="30" rows="10"></textarea>
</body>
常见属性：
cols：规定了文本域内可见宽度
rows：规定了文本域内可见行数
label标签
点男女也能被选中
法一：
-
使用label标签把内容（如：文本）包裹起来
-
在表单标签上添加id属性
-
在label标签的for属性中设置对应的id属性值
<body>
性别：
<input type="radio" name="sex" id="nan"> <label for="nan">男</label>
<input type="radio" name="sex"> 女
</body>法二：
直接使用label标签把内容（如：文本）和表单标签一起包裹起来
把label标签的for属性删除
<body>
性别：
<input type="radio" name="sex" id="nan"> <label for="nan">男</label>
<label ><input type="radio" name="sex"> 女</label>
</body>语义化标签
没有语义的布局标签div和span
div标签：一行只显示一个（独占一行）
span标签：一行可以显示多个
有语义的布局标签（HTML5中使用）
| 标签名 | 语义 |
|---|---|
| header | 网页头部 |
| nav | 网页导航 |
| footer | 网页底部 |
| aside | 网页侧边栏 |
| section | 网页区块 |
| article | 网页文章 |
字符实体
扫一扫
2523
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
