- 思维导图（个人制作，可能有误）：https://www.mubucm.com/doc/2EghdAXgYvc
1.浏览器兼容性
2.Web网页的组成部分：
- HTML结构、
- CSS表现
- JS行为
3.VSCode工具相关插件
4.文档声明与字符编码
<html lang="***">---------------->"en"表示英语，"zh-CN"代表中文，”ja-jp“代表日文…
- 这个只对引擎优化和浏览器识别起作用
<meta charset="***">--------------->AXCII-美国信息交换标准代码，ISO-8859-1拉丁字母表的字符编码，GB2312汉子编码字符集，UTF-8 Unicode万国码字符编码
<!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>Document</title>
</head>
<body>
</body>
</html>
5.HTML常用标签
1.文本标题（h1-h6）
2.段落文本（<p></p>）
3.换行(<br/>)
4.水平线（<hr/>）
5.加粗有两个标记（推荐strong）
<b>加粗内容</b>只是显示加粗
<br/>
<strong>强调的内容</strong>突出的文本
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nU67iwxf-1659256595655)(D:\Typora\imgs\image-20220730184936873.png)]
6.倾斜有两个标记（推荐em）
<em>强调文本</em>
<i>倾斜文本</i>
7.删除线有两个标记（推荐del）
<s>文本</s>删除线
<del>文本</del>删除线
8.扩展
<u>文本</u>下划线
<sub></sub>下标
<sup></sup>上标
6.案例–一个简单的文章
<body>
<h1>HTML5</h1>
<p>HTML5是互联网的下一代标准，是<strong>构建以及呈现互联网内容的一种语言方式</strong>．被认为是互联网的核心技术之一。
<br/>HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。</p>
<!-- <br/> -->
<h2>HTML5新特性</h2>
<!-- <br> -->
<hr/>
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的<del>下一代</del>标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。
<h3>多媒体</h3>
HTML产生于1990年，<strong>1997年HTML4成为互联网标</strong>准，并广泛应用于互联网应用的开发。
<br/>
<h3>智能表单</h3>
HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。
HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。 <sup>[1]</sup>
</body>
7.VSCode快捷键
1.Shift+Alt+下箭头快速复制一行
2.Alt+鼠标左键：多个光标
3.html:5快速创建html5框架
4.div*3快速创建三个div标签
5.div{111}表示<div>1111</div>
6.ul>li表示创建<ul><li></li></ul>
7.dl>dt+dd表示创建<dl><dt></dt><dd></dd></dl>
8.hr标签
- color属性表示颜色
- width属性表示宽度，默认单位是px
- align表示位置，left是左边，right是右边，默认是在中间
- noshade表示没有阴影，前后值一样可以不写值，用法：
noshade或者noshade="noshade"
9.特殊符号
| 特殊符号 | 解释 |
|---|---|
| 尖角号 | <左尖角号；>右尖角号 |
| 空格 | 该空格占据宽度受【字体】影响明显而强烈 |
| 版权 | ©©|直接输入© |
| 商标 | ™™ |
<body>
<p>
上一节课的内容是hr，用法是这样的<hr >©©™®
</p>
<hr/>
</body>
10div与span标签
-
div标签，没有具体含义，用来划分区域
-
div标签，没有具体含义，用来划分页面的区域，独占一行
-
span，没有实际意义，主要应用在对于文本独立修饰的时候，内容有多宽就占用多宽的空间距离
<body>
<h3>体育<span style="color: grey;">sports</span></h3>
</body>
11.列表-有序列表
| 无序列表 | 有序列表 | 自定义列表 |
|---|---|---|
|
|
|
<body>
<ol type="a" start="1005">
<p>
1.li里面可以随意放标签，但是ol里面只能放置<br/>
2.数字是自动生成的
3.type属性：1，a,A,i,I start:取值只能是一个数字
</p>
<li>把冰箱打开</li>
<li>大象装进去</li>
<li>冰箱关上</li>
</ol>
</body>
12.列表-无序列表
<body>
<p>
1.ul里面只能放li，li里面可以放其他标签<br/>
2.默认的是黑色的实心圆<br/>
3.type属性 disc（实心圆） circle（空心圆） square（正方形） none（无）<br/>
</p>
<ul type="disc">
<li>蒸羊羔</li>
<li>蒸熊掌</li>
<li>烧花鸭</li>
</ul>
</body>
13.列表-自定义列表
<body>
<p>一般来说是直接赋值整个dl标签，便利于后面做样式</p>
<dl>
<dt>我是图片</dt>
<dd>我是文字</dd>
</dl>
<dl>
<dt>我是图片</dt>
<dd>我是文字</dd>
</dl>
</body>
14.图片标签的路径
<body>
<p>
同级目录可以省略./
注意服务器下不能用绝对路径查找图片
</p>
<img src="../img/2056309.jpg">
<img src="../img/2056332.jpg">
</body>
15.图片标签的属性
<img src="图片路径" title="鼠标悬停上去之后的提示信息" alt="图片不显示之后（加载失败的提示信息） width="200px" height="200px"/>
<img src="../img/2056309.jpg" title="2056309.jpg" alt="加载失败" width="600px" height="1000px"/>
- 仅设置宽或者高，图片会等比例缩放
16.费曼学习技巧案例
<body>
<h1>费曼技巧：最强的学习方法</h1>
<p>作者：秋小曦2017.04.10 14:12:19 字数 1,086 阅读 19,865</p>
<h3>一、“费曼技巧”的概念</h3>
<p>来源，这个技巧的灵盖，源于诺贝尔物理将获得者，理查德·费曼，此外省略无数字</p>
<img src="../img/2056309.jpg" alt="图片加载失败" title="这是一张无关紧要的图片" width="100%" height="100%"/>
<p>费曼技巧，亦同其理。对付一个只是枝<strong>节繁杂如发丝</strong>、富有内涵的想法，应该分而化之......</p>
<p><strong>费曼学习法的具体步骤，很简单，。。。。。。</strong></p>
<ol>
<li>确定学习目标</li>
<li>模拟教学学习法</li>
<li>回顾</li>
<li>简化</li>
</ol>
</body>
17.超链接标签
<a href="路劲" title="鼠标悬停上去之后的提示信息" target="规定在何处打开文档">内容</a>
- 双标签可以包含单标签
<body>
<p>Target属性：规定在何处打开文档
A:target="_self"默认值
B:target="_blank"新窗口打开
</p>
<a href="https://www.baidu.com" target="_blank">百度</a>
</body>
- title属性表示鼠标悬停时的显示
18.表格
- 数据表格的创建
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
- 表格属性（都是设置在table标签上）
- 1.宽度width
- 2.高度height
- 3.边框border
- 4.边框颜色bordercolor
- 5.背景颜色bgcolor
- 6.水平对齐align="left"或right或center
- 7.cellspacing=“单元格与单元格之间的距离”
- cellpadding=“单元格与内容之间的空隙”
<body>
<!-- width支持px和百分比（相对于父元素） -->
<!-- 此时height是内容撑开，所以100%并不是屏幕的100% -->
<table border="1" width="50%" height="100%"
align="center" bordercolor="red"
bgcolor="yellow" cellspacing="0" cellpadding="10">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
- tr行属性
- 1.高度height
- 2.背景颜色bgcolor
- 3.文本水平对齐align="left"或right或center
- 4.文字垂直对齐valign="top"或middle或bottom
<body>
<table border="1" width="50%" height="100%"
align="center" cellspacing="1" cellpadding="10"
bgcolor="yellow">
<tr bgcolor="orange" height="100" valign="middle" align="center">
<td>1</td>
<td>2</td>
</tr>
<tr valign="bottom" align="right">
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
- td（table data）属性
- 1.宽度width
- 2.高度height
- 3.背景颜色bgcolor
- 4.文字水平对齐align="left"或right或center
- 5.文字垂直对齐valign="top"或middle或bottom
<body>
<table border="1" width="100%" height="100%"
align="center" cellspacing="1" cellpadding="10"
bgcolor="yellow">
<tr>
<!-- 如果一个单元格设置了宽度，影响的是这一整列的宽度
如果一个单元格设置了高度，影响的是这一整行的高度 -->
<td width="66.6%" height="30">1</td>
<td>2</td>
</tr>
<tr>
<td bgcolor="red" align="right" height="40">3</td>
<td valign="top" align="right" >4</td>
</tr>
</table>
</body>
19.表格合并
-
Colspan=“所哟啊合并的单元格的列数”，必须加在td上
-
Rowspan=“所要合并的单元格的行数”，必须加在td上
<table border="1" cellspacing="0" width="100%" height="100%" align="center">
<tr bgcolor="grey" align="center">
<td ></td>
<td >A</td>
<td>B</td>
</tr>
<tr align="center">
<td bgcolor="grey">1</td>
<td colspan="2">1</td>
<!-- <td>2</td> -->
</tr>
<tr align="center">
<td bgcolor="grey">2</td>
<td rowspan="4" >3</td>
<td>4</td>
</tr>
<tr aligh="center">
<td bgcolor="grey" align="center">3</td>
<!-- <td>5</td> -->
<td align="center">6</td>
</tr>
<tr aligh="center">
<td bgcolor="grey" align="center">4</td>
<!-- <td>7</td> -->
<td align="center">8</td>
</tr>
<tr aligh="center">
<td bgcolor="grey" align="center">5</td>
<!-- <td>9</td> -->
<td align="center">10</td>
</tr>
</table>
<table border="1" width="100%" >
<tr>
<td>不毛</td>
<td colspan="2" rowspan="2">魏国</td>
<!-- <td>辽国</td> -->
</tr>
<tr>
<td rowspan="2">蜀国</td>
<!-- <td colspan="2">西凉</td> -->
<!-- <td>幽州</td> -->
</tr>
<tr>
<!-- <td>南中</td> -->
<td colspan="2">吴国</td>
<!-- <td>荆州</td> -->
</tr>
</table>
20.表格案例
<table border="1" cellspacing="0" cellpadding="0" align="center">
<tr height="25" align="center">
<td width="50">会员姓名</td>
<td width="75"></td>
<td width="50">出生日期</td>
<td width="75"></td>
</tr>
<tr height="25" align="center">
<td >身份证号</td>
<td colspan="3"></td>
<!-- <td></td>
<td></td> -->
</tr>
<tr height="25" align="center">
<td >通信地址</td>
<td colspan="3"></td>
<!-- <td></td>
<td></td> -->
</tr>
<tr height="25" align="center">
<td >联系电话</td>
<td colspan="3"></td>
<!-- <td></td>
<td></td> -->
</tr>
<tr height="25" align="center">
<td >会员卡号</td>
<td colspan="3"></td>
<!-- <td></td>
<td></td> -->
</tr>
</table>
21.表单标签
<form method="get或者post" action="向何处发送表单数据">
<input/>
A.属性 type定义输入框的类型
a)文本框 type=“text” 密码框type="password"
b)提交框 type="submit" 和 <button>提交按钮</button>一样
c)按钮框 type="button" 单纯的按钮
d)重置框 type="reset" 清空的效果
B.属性 placeholder描述输入字段预期值的简短提示信息。兼容到IE8以上
C.属性 name必须设置，否则在提交表单时，用户在其中输入的数据不会被发送给服务器
D.属性 value
</form>
<body>
<form action="http://www.baidu.com" align="center" method="get">
用户信息：<input type=text placeholder="请输入你的用户名" name=username/>
<br/>
密码：<input type="password" placeholder="请输入您的密码，注意大小写" name="password"/>
<br/>
<!-- <input type="submit" value="登录"/> -->
<button type="submit">登录</button>
<!-- 提交信息到action指定的地址 -->
<input type="reset" value="重置1"/>
<button type="reset">重置2</button>
</form>
</body>
3900
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
