提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
前言
为了跟上时代的脚步，在大学学习更多有用的知识，我开始了第一周的学习——HTML与CSS。（学习尚硅谷的课程，觉得老师比较优秀，我的笔记参考了老师的笔记）
前序：准备工作
一. 常用电脑设置
-
查看文件夹内容的几种布局。
-
展示文件扩展名（文件后缀）。
-
使用指定程序打开文件。
-
配置文件的默认打开方式。
二. 安装Chrome浏览器
下载地址：https://www.google.cn/chrome。
三. 安装 VSCode
-
安装中文语言包。
-
使用 VSCode打开文件夹的两种方式。
-
调整字体大小。
-
设置主题。
-
安装图标主题： vscode-icons 。
（一）HTML的基本结构
<html>
<head>
<title>网页标题</title>
</head>
<body>
......
</body>
</html>
一、HTML注释
<!-- 下面的文字只能滚动一次 -->
<marquee loop="1">尚硅谷</marquee>
<!-- 下面的文字可以无限滚动 -->
<marquee>尚硅谷123</marquee>
同时当选中一串代码时，可以使用Ctrl+shift+/的快捷键来注释代码
二、HTML 文档声明
<!DOCTYPE html>
或
<!DOCTYPE HTML>
或
<!doctype html>
注意：文档声明，必须在网页的第一行，且在 html 标签的外侧。
三、字符编码
<head>
<meta charset="UTF-8"/>
</head>
通常都使用“UTF-8"的字符编码。
四、HTML 设置语言
<html lang="zh-CN">
<html lang="***">
不同国家的HTML语言：
zh-CN ：中文-中国大陆（简体中文）
zh-TW ：中文-中国台湾（繁体中文）
zh ：中文
en-US ：英语-美国
en-GB ：英语-英国
五、HTML标准结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我是一个标题</title>
</head>
<body>
</body>
</html>
在visual studio中可以输入英文的！后回车自动生成。
其中的title标签为网页的标题，及如图所示：
（二）HTML基础
一、排版标签
注意事项：
-
h1 最好写一个， h2~h6 能适当多写。
-
h1~h6 不能互相嵌套，例如： h1 标签中最好不要写 h2 标签了。
-
p 标签很特殊！它里面不能有： h1~h6 、 p 、 div 标签。
二、块级元素与行内元素
-
块级元素：独占一行（排版标签都是块级元素）。
-
行内元素：不独占一行。
-
使用原则：
（1）. 块级元素 中能写 行内元素 和 块级元素（简单记：块级元素中几乎什么都能写）。
（2）. 行内元素 中能写 行内元素，但不能写 块级元素。
（3）. 一些特殊的规则：
h1~h6 不能互相嵌套。
p 中不要写块级元素。
三、常用的文本标签
1.em：语义为要着重阅读的内容，是双标签。
2.strong:语义为十分重要的内容(语气比em要强),是双标签。
3.span：没有语义，用于包裹短语的通用通用容器。
四、图片标签
1.基本使用：
2.路径的分类
（1）相对路径：以当前路径为出发点。
同级：./；
下一级：/;
上一级：…/;
（2）绝对路径：以根位置为出发点（不常用）
3.图片格式
图片质量排序：
bmp>png>jpg;
五、超链接
主要作用：从当前页面进行跳转。
可以实现：①跳转到指定页面、②跳转到指定文件（也可触发下载）、③跳转到锚点位置、④唤起指定
应用。
标签名：a；
属性：
1.href：指定要跳转到的目标。
2.target ： 控制跳转时如何打开页面，常用值如下:
_self ：在本窗口打开。
_blank ：在新窗口打开。
3.id ： 元素的唯一 标识，可用于设置锚点。
4.name ： 元素的名字，写在 a 标签中，也能设置锚点。
例子：
<!-- 跳转其他网页 -->
<a href="https://www.jd.com/" target="_blank">去京东</a>
<!-- 跳转本地网页 -->
<a href="./10_HTML排版标签.html" target="_self">去看排版标签</a>
<!-- 浏览器能直接打开的文件 -->
<a href="./resource/自拍.jpg">看自拍</a>
<a href="./resource/小电影.mp4">看小电影</a>
<a href="./resource/小姐姐.gif">看小姐姐</a>
<a href="./resource/如何一夜暴富.pdf">点我一夜暴富</a>
<!-- 浏览器不能打开的文件，会自动触发下载 -->
<a href="./resource/内部资源.zip">内部资源</a>
<!-- 强制触发下载 -->
<a href="./resource/小电影.mp4" download="电影片段.mp4">下载电影</a>
跳转到锚点
<!-- 第一种方式：a标签配合name属性 -->
<a name="test1"></a>
<!-- 第二种方式：其他标签配合id属性 -->
<h2 id="test2">我是一个位置</h2>
六、列表
1.有序列表
<h2>要把大象放冰箱总共分几步</h2>
<ol>
<li>把冰箱门打开</li>
<li>把大象放进去</li>
<li>把冰箱门关上</li>
</ol>
网页呈现的效果：
2.无序列表
<h2>我想去的几个城市</h2>
<ul>
<li>成都</li>
<li>上海</li>
<li>西安</li>
<li>武汉</li>
</ul>
3.自定义列表
<h2>如何高效的学习？</h2>
<dl>
<dt>做好笔记</dt>
<dd>笔记是我们以后复习的一个抓手</dd>
<dd>笔记可以是电子版，也可以是纸质版</dd>
<dt>多加练习</dt>
<dd>只有敲出来的代码，才是自己的</dd>
<dt>别怕出错</dt>
<dd>错很正常，改正后并记住，就是经验</dd>
</dl>
七、表格
1.基本结构：一个表格由：表格标题、表格头部、表格主体、表格脚注，四个部分组成。
2.表格中的标签：
（1）table：表格。
（2）caption：表格的标题。
（3）thead：表格头部。
（4）tbody：表格主体。
（5）tr：每一行。
（6）th、td：每一个单元格。（表头中的单元格用th，其他单元格用td）
3.跨行跨列
（1）rowspan：指定要跨的行数。
（2）colspan：指定要跨的列数。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1">
<caption>课程表</caption>
<thead>
<tr>
<th>1-1</th>
<th colspan="2">1-2</th>
<th>1-7</th>
</tr>
</thead>
<tbody>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td rowspan="2">3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
<tr>
<td>4-2</td>
<td>4-3</td>
<td>4-4</td>
</tr>
</tbody>
</table>
</body>
</html>
网页显示效果：
注意：因为有跨行跨列的存在所以应注意尽管是4✖4的表格，但是不是每一行的单元格都编写四个，实际做项目时可以先按照n✖n的表格编写后进行修改。
八、其他常用标签
1.br：换行。
2.hr：分割线。
3.pre：按原文显示。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<pre>
\ | /
\ | /
\ | /
-------------
</pre>
</body>
</html>
网页显示效果：
九、表单
1.基本结构
标签名：form——表单
输入框：input——输入框
按钮：button——按钮
2.常用的表单控件
① 文本输入框
常用属性如下：
name 属性：数据的名称。
value 属性：输入框的默认输入值。
maxlength 属性：输入框最大可输入长度。
<input> type="text">
② 密码输入框
常用属性如下：
name 属性：数据的名称。
value 属性：输入框的默认输入值（一般不用，无意义）。
maxlength 属性：输入框最大可输入长度。
<input type="password">
③ 单选框
常用属性如下：
name 属性：数据的名称，注意：想要单选效果，多个 radio 的 name 属性值要保持一致。
value 属性：提交的数据值。
checked 属性：让该单选按钮默认选中。
<input type="radio" name="sex" value="famale">女
<input type="radio" name="sex" value="male">男
④ 复选框
常用属性如下：：
name 属性：数据的名称。
value 属性：提交的数据值。
checked 属性：让该复选框默认选中。
<input type="checkbox" name="hobby" value="smoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头
⑤ 隐藏域
用户不可见的一个输入区域，作用是： 提交表单的时候，携带一些固定的数据。
name 属性：指定数据的名称。
value 属性：指定的是真正提交的数据。
<input type="hidden" name="tag" value="100">
⑥ 提交按钮
-
button 标签 type 属性的默认值是 submit 。
-
button 不要指定 name 属性
-
input 标签编写的按钮，使用 value 属性指定按钮文字。
<input type="submit" value="点我提交表单">
<button>点我提交表单</button>
⑦ 重置按钮
-
button 不要指定 name 属性
-
input 标签编写的按钮，使用 value 属性指定按钮文字。
<input type="reset" value="点我重置">
<button type="reset">点我重置</button>
⑧ 普通按钮
<input type="button" value="普通按钮">
<button type="button">普通按钮</button>
⑨文本域
-
rows 属性：指定默认显示的行数，会影响文本域的高度。
-
cols 属性：指定默认显示的列数，会影响文本域的宽度。
-
不能编写 type 属性，其他属性，与普通文本输入框一致。
<textarea name="msg" rows="22" cols="3">我是文本域</textarea>
⑩ 下拉框
-
name 属性：指定数据的名称。
-
option 标签设置 value 属性， 如果没有 value 属性，提交的数据是 option 中间的文
字；如果设置了 value 属性，提交的数据就是 value 的值（建议设置 value 属性） -
option 标签设置了 selected 属性，表示默认选中。
<select name="from">
<option value="黑">黑龙江</option>
<option value="辽">辽宁</option>
<option value="吉">吉林</option>
<option value="粤" selected>广东</option>
</select>
3.禁用表单控件
给表单控件的标签设置 disabled 既可禁用表单控件。
input 、 textarea 、 button 、 select 、 option 都可以设置 disabled 属性。
结语
本笔记仅包含重要内容，对于所学所有知识有所删减。
扫一扫
1356
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
