00.架构
一.应用软件分类
- C/S(Client 客户端)--客户端
- B/S(Browser 浏览器)--写网页
(Sever 服务器)
二.一个网页有哪些部分组成
- 结构:HTML
- 表现:CSS
- 行为:JS
01.标签(元素)初见
1.**标签** 又称 **元素**，是HTML的基本组成单位。
2.标签分为: **单标签** 与 **双标签**（大部分为双标签）。
3.标签不分大小写，但小写更规范。
4.标签之间有 **嵌套关系** 与 **并列关系**。
一.双标签
<标签名>标签体</标签名>
二.单标签
<标签名/\>
查询标签可以去mdn网站查询。02.标签属性
1.用于给标签提供附加信息。
2.标签属性的格式: <标签名 属性名="标签值"> </标签名>
---可以写在 **起始标签** 或 **单标签** 中。
3.有些特殊的属性没有属性名字，只有属性值
---例：`<input disabled>`
03.排版标签
一.标签(标题标签)
1. **<h1>** 标签只能有一个，其他 **<h>** 标签可以有多个。
2. **<h>** 标签不可以嵌套。
二.
标签(段落标签)
1.跟标题标签不同，每一个p标签没有区别。
2. **<p>** 标签里不能有 **<h>** 标签， **<div>** 标签和 **<p>** 标签。
三.标签(盒子标签)
1.分块时使用的标签。
注:crtl和enter键一起按快速换行。
四.HTML 语义化标签
1.标签默认的效果不重要，语义最重要。
**h1-h6** 语义----标题
**p** 语义----段落
**div** 没有语义
2.按照语义编码，代码的可读性清晰。
3.有利于seo(搜索引擎优化)-----爬虫。
4.方便设备解析(屏幕阅读器，盲人阅读器等)。
04.块级标签与行内元素（学 css 后补充）
<span data-type="text" style="color: var(--b3-font-color4);">注:快速复制:shift+alt+上/下键。(向上/向下复制)。</span>
一.块级元素，特点:独占一行
排版标签
1.块级元素中能写:行内元素，块级元素(几乎都能写)。
——但是！03中写的规则<h>标签内不能再嵌套<h>标签。
二.行内元素，特点:不独占一行
例：**input**标签，**span**标签。
1.行内元素中能写:行内元素，但不能写:块级元素。
05.常见的文本标签
一.文本标签的定义
1.用于包裹:词汇，短语等。
2.通常写在排版标签里。
3.排版标签更宏观(用于处理大段文字)，文本标签更围观。
4.文本标签通常都是行内元素。
二.常用的文本标签
em 要着重阅读的内容——双
strong 十分重要的内容(语气比em要强)——双
span 没有语义，用于包裹短语的通用容器——双
06.图片标签
一.基本使用
1.src：图片路径--又称图片地址。
2.alt：图片描述。(让搜索引擎知道图片的内容)
3.width：图片宽度，单位是像素。
4.height：图片高度，单位是像素。
二.相对路径的运用
**./** 代表当前位置
**/** 代表下一级
**../** 代表上一级
三.绝对路径的运用
**本地绝对路径**
1.格式: **磁盘名** ：**文件名** / **图片名**。
**网络绝对路径**
1.格式: **网址**。——网址对应的必须是一个图片。
07.超链接
一.常用属性
1.**href**:要跳转的具体位置。
2.**target**:跳转时如何打开页面，常用值如下:
_self : 在本页打开。
_blank : 在新页打开。
<span data-type="text" style="background-color: var(--b3-card-error-background); color: var(--b3-card-error-color);"><a href="网址" target="target属性"> 标签名 <a></span>
二.跳转到文件
浏览器可以直接打开的文件：
-
.jpg
-
.mp4
-
.gif
-
.pdf
浏览器不能直接打开 .zip 格式的文件会自动触发下载。
三.跳转到锚点
1.设置锚点：
- <a> 标签配合 name 属性 <a name=" "></a> 。
- 其他标签配合 id 属性 <h2 id=" "></h2>
注:具有href的a标签是超链接，具有name的才是锚点；并且name和id都是区别大小写的，且id最好不要用数字。
2.跳转锚点：
<span data-type="text" style="color: var(--b3-font-color3);"><a href="#test1">去test1锚点</a></span>
<span data-type="text" style="color: var(--b3-font-color3);"><a href="#">回到顶部</a></span>
<span data-type="text" style="color: var(--b3-font-color3);"><a href="demo.html#test1">去demo.html页面的test1锚点</a></span>
<span data-type="text" style="color: var(--b3-font-color3);"><a href=" ">刷新本页面</a></span>
<span data-type="text" style="color: var(--b3-font-color3);"><a href="javascript:alert(1);">点我弹窗</a></span>
四.唤起指定应用
<span data-type="text" style="color: var(--b3-font-color2);"><!-- 唤起设备拨号 --!></span>
<span data-type="text" style="color: var(--b3-font-color3);"><a href="tel:10010">电话联系</a></span>
<span data-type="text" style="color: var(--b3-font-color2);"><!-- 唤起设备发送邮件 --!></span>
<span data-type="text" style="color: var(--b3-font-color3);"><a href="mailto:123456@qq.com">邮件联系</a></span>
<span data-type="text" style="color: var(--b3-font-color2);"><!-- 唤起设备发送短信 --!></span>
<span data-type="text" style="color: var(--b3-font-color3);"><a href="sms:10010">短信联系</a></span>
08.列表
一.有序列表——ol(ordered list)
概念：有顺序或侧重顺序的列表。
例：<span data-type="text" style="color: var(--b3-font-color3);"><h2>把大象放进冰箱总共分几步<2></span>
<ol>
<li>把冰箱门打开</li>
<li>把大象放进去</li>
<li>把冰箱门关上</li>
</ol>
二.无序列表——ul(unorded list)
概念：无顺序或不侧重顺序的列表。
例：<span data-type="text" style="color: var(--b3-font-color3);"><h2>我想去的几个城市</h2></span>
<ul>
<li>天津</li>
<li>上海</li>
<li>西安</li>
</ul>
三.列表嵌套
概念：列表中的子项内又包含一个列表（务必要把结构写完整）。
例：<span data-type="text" style="color: var(--b3-font-color3);"><ul></span>
<span data-type="text" style="color: var(--b3-font-color3);"><li></span>
<span data-type="text" style="color: var(--b3-font-color3);"><span>1111</span></span>
<ul>
<li>22222</li>
<li>33333</li>
<ul>
</li>
</ul>
四.自定义列表——dl(defnition list)
概念：1.所谓自定义列表就是一根包含属于名称以及属于描述的列表。
2.一个 **dl** 就是一个自定义列表，一个 **dt** 就是一个术语名称，一个 **dd** 就是术语名称（可以有多个）。
例：<span data-type="text" style="color: var(--b3-font-color3);"><h2>如何高效学习？</h2></span>
<dl>
<dt>做好笔记</dt>
<dd>笔记是我们复习的好抓手</dd>
<dd>笔记可以是电子版也可以是纸质版</dd>
<dt>多加练习</dt>
<dd>只有多练习才能熟练掌握</dd>
</dl>
09.表格
一.构造表格需要的几个标签
- 注：表头和主体用的列标签不同 注意。
width , border , height 三个属性只有 height 可以对 thead/tbody/tffot 标签起效；align——水平对齐方式：left，center，right；valign——垂直对齐方式：top，middle，bottom。
th td tr 上述标签属性都可以使用。
colspan——跨列
rowspan——跨行
10.常用属性
1.<.br> 换行（用的时候去掉.，笔记格式会直接换行不能直接写）。
2.
3.
按原文显示。11.表单
一.构造表单所需要的标签
form-表单（双标签）： action：用于指定表单的提交地址（需要与后端人员沟通后确定）。 target：用于控制表单提交后，如何打开页面； _self：在本窗口打开。 _blank：在新窗口打开。 method：暂时了解即可。 input-输入框（单标签）： type：设置输入框的类型。 name：用于指定提交数据的名字（需要与后端人员沟通后确定）。 button-按钮（双标签）：二.input 详情
1.type="text"时，作为文本输入框，常用属性如下： name属性：数据的名称。 value属性：输入框的默认输出值。 maxlength属性：输入框最大可输入长度。 2.type="password"时，作为密码输入框，常用属性如下： name属性：数据的名称。 value属性：输入框的默认输出值（一般不用）。 maxlength属性：输入框最大可输入长度。 3.type="radio"时，作为单选框，常用属性如下： name属性：数据的名称（若需要单选效果，多个radio的name属性要保持一致）。 value属性：提交的数据值。 checked属性：让该单选按钮默认选中。 4.type="chekbox"时，作为复选框，常用属性如下： name属性：数据的名称。 value属性：提交的数据值。 checked属性：让该复选按钮默认选中。 5.type="hidden"时，作为用户不可见的一个输入区域，可以在提交表格时携带一些数据： name属性：指定数据的名称。 value属性：指定多个是真正提交的数据。 6.type="submit"时，作为提交按键，需要注意（可以配合下一个重置按钮一起看）： button标签的type属性默认值是submit。 button不要指定name属性。 input标签编写的按钮，使用value属性指定按钮文字。 例： <input type="submit" value="点我提交表单"> <button>点我提交表单</button> 7.type="reset"时，作为重置按键，需要注意： button不要制定name属性。 input标签编写的按钮，使用value属性指定按钮文字。 例： <input type="reset" value="点我重置表单"> <button type="reset">点我重置表单</button> 8.type='button"时，作为一个普通按钮： 注：普通按钮的type值为button，若不自己设置将默认为submit导致提交表格。 例： <input type="button" value="普通按钮"> <button type="button">普通按钮</button>三.文本域
例：<textarea name="msg" rows="22" cols="3">我是文本域</textarea> 1.rows属性：指定默认显示的行数，会影响文本域的高度。 2.cols属性：指定默认显示的队列，会影响文本域的宽度。 3.不能编写type属性，其他属性与input输入框一致。四.下拉框
例：<span data-type="text" style="color: var(--b3-font-color3);"><select name="from"></span> <option value="黑">黑龙江</option> <option value="辽">辽宁</option> <option value="吉">吉林</option> </select> 1.name属性：指定数据的名称。 2.option标签设置value属性，如果没有value属性，提交的数据是option中间的文字；如果设置了value属性，提交的数据就是value的值（建议设置value属性）。 3.option标签设置了selected属性，表示默认选中。
| 列；
|
|---|
| 列；
|
| 列；
|
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于