html_4——知识总结
- 一、计算机基础知识
- 二、html4总结
- 2.1 html基本结构
- 2.2 全局属性-id,class,style,dir,title,lang
- 2.3 格式排版标签-div,p,h1-h6,br,hr,pre
- 2.4 文本标签-span,en,strong,del,ins,sub,sup
- 2.5 图片标签-img:src,alt,width,height,boder
- 2.6 超链接-a:herf,target,name,id
- 2.7 列表标签-ul,ol:li；dl:dt,dd；
- 2.8 表格--table,caption,thead,tbody,tfoot,tr,td,th
- 2.9 表单标签--form,input,textarea,select,option,button,label,fieldset,legend
- 2.10 框架标签 iframe:name,frameborder,width,height
- 参考
一、计算机基础知识
- 计算机=硬件+软件
- 软件=系统软件+应用软件
- 应用软件=c/s框架+b/s框架
- HTML全称：HyperText Markup Language(超文本标记语言)
- 复制快捷键：shift+alt+↓
- 回车键：enter+ctrl
二、html4总结
2.1 html基本结构
- 主体结构标签 head、body、html
<html>
<head>
<title>标题</title>
</head>
<body>
<marquee>尚硅谷</marquee>
</body>
</html>
- html文档声明_
作用：告诉浏览器当前网页版本
新写法：
<!-- 文档申明 -->
<!DOCTYPE html>
<html>
<head>
<title>
题目
</title>
</head>
<body>
<marquee loop="1">尚硅谷</marquee>
</body>
</html>
- HTML 设置语言_<html lang="zh-CN>
作用：1、让浏览器显示对应的翻译提示。2、有利于搜索引擎优化。
<!-- 文档申明 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>
题目
</title>
</head>
<body>
<marquee loop="1">尚硅谷</marquee>
</body>
</html>
- head内标签——title,meta指定页面元信息
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>题目</title>
<!-- 1.配置字符编码 -->
<meta charset="utf-8">
<!-- 2.针对IE浏览器的兼容性配置 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 3.针对移动端的配置 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 4.配置网页关键字 -->
<meta name="keywords" content="8-12个以英文逗号隔开的单词/词语">
<meta name="keywords" content="网上购物，电商购物，皮鞋，化妆品">
<!-- 5.配置网页描述信息 -->
<meta name="description" content="80字以内的一段话，与网站内容相关">
<meta name="description" content="哈哈电商主营皮鞋，致力于打造国内优质电商">
<!-- 6.针对搜索引擎爬虫配置： -->
<meta name="robots" content="此处可选值见下表">
<!-- index 允许搜索爬虫索引此页面。
noindex 要求搜索爬虫不索引此页面。
follow 允许搜索爬虫跟随此页面上的链接。 -->
<!-- 7.配置网页作者： -->
<meta name="author" content="tony">
<!-- 8.配置网页生成工具 -->
<meta name="generator" content="Visual Studio Code">
<!-- 9.配置定义网页版权信息 -->
<meta name="copyright" content="2023-2027©版权所有">
<!-- 10.配置网页自动刷新 -->
<meta http-equiv="refresh" content="10;url=http://www.baidu.com">
</head>
<body>
<marquee>尚硅谷</marquee>
</body>
</html>
- HTML标准结构
<!DOCTYPE html>
<html lang="zh-CN">
<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>Document</title>
</head>
<body>
</body>
</html>
- 输入 ! ，随后回车即可快速生成标准结构
- 在存放代码的文件夹中，存放一个 favicon.ico 图片，可配置网站图标。
2.2 全局属性-id,class,style,dir,title,lang
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML全局属性</title>
<style>
.student {
color: red;
}
</style>
</head>
<body>
<!-- 给标签指定唯一标识，注意： id 是不能重复的 -->
<div id="hello1">你好啊！</div>
<div id="hello2">你好啊2！</div>
<div id="hello1">你好啊22！</div>
<!-- 给标签指定类名，随后通过 CSS 就可以给标签设置样式。 -->
<div class="student">王五</div>
<div class="student">张三</div>
<div class="student">李四</div>
<!-- 给标签设置 CSS 样式。 -->
<div style="color:red; font-size:50px;">旺财</div>
<!-- 内容的方向，值: ltr 、 rtl -->
<!-- 文字翻转 -->
<bdo dir="rtl">你是年少的欢喜</bdo>
<!-- 对齐方式 -->
<div dir="rtl">你是年少的欢喜</div>
<!-- 给标签设置一个文字提示 -->
<div title="英雄联盟">lol</div>
<a href="https://www.baidu.com" title="百度一下">百度</a>
<!-- 给标签指定语言 -->
<div lang="en">hello</div>
</body>
</html>
2.3 格式排版标签-div,p,h1-h6,br,hr,pre
| 标签名 | 标签含义 |
|---|---|
| h1-h6 | 标题 |
| p | 段落 |
| div | 大容器 |
| br | 换行 |
| hr | 分割线 |
| pre | 按原文显示（一般用于在页面中嵌入大段代码） |
- h1 最好写一个， h2~h6 能适当多写。
- h1~h6 不能互相嵌套，例如： h1 标签中最好不要写 h2 标签了。
- p 标签很特殊！它里面不能有： h1~h6 、 p 、 div 标签。
<!DOCTYPE html>
<html lang="zh-CN">
<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>Document</title>
</head>
<body>
<div>
<h1>1级标题</h1>
<p>置身移动互联时代，人们在享受智能设备带来便利的同时，也在一些场景中面临个人信息泄露风险。随着时间推移，这样的风险日益呈现出新的表现形式。</p>
<p>一些APP声称看视频、玩游戏甚至走路都能赚钱，但用户想提现却难上加难，还容易泄露个人信息；新型不法软件图标透明、没有名称，在手机屏幕上十分隐蔽，不仅不停推送广告，还会收集并转卖用户隐私信息；个人信息安全和隐私保护话题引发关注，正说明其涉及群众切身利益，问题不容小视。</p>
</div>
<div>
<!-- 换行标签 -->
<a href="https://www.baidu.com">去百度</a>
<br>
<a href="https://www.jd.com">去京东</a>
<!-- 分割线 -->
<div>第一章</div>
<p>xxxxxxxx,就这样子哦她就成了国王</p>
<hr>
<div>第二章</div>
<p>一个月黑风高的晚上，xxxxxxxxxxxxxx</p>
<!-- 按原文显示 -->
<pre>
I Love You
I Love You
Love
</pre>
</div>
</body>
</html>
2.4 文本标签-span,en,strong,del,ins,sub,sup
| 标签名 | 标签语义 |
|---|---|
| em | 要着重阅读的内容 |
| strong | 十分重要的内容（语气比em要强） |
| span | 没有语义,小容器 |
| del | 已删除内容 |
| ins | 新添加内容,加下划线 |
| sub | 下标字 |
| sup | 上标字 |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML_常用的文本标签</title>
<style>
span{
color: red;
}
</style>
</head>
<body>
<p>
预防电信诈骗，请安装：<em>国家反诈中心app。</em>
</p>
<p>
当我们出门的时候，<strong>一定要关好门窗</strong>!
</p>
<p>
前端三个框架为：<span>Angular、React、Vue</span>。
</p>
<p>
商品原价：<del>199</del>，限时秒杀：<ins>99</ins>
</p>
<p>
水的化学方程式是：H<sub>2</sub>O，8的三次方是这么写的：8<sup>3</sup>
</p>
</body>
</html>
2.5 图片标签-img:src,alt,width,height,boder
| 标签名 | 常用属性 |
|---|---|
| img | src ：图片路径（又称：图片地址）；alt ：图片描述；width ：图片宽；height:图片高度；boder:边框 |
<!DOCTYPE html>
<html lang="zh-CN">
<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>Document</title>
</head>
<body>
<img src="./奥特曼.jpg" alt="奥特曼" width="200px">
</body>
</html>
2.6 超链接-a:herf,target,name,id
主要作用：跳转到指定页面、跳转到指定文件、跳转到锚点位置、唤起指定应用。
| 标签名 | 常用属性 |
|---|---|
| a | href ： 指定要跳转到的具体目标。target ： 控制跳转时如何打开页面。id ： 元素的唯一 标识，可用于设置锚点。name ： 元素的名字，写在 a 标签中，也能设置锚点。 |
1、跳转到页面
<!DOCTYPE html>
<html lang="zh-CN">
<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>Document</title>
</head>
<body>
<!-- 跳转其他网页 -->
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
<a href="https://miaosha.jd.com/" target="_self">京东秒杀</a>
<!-- 跳转本地网页 -->
<a href="./10_HTML排版标签.html" target="_blank">排版标签</a>
<a href="./10_HTML排版标签.html">
<img width="50" src="./奥特曼.jpg" alt="奥特曼">
</a>
</body>
</html>
2、跳转到文件
<!-- 浏览器能直接打开的文件 -->
<a href="./resource/自拍.jpg" target="_blank">看自拍</a>
<a href="./resource/小电影.mp4" target="_blank|">看小电影</a>
<a href="./resource/小姐姐.gif" target="_blank">看小姐姐</a>
<a href="./resource/如何一夜暴富.pdf" target="_blank">点我一夜暴富</a>
<!-- 浏览器不能打开的文件，会自动触发下载 -->
<a href="./resource/内部资源.zip">内部资源</a>
<!-- 强制触发下载 -->
<a href="./resource/小姐姐.gif" download="电影片段.mp4"></a>
3、跳转到锚点
<!-- 一、设置锚点 -->
<!-- 第一种方式：a标签配合name属性 -->
<a href="#htl">看灰太狼</a>
<!-- 第二种方式：其他标签配合id属性 -->
<a href="#atm">看奥特曼</a>
<!-- 二、跳转锚点 -->
<a name="htl"></a>
<img src="./path_test/a/b/灰太狼.jpg" alt="灰太狼">
<p id="atm">我是奥特曼</p>
<img src="./奥特曼.jpg" alt="奥特曼">
<!-- 三、特殊跳转 -->
<!-- 跳到本页面顶部 -->
<a href="#">回到顶部</a>
<!-- 跳转到其他页面锚点 -->
<a href="demo.html#test1">去demo.html页面的test1锚点</a>
<!-- 刷新本页面 -->
<a href="">刷新本页面</a>
<!-- 执行一段js,如果还不知道执行什么，可以留空，javascript:; -->
<a href="javascript:alert(1);">点我弹窗</a>
4、唤起应用
<!-- 唤起设备拨号 -->
<a href="tel:10010">电话联系</a>
<!-- 唤起设备发送邮件 -->
<a href="mailto:10010@qq.com">邮件联系</a>
<!-- 唤起设备发送短信 -->
<a href="sms:10086">短信联系</a>
2.7 列表标签-ul,ol:li；dl:dt,dd；
1、有序列表–ol
<h2>把大象放进冰箱里共分几步？</h2>
<ol>
<li>把冰箱门打开</li>
<li>把大象放进去</li>
<li>把冰箱门关上</li>
</ol>
2、无序列表–ul
<h2>我想去的几个城市</h2>
<ul>
<li>成都</li>
<li>上海</li>
<li>西安</li>
<li>武汉</li>
</ul>
3、自定义列表–dl
<h2>如何高效学习？</h2>
<dl>
<!-- 术语名称 -->
<dt>做好笔记</dt>
<!-- 术语描述 -->
<dd>笔记是我们以后复习的一个抓手</dd>
</dl>
2.8 表格–table,caption,thead,tbody,tfoot,tr,td,th
跨行跨列
- rowspan ：指定要跨的行数。
- colspan ：指定要跨的列数。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表格_跨行与跨列</title>
</head>
<body>
<table border="1" cellspacing="0">
<!-- 表格标题 -->
<caption>课程表</caption>
<!-- 表格头部 -->
<thead>
<tr>
<th>项目</th>
<th colspan="5">上课</th>
<th colspan="2">活动与休息</th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody>
<tr>
<td>星期</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期日</td>
</tr>
<tr>
<td rowspan="4">上午</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
<td>3-5</td>
<td>3-6</td>
<td>3-7</td>
<td rowspan="4">休息</td>
</tr>
<tr>
<td>4-2</td>
<td>4-3</td>
<td>4-4</td>
<td>4-5</td>
<td>4-6</td>
<td>4-7</td>
</tr>
<tr>
<td>5-2</td>
<td>5-3</td>
<td>5-4</td>
<td>5-5</td>
<td>5-6</td>
<td>5-7</td>
</tr>
<tr>
<td>6-2</td>
<td>6-3</td>
<td>6-4</td>
<td>6-5</td>
<td>6-6</td>
<td>6-7</td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td>7-2</td>
<td>7-3</td>
<td>7-4</td>
<td>7-5</td>
<td>7-6</td>
<td>7-7</td>
<td rowspan="2">休息</td>
</tr>
<tr>
<td>8-2</td>
<td>8-3</td>
<td>8-4</td>
<td>8-5</td>
<td>8-6</td>
<td>8-7</td>
</tr>
</tbody>
<!-- 表格脚注 -->
<tfoot height="50" align="center" valign="middle">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共计：4人</td>
</tr>
</tfoot>
</table>
</body>
</html>
2.9 表单标签–form,input,textarea,select,option,button,label,fieldset,legend
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表单_常用控件</title>
</head>
<body>
<form action="https://search.jd.com/search">
<fieldset>
<legend>主要信息</legend>
<!-- 文本输入框 -->
<label >
账户：
<input disabled id="zhanghu" type="text" name="account" value="zhangsan" maxlength="10"><br>
</label>
<!-- 密码输入框 -->
<label >
密码：
<input id="mima" type="password" name="pwd" value="123" maxlenth="10"><br>
</label>
<!-- 单选框 -->
性别：
<input type="radio" name="gender" value="male" id="nan">
<label for="nan">男</label>
<input type="radio" name="gender" value="female" id="nv">
<label for="nv">女</label><br>
<!-- 多选框 -->
爱好：
<input type="checkbox" name="hobby" value="smoke" checked>抽烟
<input type="checkbox" name="hobby" value="drink" checked>喝酒
<input type="checkbox" name="hobby" value="perm" checked>烫头<br>
<!-- 隐藏域 -->
<input type="hidden" name="from" value="toutiao"><br>
<!-- 确认按钮1 -->
<input type="submit" value="确认1">
<!-- 重置按钮1 -->
<input type="reset" value="重置1">
<!-- 普通按钮1-->
<input type="button" value="检测账户是否被注册1"><br>
</fieldset>
<fieldset>
<legend>次要信息</legend>
<!-- 确认按钮2 -->
<button type="submit">确认2</button>
<!-- 重置按钮2 -->
<button type="reset">重置2</button>
<!-- 普通按钮2-->
<button type="button">检测账户是否被注册2</button><br>
<!-- 文本域 -->
其他：
<textarea name="other" cols="23" rows="3"></textarea><br>
<!-- 下拉框 -->
籍贯：
<select name="place">
<option value="冀">河北</option>
<option value="鲁">山东</option>
<option value="晋" selected>山西</option>
<option value="粤">广东</option>
</select>
</fieldset>
</body>
</html>
2.10 框架标签 iframe:name,frameborder,width,height
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>框架标签</title>
</head>
<body>
<!-- 1利用iframe嵌入一个普通网页 -->
<iframe src="https://www.taobao.com" width="900" height="300" frameborder="0"></iframe><br>
<!-- 2利用iframe嵌入其他内容 -->
<iframe src="./resource/如何一夜暴富.pdf" frameborder="0" width="900" height="300"></iframe><br>
<!-- 3利用iframe与表单和超链接联动 -->
<!-- 与超链接的target属性配合使用 -->
<a href="https://www.toutiao.com" target="container">点我看新闻</a>
<a href="https://www.taobao.com" target="container">点我看淘宝</a><br>
<!-- 与表单的target属性配合使用 -->
<form action="https://so.toutiao.com/search" target="container">
<input type="text" name="keyword">
<input type="submit" value="搜索">
</form>
<iframe name="container" frameborder="0" width="900" height="300"></iframe><br>
</body>
</html>
参考
尚硅谷2023前端css和html
