一. 网页
- 网站：众多网页的集合。
- 网页组成元素：图片，文字，声音，视频，链接。
- html语言：超文本标记语言，标记语言由一套标记标签组成。超文本：可加入图片，声音，动画，多媒体等内容，可从一个文件跳转到另一个文件，于世界各地主机的文件连接。
- 生成：HTML文件->浏览器->网页。
二. Web标准
- 是由W3C组织和其他标准化组织制定的一系列标准的集合。
- 原因：浏览器不同，其显示页面会有差异。
- 构成：
- 结构：用于网页元素进行整理和分类，现阶段主要学的是HTML。
- 表现：用于设置网页元素的版式、颜色、大小等外观样式，主要指CSS。
- 行为：指网页模型的定义及交互的编写，现阶段主要学的是JavaScript。
- 结构、样式、行为相分离。
三. HTML学习
- HTML语法规范：
- 由尖括号<>包围的关键词，eg. <html>
- 成对出现，例如<html>和</html>，双标签。
- 极少数单个标签，例如<br />,单标签。
- 标签关系
- 包含关系
<head>
<title> </title>
</head>
- 并列关系
<head> </head>
<body> </body>
- 结构标签
- html标签：根标签。
- head标签：头部，head标签中必须要设置title标签。
- title标签：标题，让页面拥有属于自己的网页标题。
- body标签：主体，元素包含文档的所有内容，页面的内容基本都放在body里面。
<html>
<head>
<title>网页名</title>
</head>
<body>
主体内容
</body>
</html>
- vscode使用
- 先保存文件为.html文件再开始编辑
- 生成框架的快捷方式是！按下tab键
- 运行：右键->open…
- 快捷键
-
快速复制一行
shift + alt + 下箭头（上箭头）
选定多个相同的单词
ctrl + d
添加多个光标
ctrl + alt + 上箭头（下箭头）
全局替换某个单词
ctrl + h 注意选择全部替换即可
选择某个区块
按住shift + alt 然后拖动鼠标
放大缩小整个编辑器界面
ctrl + 加号/减号
自动换行
alt + z
- 自定义快捷键
-
- 网页开发工具
- 文档类型声明标签：<!DOCTYPE>告诉浏览器使用哪种HTML版本来显示网页。
<!DOCTYPE html>
声明必须写在文档中的最前面位置，处于<html>标签之前。
- lang语言：
- en：英语->英文网页
- zh-CN：中文->中文网页
- 字符集：多个字符的集合
在<head>标签内，可通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。
<meta charset="UTF-8">
常用的值：GB2312、BIG5、GBK和UTF-8(万国码)
- 常用标签
- 标题标签<h1> </h1> - <h6> </h6>，重要
- 变粗，字号依次变大
- 一个标签独占一行
- 段落标签<p> </p>
- 文本根据浏览器窗口的大小自动换行
- 段落之间有空隙
- 换行标签<br />
- 单标签
- 另起一行，无缝隙，只是单纯的换行
- 文本格式化标签：粗体、斜体、删除线和下划线
- 标题标签<h1> </h1> - <h6> </h6>，重要
| 加粗 | <strong> </strong>或者<b> </b> |
| 倾斜 | <em> </em>或者<i> </i> |
| 删除线 | <del> </del>或者<s> </s> |
| 下划线 | <ins> </ins>或者<u></u> |
- 特殊标签：盒子标签，用来装内容的
- <div> </div>：分割、分区（大盒子）
一个div独占一行
- <span> </span>：跨度、跨距（小盒子）
- 图像标签和路径
- 图像标签
- <img> 单标签
- 图像标签
<img src = "图像URL" />
- src是<img>标签的必须属性，用于指定图像文件的路径和文件名。
- 其他属性
| src | 图片路径 |
| alt | 文本 替换文本 图像不能显示的文字 |
| title | 文本 提示文本 鼠标放到图像上，显示的文字 |
| width | 像素 设置图像的宽度 |
| height | 像素 设置图像的高度 |
| border | 像素 设置图像的边框粗细 |
- 属性之间不分先后顺序，标签名与属性、属性于属性之间均以空格分开。
- 属性采取键值对的格式，即key=”value"的格式
- 可有多个属性，但必须在标签名后面
- 路径：
- 目录文件夹和根目录：
根目录：打开文件夹的最外层
- 路径：
- 相对路径：以引用文件所在位置为参考，图片相对于HTML文件的位置
| 同一级 | <img src="baidu.gif" /> |
| 下一级：使用/ | <img src="images/baidu.gif" /> |
| 上一级：使用../ | <img src="../baidu.gif" /> |
- 绝对路径：目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径
- 超链接标签<a> </a>
- 语法规范
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
| href | 链接目标的url地址（必须属性），当标签应用href属性时，他就具有了超链接功能 |
| target | 指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中的打开方式 |
- 链接分类
- 外部链接：<a href="http://www.qq.com" target="_self"> 腾讯</a>
- 内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可，例如<a href="index.html">首页</a>。
- 空链接：如果当时没有确定链接目标时，<a href="#">首页</a>。
- 下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件。
- 网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。
- 锚点链接：点击链接，可以快速定位到页面中的某个位置。
- 在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第2集</a>
- 找到目标位置标签，里面添加一个id属性=刚才的名字，如<h3 id="two">第2集介绍</h3>
- 注释和特殊字符
- 注释标签：以“<!--”开头，以“-->”结束。快捷键：ctrl+/
- 特殊字符：
| 空格字符 | |
| 小于号< | < |
| 大于号> | > |
| 和号& | & |
| 人民币 | ¥ |
| 版权 | © |
| 注册商标 | ® |
| 度° | ° |
| 正负号 | ± |
| 乘号 | × |
| 除号 | ÷ |
| 平方（上标2） | ² |
| 立方（上标3） | ³ |
四. HTML学习——第二阶段
- 表格标签
- 主要作用：显示、展示数据，使其规整
- 基本语法
- 表格：<table> </table>
- 行：<tr> </tr>
- 单元格：<td> </td>
- 表头单元格：<th></th>加粗并居中显示
- 表格属性
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500">
| align(left、center、right) | 对齐 |
| border(1或“”) | 边框，默认“”，表示没有边框 |
| cellpadding（像素值） | 单元边沿与其内容之间的空白，默认像素1 |
| cellspacing（像素值） | 单元格之间的空白，默认像素2 |
| width（像素值或百分比） | 表格的宽度 |
| heigh | 高度 |
- 表格结构标签
- 头部标签：<thead>
- 主体区域：<tbody>
- 合并单元格
- 方式
- 跨行合并：rowspan
- 跨列合并：colspan
- 三步
- 先确定跨行还是跨列合并
- 找到目标单元格，写上合并方式=合并的单元格数量。比如：<td colspan="2"> </td>
- 删除多余的单元格。
- 方式
- 列表标签
- 主要作用：布局页面，整齐、有序，它作为布局会更加自由和方便。
- 分类：
- 无序列表（重点）<ul> </ul>
- 并列，无序
- <ul> </ul>中只能嵌套<li> </li>，直接在ul标签中输入其他标签或文字都是错误的
- <li> </li>里面什么都能放
- 会带有自己的样式属性
- 无序列表（重点）<ul> </ul>
<ul>
<li>榴莲</li>
<li>青椒</li>
<li>羊肉</li>
</ul>
- 有序列表 <ol></ol>（规则同上）
<ol>
<li>榴莲 10</li>
<li>青椒 7</li>
<li>羊肉 5</li>
</ol>
- 自定义列表<dl> </dl>（规则同上）
<dl>
<dt>原因</dt>
<dd>味道</dd>
<dd>身体</dd>
<dd>事件</dd>
</dl>
- 表单标签
- 作用：收集用户信息
- 组成：
- 表单域<form> </form>
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
- 作用：用户信息的收集和传递
- <form>会把它范围内的表单元素信息提交给服务器
| action | url地址 | 接收并处理表单数据的服务器程序的url地址 |
| method | get/post | 设置表单数据的提交方式，其取值为get或post |
| name | 名称 | 表单的名称，以区分同一个页面中的多个表单域 |
- 表单控件（表单元素）
| <input> | 输入表单元素 |
| <select> | 下拉表单元素 |
| <textarea> | 文本域元素 |
- <input type="类型" name="元素名称" value="元素的值" checked="元素首次加载时应当被选中" maxlength="输入字符最大长度">
- 注意：
- 要求单选按钮和复选框要有相同的name值
- name和value是每个表单元素都有的属性值，主要给后台人员使用
- checked主要针对单选按钮和复选框的初始状态（被选中or未被选中）
- 属性值
- type
- 注意：
| button | 可点击按钮（可用于通过JS启动脚本） |
| checkbox | 复选框 |
| file | 输入字段和“浏览”按钮，供文件上传 |
| hidden | 隐藏的输入字段 |
| image | 图像形式的提交按钮 |
| password | 密码字段，该字段中的字符被掩码 |
| radio | 单选按钮 |
| reset | 重置按钮，会清除表单中的所有数据 |
| submit | 提交按钮，会把表单数据发送到服务器 |
| text | 单行的输入字段，用户可在其中输入文本，默认宽度为20个字符 |
- name：自定义
- value：自定义
- checked：checked
- maxlength：正整数
补充：<lable>标签：绑定一个表单元素
<lable for="sex">男<lable>
<input type="radio" name="sex" id="sex" />
- <select>下拉表单
- 使用场景：在页面中，如果有多个选项让用户选择，并且想要节省页面控件时。
- 语法规范
书单：
<select>
<option>《全球高考》</option>
<option>《撒野》</option>
<option>《魔道祖师》</option>
<option>《某某》</option>
<option>《破云》</option>
<option>《吞海》</option>
<option>《伪装学渣》</option>
</select>
- 在<option>里面定义select=“selected”时，当前项即为默认选中项。不写的话，默认第一个为默认选中项。
- <textarea>文本域元素
- 使用场景：用户输入内容较多的情况，用于定义多行文本输入的控件（留言板，评论）
- 语法规范
<form>
今日反馈：
<textarea>
</textarea>
t</form>
- 提示信息
592
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
