前言
主要为html相关的基本知识，笔记仅供参考，望指正。
目录
一、浏览器
- 浏览器内核：用于处理浏览器各种资源。经过内核处理才能看到网页内容。
- 主流：五大浏览器 四大内核（chrome(blink) IE(trident) firefox(gecko) safari(webkit) opera(blink)）
二、网页相关概念
- 多个网页-->网站
- 网页：结构+表现+行为 ，即对应 HTML+CSS+JavaScript
三、 HTML(超文本标记语言)
- 超文本与普通文本相比内容更加丰富，文本通过标记成为超文本
- 超文本：通过超链接将不同的信息组织在一起，跳转到指定的内容，例如：文件，网址，锚点等等
- 如何写一个简单的网页捏？： 桌面新建记事本并写入内容“hello”->保存改后缀名为.html->默认方式用chrome打开即可->用记事本方式再次打开文件改内容为“<marquee>hello</marquee>”->再次打开网页内容为弹幕形式
- 标签：又称为元素，是HTML的基本组成单位。
1.标签不一定为成对出现（双标签），即单标签，例如：<input> 或者<input/>
2.标签的嵌套，例如：marquee中嵌套input标签
<marquee loop="1" bgcolor="red">
hello_world
<input>
</marquee>- 标签属性
- HTML基本结构
1.如何查看网页代码？------右键查看源代码或者检查（浏览器修正过的代码）
2. 基本架构
在body中的内容是显示在网页中的内容。
- HTML标准结构
1. 网页图标文件 favicon.ico 必须防灾根目录下，即用VSCode打开的文件
2.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
- HTML开发者文档推荐：w3school MDN
2.HTML（超文本标记语言） | MDN (mozilla.org)
3.HTML 标签参考手册 - 功能排序 (w3school.com.cn)
- HTML排版标签
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>html排版标签</title>
</head>
<body>
<h1>我是一级标题</h1><!--h内不能互相嵌套-->
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>
<div>
<p>我是一个段落</p><!--p中不能含有任何h,p,div标签-->
<p>我是一个段落</p>
<p>我是一个段落</p>
</div>
<div></div><!--用于打包，将一部分段落包裹起来-->
</body>
</html>
- HTML文本标签
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文本标签</title>
</head>
<body>
<p>
预防诈骗，请安装：<em>国家反诈APP</em><!--着重阅读（斜体）-->
</p>
<p>
预防诈骗，请安装：<strong>国家反诈APP</strong><!--着重阅读，语气比em强-->
</p>
<p>
预防诈骗，请安装：<span>国家反诈APP</span><!--无语义，用于包裹-->
</p>
<p>
这首<cite>《爱你》</cite>非常好听!<!--cite:作品标题-->
</p>
<p>
<dfn>"耗子尾汁"</dfn>是网络语 <!--dfn:特殊词语，专有名词-->
</p>
<p>
原价：<del>199</del> 现价：<ins>100</ins><!--删除和插入-->
</p>
<p>
水：H<sub>2</sub>O 8的立方：8<sup>3</sup><!--sub sup：下标文字和上标文字-->
</p>
<p>
<code>
printf("hello world");<!--code：一段代码-->
</code>
</p>
<p>
手机提示，<samp>支付宝到账100万！</samp><!--标识设备输出-->
</p>
<p>
键盘打字输入：<kbd>hello</kbd><!--标识键盘输入-->
</p>
<p>
LOL很好玩！<abbr title="LOL"></abbr>
</p>
你好，<rtl>你好</rtl><!--改变文本方向-->
<p>
<var>a</var><!--标记变量-->
</p>
<p>
<small>注：注意危险</small><!--附属细则-->
</p>
<p>
我买了<b>阿莫西林</b><!--摘要关键字，产品名称-->
</p>
<p>
老师发言：<i> 大家好</i><!--人物西乡活动，讲话内容-->
</p>
<p>
<u>heelo</u>不对，应该是hello<!--标记出错内容-->
</p>
<p>
李白言：<q>床前明月光</q> <!--短引用-->
</p>
<p>
《后来的歌词》：<blockquote>后来，我总算学会了。。。</blockquote><!--长引用-->
</p>
<p>
我家地址：<address>新华路56好</address><!--地址信息-->
</p>
</body>
</html>- 常见图片格式
jpg: 对图片要求不高，不支持透明背景
png：支持透明背景，图片颜色丰富
bmp：对图片要求极高，保留细节更多
gif:支持动态图片，色彩呈现不是很完整
webp：兼容性差（IE不支持），但具备图片的各种优点
base64：通过在线编码工具将图片转为base64形式，可以作为img标签的src内容，直接对应图片，需要和网页一起加载。
- 超链接
1.跳转到指定网页
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>超链接_页面跳转</title>
</head>
<body>
<!-- 两种跳转方式，_self在当前页面打开跳转地址，_blank在新页面中打开跳转地址 -->
<!-- 打开外部地址 -->
<a href="https://miaosha.jd.com/" target="_self">去秒杀</a>
<a href="https://www.baidu.com/" target="_blank">去百度</a>
<!-- 打开本地地址 -->
<a href="./10_html排版标签.html" target="_blank">去排版</a>
<!-- a标签是行元素，但可以包括块元素，但不允许再包含a标签 -->
</body>
</html>
2. 跳转到文件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>超链接_跳转文件</title>
</head>
<body>
<!-- 浏览器可以直接打开 -->
<a href="./resource/yosemite1.jpg">看图片</a>
<a href="./resource/11月8日.mp4">看视频</a>
<!-- 浏览器无法直接打开，需要下载 -->
<a href="./resource/test.zip">压缩包</a>
<a href="./resource/test1.pdf">pdf阅读</a>
<!-- 浏览器强制下载:download属性名为下载的文件名称 -->
<a href="./resource/yosemite1.jpg" download="下载图片">图片下载</a>
</body>
</html>3.跳转到锚点
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>超链接_跳转锚点</title>
</head>
<body>
<!--锚点:网页中的一个标记点-->mmmmmmmmmmmmmmmmmmm
<!-- 超链接跳转锚点的两种方式：均区分大小写 -->
<!-- 1. 通过a标签中的name属性来设置锚点 -->
<!-- 2. 通过在其他标签中设置id属性 -->
<!--a标签+href属性：超链接 -->
<a href="#高山">看高山</a>
<a href="#berber">看berber</a>
<a name="高山"></a> <!--锚点设置-->
<p>我是图片1</p>
<img src="./yosemite1.jpg">
<p id="berber">我是图片2</p> <!--锚点设置-->
<img src="./pass_test/berber.jpg">
k
<p>整体介绍完毕</p>
<a href="#">回到顶部</a>
<a href="">刷新页面</a>
<a href="javascript:alert(666);">点我弹窗</a>
</body>
</html>4.跳转到指定应用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>超链接_唤起指定应用</title>
</head>
<body>
<a href="tel:10010">电话联系</a>
<a href="mailto:1951208076@qq.com">邮件联系</a>
<a href="sms:10086">短信联系</a>
</body>
</html>- 列表
<!-- 列表：有序列表Ordered list，无序列表Unordered list，定义列表defined list -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>把大象放进冰箱要几步？</h2>
<ol>
<li>打开冰箱门</li>
<li>把大象放进冰箱</li>
<li>关上冰箱门</li>
</ol>
<h2>我想去的几个城市</h2>
<ul>
<li>上海</li>
<li>北京</li>
<li>西安</li>
</ul>
<h2>如何更让的学习？</h2>
<dl>
<dt>做好笔记</dt><!--定义标题-->
<dd>笔记是我们复习的一个抓手</dd><!--定义描述-->
<dt>多加练习</dt>
<dd>只有敲出来的代码才是自己的</dd>
<dt>不怕出错</dt>
<dd>错误会让我们积攒更多的经验</dd>
</dl>
</body>
</html>- 表格
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border="1">
<!-- 表格标题 -->
<caption>学生信息</caption>
<!-- 表格头部 -->
<thead></thead>
<tr> <!--行-->
<th>姓名</th> <!--单元格-->
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
<!-- 表格主体 -->
<tbody>
<tr>
<td>张三</td><!--tdata-->
<td>男</td>
<td>20</td>
<td>汉族</td>
<td>群众</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>22</td>
<td>回族</td>
<td>团员</td>
</tr>
<tr>
<td>王五</td>
<td>女</td>
<td>20</td>
<td>满族</td>
<td>党员</td>
</tr>
<tr>
<td>赵六</td>
<td>男</td>
<td>20</td>
<td>壮族</td>
<td>群众</td>
</tr>
</tbody>
<tfoot><!--可写可不写-->
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr>共计：4人</tr>
</tfoot>
</table>
</body>
</html>- 表格注意事项
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表格注意属性</title>
</head>
<body>
<table border="1" width="500" height="500" cellspacing="0"><!--border只可以调整最外层边框宽度 width调整表格整体宽度,height调整表格高度 至少值。仅改变表格主体单元格的大小 cellspacing:调整单元格之间的间距-->
<!-- 表格标题 -->
<caption>学生信息</caption>
<!-- 表格头部 -->
<thead height="100" align="center" valign="middle"><!--align: left center right valign: top middle bottom-->
<tr> <!--行-->
<th width="50" height="50" align="left" valign="bottom">姓名</th> <!--单元格-->
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody height="400" align="center" valign="middle"><!--height要满足是的表格整体高度大于至少值-->
<tr>
<td>张三</td><!--tdata-->
<td>男</td>
<td>20</td>
<td>汉族</td>
<td>群众</td>
</tr>
<tr height="50" align="center" valign="middle">
<td width="50" height="50" align="left" valign="bottom">李四</td>
<td>男</td>
<td>22</td>
<td>回族</td>
<td>团员</td>
</tr>
<tr>
<td>王五</td>
<td>女</td>
<td>20</td>
<td>满族</td>
<td>党员</td>
</tr>
<tr>
<td>赵六</td>
<td>男</td>
<td>20</td>
<td>壮族</td>
<td>群众</td>
</tr>
</tbody>
<!-- 脚注 -->
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共计：4人</td>
</tr>
</tfoot>
</table>
</body>
</html>- 表格跨行与跨列
<!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><!--1-2跨5列-->
<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>
</table>
</body>
</html>代码结果：
- 表单基本结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表单基本结构</title>
</head>
<body>
<form action="https://www.baidu.com/s" target="_blank" method="get"><!--如果不加/s 跳转百度首页,加上以后,直接呈现搜索结果 method:默认是get-->
<input type="text" name="wd"><!--必须加上wd-->
<button>去百度搜索</button>
</form>
<form action="https://search.jd.com/search">
<input type="text" name="kerword" targer="_self"><!--必须加上keyword 由京东后端规定好的-->
<button>去京东搜索</button>
</form>
<a href="https://search.jd.com/search?keyword=手机" target="_blank">去京东搜索手机</a>
</body>
</html>- 表单常用控件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表单常用控件</title>
</head>
<body>
<form action="https://search.jd.com/search">
账户: <input type="text" name="account" value="zhangsan" maxlength="10"> <br>
密码: <input type="password" name="pwd" value="123" maxlength="6"> <br>
<button>确认</button>
</form>
</body>
</html>- 表单：单选框与复选框
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表单常用控件</title>
</head>
<body>
<form action="https://search.jd.com/search" target="_blank">
账户: <input type="text" name="account" value="zhangsan" maxlength="10"> <br>
密码: <input type="password" name="pwd" value="123" maxlength="6"> <br>
性别:
<input type="radio" name="gender" value="male">男
<input type="radio"name="gender" value="female">女
<br>
爱好:
<input type="checkbox" name="hobby" value="smoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="prem">烫头
<button>确认</button>
</form>
</body>
</html>- 按钮
<!-- 确认按钮1 button的type默认属性为submit-->
<!-- <button>确认</button> -->
<!-- 确认按钮2 -->
<input type="submit" value="确认">
<!-- 重置按钮1 -->
<button type="reset">重置</button>
<!-- 重置按钮2 -->
<!-- <input type="reset" value="重置"> -->
<!-- 普通按钮1 -->
<button type="button">检测账户是否被注册</button>
<!-- 普通按钮2 -->
<!-- <input type="button" value="检测账户是否被注册"> -->- 文本域和下拉框
<!-- 文本域 -->
其他：
<textarea name="other" cols="23" rows="3"></textarea>
<br>
<!-- 下拉框 -->
籍贯：
<select name="place">
<option value="新"> 新疆</option>
<option value="鲁">山东</option>
<option value="晋" selected>山西</option><!--默认山西sele-->
<option value="陕">陕西</option>
</select>disabled属性：禁用
- 表单控件和文字的关联:lable
<label for="zhanghu">账户:</label><!--获取焦点1-->
<input id="zhanghu" type="text" name="account" maxlength="10"> <!--disabled 文本框内容禁用 为默认值-->
<br>
<!-- 密码输入框 -->
<label><!--获取焦点2-->
密码:
<input type="password" name="pwd" maxlength="6"> <br>
</label>- 表单内容划分：fieldset legend
<fieldset>
<legend>主要信息</legend>
<!--添加主要信息-->
</fieldset>- iframe嵌入网页
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>标签框架</title>
</head>
<body>
<!-- 利用iframe嵌入一个普通网页 -->
<iframe src="https://www.bilibili.com" width="900" height="500" frameborder="1000"></iframe>
<!-- 利用iframe嵌入一个广告网页 -->
<iframe width="300" height="300" src="https://lady.163.com/photoview/00A70026/120043.html#p=IRFBKKLU00A70026NOS" frameborder="0"></iframe>
<!-- 嵌入其他 -->
<iframe src="./resource/11月8日.mp4" frameborder="0"></iframe>
<!-- name属性与超链接的target属性配合使用 -->
<a href="https://www.4399.com" target="tt">玩游戏</a>
<a href="https://news.163.com" target="tt">看新闻</a>
<iframe name="tt" frameborder="0"></iframe>
<!-- 与表单的target属性配合使用 -->
<form action="https://www.baidu.com/s" target="aa">
<input type="text" nmae="wd">
<button>搜索</button>
</form>
<iframe name="aa" frameborder="0"></iframe>
</body>
</html><!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML字符实体</title>
</head>
<body>
<!-- 查找：https://developer.mozilla.org/zh-CN/docs/Glossary/Entity -->
<div>我 美女</div>
<div>我 美女</div><!--字符实体$nbsp代表一个空格-->
<div>我   美女</div>
<div><h1>是最大的标题</div>
<div>我学了一个空格标签：&nbsp;</div>
<div>可以表示&的标签：&amp</div>
<div>价格：¥190</div>
<div>©版权所有</div>
<div>2×2=4</div>
<div>4÷2=2</div>
</body>
</html>- html全局实行属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>全局标识</title>
</head>
<body>
<div id="as">好像</div><!--id 在head title html script -->
<div class="student">张三</div>
<div style="color:aqua">旺财</div>
<bdo dir="rtl">你是年少的欢喜</bdo>
<div dir="rtl">你是年少的欢喜</div>
<div title="英雄联盟">LOL</div>
<div lang="en">hello</div>
</body>
</html>
扫一扫
4276
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
