这篇博客是前端学习的开篇，详细介绍了HTML的基础知识，包括超链接、锚点、行内块、图片、路径关系，以及初步接触了CSS。作者通过实例演示了如何使用这些元素，并预告下一次将讲解选择器。
前端学习会遇到的“困难”
互联网 ***科技有限公司
后端开发工程师
提供相对应的数据
前端开发工程师
连接 后端与用户的 桥梁
HTML+css 实现静态页面
js 添加交互
HTML 解构层
css 修饰层
js 交互层
大前端
彻底的前后端分离
Vue
React 前端框架
微信小程序 支付宝 今日头条 抖音 微博 公众号
uniApp 混合app开发 开发 安卓苹果的 App
hmOs 鸿蒙os 万物互联 开发 app 桌面端
UI设计(美工)
软件测试
js演示：
<body>
<div id="box"></div>
</body>
<script>
/*
写样式
请求数据 渲染数据
*/
// DOM 操作
var str = ``
for (var i = 1; i <= 1000; i++) {
str += `<h1>${i}</h1>`
}
box.innerHTML = str
</script>
html介绍：
<!-- 文档类型声明 -->
<!DOCTYPE html>
<!-- 跟标签 所有的网页内容 都需要在 这个 标签内部 -->
<!-- lang="en"指定语言 en 英文 zh 中文 -->
<html lang="zh">
<!-- 头部标签 外部的css 网页元信息 网页标题 -->
<head>
<!-- 网页元信息 -->
<!-- charset 指定 页面编码方式 -->
<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>下下周开学</title>
<style>
/* 样式 */
/*
标签选择器
h1 标签名选择器
.txt 类名选择器
id 选择器
*/
/*
优先级问题(权重) id>class>tagName
*/
.txt {
color: red;
}
#msg {
color: blue;
}
h1 {
color: green;
}
</style>
</head>
<!-- 网页主体内容 标签 -->
<body>
<!-- 标签 -->
<!-- class="txt" 类名 -->
<!-- id="msg" id -->
<h1 class="txt" id="msg">hello word</h1>
</body>
</html>
标签介绍：
<!-- 文档类型声明 告诉你的浏览器 -->
<!DOCTYPE html>
<!-- 根标签 所有的东西 都写里面 -->
<!-- lang="en" 指定网页语言 en英语 zh中文 -->
<html lang="zh">
<!-- 头部标签 指定 网页元信息 网页标题 引入 三方资源 -->
<head>
<!-- 网页元信息 -->
<!-- charset="UTF-8" 指定你的 编码方式 -->
<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>ABC</title>
</head>
<!-- 盛放 主题内容 标签都写里面 -->
<body>
<!-- 常用的块元素 -->
<!--
块元素的特性
独占一行
在没有单独设置宽高的时候
宽 跟父元素同宽
高 靠内容撑起来的
可以设置宽高
-->
<div>容器标签 没有任何 语义</div>
<div style="width: 500px;">
<!-- 标题 -->
<h1>hello word</h1>
<h2>hello word</h2>
<h3></h3>
<h4>hello word</h4>
<h5>hello word</h5>
<h6>hello word</h6>
</div>
<!-- 段落 -->
<p>hello word</p>
<!-- 有序列表 -->
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>3</li>
</ol>
<!-- 无序列表 -->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>3</li>
</ul>
<hr>
<!-- 行内元素 -->
<!--
共处一行
不能设置宽高
宽高 靠内容撑起来的
-->
<span style="width: 200px;">1111</span>
<span>2</span>
<span>3</span>
<a>4</a>
<a>5</a>
<a>6</a>
<i>7</i>
<strong>8</strong>
</body>
</html>
标签学习：
01超链接 ：
<style>
a {
/* 背景色 */
background-color: rgb(27, 161, 155);
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<!--
a标签 是一个 行内元素
href 指定链接地址
target blank 在新的标签页 打开
-->
<a href="https://www.baidu.com" target="_self">百度一下</a>
<!-- <a href="">百度一下</a>
<a href="">百度一下</a> -->
<!-- <h1>eeeee</h1> -->
<div>
<h1>he<span>ll</span>o</h1>
</div>
<!-- sssss
注释 ctrl+/
保存 ctrs+s
撤回 ctrl+z
前进 ctrl+y
-->
</body>
（a标签加入后鼠标经过会自动变成可选择状态，点击跳转）
02锚点 ：
<body>
<!--
在href 中 填写 Id的时候 页面会跳转到对应元素的位置
-->
<a href="#hnlt">下载地址</a> /在这里设置id/
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1 style="color: red;" id="hnlt" >河南联通</h1> /填写设置的id，实现跳转功能
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
</body>
完成跳转功能注意第二张图片的滚动条~
03行内块：
<style>
img {
/* width: 200px; */
/* height: 200px; */
}
</style>
</head>
<body>
<!-- 块 行内 行内块 -->
<!-- 常见的行内块 -->
<!--
横向排列
可以设置宽高
宽高不设置 靠内容撑起
-->
<img src="http://contentcms-bj.cdn.bcebos.com/cmspic/5d96bedfcc1b4e4edf9d119fde6473dd.jpeg?x-bce-process=image/crop,x_0,y_0,w_665,h_362"
alt="">
<img src="http://contentcms-bj.cdn.bcebos.com/cmspic/5d96bedfcc1b4e4edf9d119fde6473dd.jpeg?x-bce-process=image/crop,x_0,y_0,w_665,h_362"
alt="">
<!-- <input type="text" name="" id=""> 表单 -->
<!-- <select name="" id=""></select> 表单 -->
</body>
04图片：
<style>
img {
height: 500px;
/* width: 500px; */
}
</style>
</head>
<body>
<!-- <div style="width: 500px;"> -->
<!--
图片 行内块 宽高 只需要定义 其中一个 另外一个 会自适应等比例 放大或者缩小
如果宽高 没有按照 原始宽高比 进行设置 图片就会被拉伸或者 压缩 ,就会失真
-->
<!-- 引入网络路径 -->
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202103%2F08%2F20210308015418_7793f.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648715447&t=304d8b867d6131259eabab5eb2dfd357"
alt="">
<!-- </div> -->
<!-- 本地路径 -->
<img src="./aaa.jpg" alt="">
</body>
05相对路径&绝对路径：
<body>
<!-- 相对路径 -->
<!-- title 是对 图片信息的解释 说明 鼠标悬浮 会显示 -->
<img width="500" src="./aaa.jpg" title="狗,黑狗,黑白相间的狗" alt="">
<!-- 绝对路径 -->
<img width="500" src="C:\Users\92915\Desktop\aaa.jpg" alt="">
<!-- 推荐使用 相对路径 项目 最终是要放到 服务器上的 ,并不能保证 在服务器 相对应的 位置 有该图片 -->
<!--
思考 你在百度里面 搜索 美女图片 , 为啥 出来的结果 就全是美女???
百度在进行搜索引擎 抓取的时候 会抓取 相关字段的所有内容 img的title就被抓取
-->
</body>
此时我更换了电脑，运用相对路径的照片因为在该文件目录中，所以“狗”还在，而在别人的电脑桌面运用绝对路径没有出现“刘亦菲”，原因是找不到该图片~
06input：
<body>
<!-- 行内块 -->
<!--
type 指定 输入框类型
value 指定输入框的默认填写的内容
placeholder 输入框提示信息 一旦输入其他内容 就会消失
-->
<!-- type="text" 文本输入框 -->
<input style="height: 50px;" type="text" placeholder="请输入用户名" value="">
<!-- type="password" 密码框 -->
<input style="height: 50px;" type="password" placeholder="请输入密码" value="">
<!-- type="date" 日期选择框 -->
<input style="height: 50px;" type="date" placeholder="请选择日期" value="">
<!-- type="radio" 单选框 -->
<!--
单选框 name 属性相同 才能单选
checked 默认选中
-->
<input style="height: 50px;" type="radio" name="sex" checked>🚹
<input style="height: 50px;" type="radio" name="sex">🚺
<!--
单选框 name 属性相同 才能单选
checked 默认选中
-->
<input style="height: 50px;" type="checkbox" checked> 自动登录
<button>按钮</button>
</body>
07select：
<body>
<select id="val">
<!-- value 是给的敲代码看的 上海 是给用户看的 -->
<option value="上海">上海</option>
<option value="b">杭州</option>
<option value="c">苏州</option>
<option value="d">深圳</option>
<option value="e">北京</option>
</select>
</body>
<script>
val.onchange = function () {
alert(this.value)
}
</script>
09扩大点击区域：
<body>
<!-- 用 label 包裹起来 可以扩大可点击区域 -->
<label>
<input type="checkbox" checked> 自动登录
</label>
<hr>
<!-- for 里面填写 id 可以远程选中 -->
<label for="a">
自动登录
</label>
<input type="checkbox" id="a" checked>
</body>
此时鼠标经过字体时也能点击实现区域扩大，大家可以复制代码段查看效果~
表格学习
01表格：
<style>
table {
/* width: 500px; */
/* height: 400px; */
}
</style>
</head>
<body>
<!-- 表格 块元素 -->
<!--
cellpadding 填充单元格大小
cellspacing 调整单元格之间的 距离
tr 行
th td 列 th 表头
-->
<table border="1" cellpadding="30" cellspacing="1">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>手机号</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>20</td>
<td>15539530805</td>
</tr>
</table>
</body>
02表格合并：
<body>
<!-- 座位表 -->
<table border="1" cellpadding="20">
<tr>
<th colspan="5">讲台</th>
</tr>
<tr>
<td>张三</td>
<td rowspan="5">过道</td>
<td>李四</td>
<td rowspan="5">过道</td>
<td>王五</td>
</tr>
<tr>
<td>张三</td>
<!-- <td>过道</td> -->
<td>李四</td>
<!-- <td>过道</td> -->
<td>王五</td>
</tr>
<tr>
<td>张三</td>
<!-- <td>过道</td> -->
<td>李四</td>
<!-- <td>过道</td> -->
<td>王五</td>
</tr>
<tr>
<td>张三</td>
<!-- <td>过道</td> -->
<td>李四</td>
<!-- <td>过道</td> -->
<td>王五</td>
</tr>
<tr>
<td>张三</td>
<!-- <td>过道</td> -->
<td>李四</td>
<!-- <td>过道</td> -->
<td>王五</td>
</tr>
</table>
</body>
<script>
/*
<table border="1" cellpadding="20">
<!--
colspan 跨几列
rowspan 跨几行
-->
<tr>
<td style="text-align: center;" colspan="2">1</td>
<!-- <td>2</td> 不需要 -->
</tr>
<tr>
<td rowspan="3">3</td>
<td>4</td>
</tr>
<tr>
<!-- <td>5</td> -->
<td>6</td>
</tr>
<tr>
<!-- <td>7</td> -->
<td>8</td>
</tr>
</table>
*/
// console.log("1"+1);
console.log(0.1 + 0.2);//浮点运算
</script>
03实体字符：
<body>
<h1>hello world</h1>
<h1>®</h1>
<h1>©</h1>
<h1>™</h1>
<h1><</h1>
<h1>></h1>
<h1>< ></h1>
<h1>长叹息以"掩涕"兮</h1>
<h1>长叹息以"掩涕"兮</h1>
<h1>♣</h1>
<h1>α</h1>
<h1>β</h1>
<h1>ξ</h1>
<h1>hel lo</h1>
</body>
<script>
var str=""
</script>
04格式化标签 ：
<style>
h1 {
/* text-align: center; */
}
</style>
</head>
<body>
<h1>
<center>hello</center>
</h1>
<hr>
<h1>
hello
world
html
css
js
</h1>
<pre>
hello
world
html
css
js
</pre>
<hr>
<span>1</span>
<span>1</span>
<span>1</span>
<br>
<span>1</span>
<span>1</span>
<span>1</span>
<hr>
<span>1</span>
<!-- https://www.renrendoc.com/paper/129417945.html -->
</body>
实体字符：
路径关系
<!-- /向下 -->
<!-- <img src="img/a/b/aaa.jpg" alt=""> -->
<!-- ../ 向上 -->
<!-- <img src="../../../aaa.jpg" alt=""> -->
<!-- 绝对路径 -->
<img src="D:\ToDesk\aaa.jpg" alt="">
css
01css引入方式：
<!--
内嵌式 在head 标签内部 书写 style 标签 在 style中 写样式
缺点 1不能复用
2当你的页面规模比较大时 会让你的 代码 冗长，不便于后期维护
-->
<style>
h1 {
color: darkcyan;
}
</style>
<!--
外链式
-->
<link rel="stylesheet" href="./01test.css">
</head>
<body>
<!--
行内样式
缺点：1 html css 混写 结构不直观
2 多个元素 相同样式 需要重复书写
-->
<h1 style="color: red;">hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
</body>css代码：
h1{
font-size: 100px;
}
刚学的同学要注意：css需要在总文件夹创建，与html文件同级目录中
扫一扫
2170
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
