HTML 前端基础笔记
一、Web 前端三大核心技术
| 技术 | 全称 | 作用 | 定位 |
|---|---|---|---|
| HTML | 超文本标记语言 | 搭建网页结构、展示内容 | 内容层 |
| CSS | 层叠样式表 | 美化页面、控制布局 | 表现层 |
| JavaScript | JS 脚本语言 | 实现交互、动态效果 | 行为层 |
二、网页基础概念
- HTTP：超文本传输协议，负责传输网页内容
- DNS：域名系统，将域名解析为 IP 地址
- URL：统一资源定位符，网页地址
- 网页：HTML 代码文件，后缀
.html - 首页：网站默认首页面，常用名
index.html/default.html - 网站：多个网页组成的页面集合
三、HTML 基础结构
<!DOCTYPEhtml><html><!-- 头部：配置信息、标题、引入资源 --><head><metacharset="UTF-8"><title>网页标题</title></head><!-- 身体：网页可见内容 --><body>页面内容</body></html>- !DOCTYPE html：文档类型声明，告诉浏览器用 HTML5 解析
- html：根标签 head：页面配置区
body：页面内容区
四、head 内常用标签
<!-- 字符编码 --><metacharset="UTF-8"><!-- 网页标题 --><title>标题</title><!-- 关键词（SEO） --><metaname="keywords"content="关键词"><!-- 页面描述（SEO） --><metaname="description"content="描述"><!-- 引入外部 CSS --><linkrel="stylesheet"href="style.css"><!-- 内部 CSS --><style>h1{color:red;}</style><!-- 引入 JS --><scriptsrc="xx.js"></script>SEO 三大标签 TDK
Title：页面标题，搜索结果标题
Description：页面描述，搜索结果摘要
Keywords：关键词（权重较低）
五、HTML 常用基础标签
文本标签
<h1>~<h6>：六级标题 <p>：段落（自动换行、留白） <span>：行内文本容器 <br>：换行 <hr>：水平线 <div>:盒子 <a>超链接img图片列表标签
<!-- 无序列表 --> <ul> <li>列表项</li> </ul> <!-- 有序列表 --> <ol> <li>列表项</li> </ol>六、图片标签 img
<img src="图片路径" alt="加载失败提示" title="鼠标悬浮提示" width="200" height="100">属性
src：图片路径（必填）
绝对路径：从根目录出发的完整路径，不依赖当前位置
相对路径：从当前位置出发的路径，依赖当前目录
路径：./ 当前目录；…/ 上一级目录
alt：图片无法显示时的替代文字
title：鼠标悬浮提示
width/height：宽高
路径：./ 当前目录；…/ 上一级目录
七、超链接标签a
<a href="目标地址" target="_blank">链接文字</a> 属性 href：跳转目标（必填） target：打开方式 _self：当前页（默认） _blank：新标签页链接分类
普通链接：<a href="xxx.html"> 锚链接：同一页面 / 跨页面跳转到指定位置 <!-- 设置锚点 --> <a name="anchor"></a> <!-- 跳转锚点 --> <a href="#anchor">回到顶部</a> 功能性链接：javascript:alert('提示')八、表格标签 table
<table border="1" cellspacing="0" cellpadding="5"> <tr> <!-- 行 --> <td>单元格</td> <!-- 列 --> </tr> </table>属性
border：边框
cellspacing：单元格间距
cellpadding：内容与边框距离
colspan：合并列
rowspan：合并行
九、表单标签 form
作用：收集用户信息（注册、登录、问卷）
<form action="提交地址" method="提交方式"> 表单元素 </form>提交方式
get：数据拼在 URL 后，速度快、不安全
post：数据放在请求体，安全、适合传文件
常用表单元素
<!-- 文本框 --> <input type="text" placeholder="请输入"> <!-- 密码框 --> <input type="password"> <!-- 单选框 --> <input type="radio" name="sex" value="男"> <!-- 复选框 --> <input type="checkbox" name="hobby" value="游泳"> <!-- 下拉菜单 --> <select> <option>选项</option> </select> <!-- 文本域 --> <textarea rows="5" cols="20"></textarea> <!-- 文件域 --> <input type="file"> <!-- 按钮 --> <input type="submit" value="提交"> <input type="reset" value="重置"> <input type="button" value="普通按钮"> 注意：表单元素必须加 name 才能提交数据十、内嵌框架 iframe
作用：在当前页面嵌入另一个网页
<iframe src="xxx.html" width="500" height="300" frameborder="0"></iframe>属性
src：嵌入页面地址
width/height：宽高
frameborder：边框（0 无边框）
name：框架名
scrolling：是否显示滚动条
十一、HTML / XHTML / XML 区别
HTML：语法宽松，用于展示网页
XHTML：HTML 严格版，语法更规范
XML：自定义标签，用于存储 / 传输数据
的优化调度 设备： 风力、光伏、燃气轮机、燃气内燃机、...)
