Web前端基础知识(一)
前端是构建网页的一部分,负责用户在浏览器中看到和与之交互的内容。
网页是在浏览器中呈现内容的文档或页面。
通常,网页使用HTML、CSS、JavaScript(JS)组成。
HTML:定义了页面的结构和内容。包括文本、图像、链接等。
CSS:定义页面的样式和布局。
JS:用于添加交互性和动态功能作用。
---------------------------------------------------------------------------------------------------------------------------------
浏览器,建议使用谷歌浏览器,安装步骤:
使用电脑自带的浏览器,搜索“联想应用商店”--->选择安装第一个稳定版本。具体步骤可参考B站大佬 up主“葡萄数码笔记”。
---------------------------------------------------------------------------------------------------------------------------------
谷歌搜索,必须联网。
---------------------------------------------------------------------------------------------------------------------------------
前端开发环境:
安装VSCode,并安装中文插件。
HTML CSS Support:写CSS代码的快捷工具。
Live Server:可以在浏览器中实时预览页面的变化。
Auto Rename Tage:在修改HTML标签时,同步修改与之匹配的另一个标签。
前端环境搭建完毕!
---------------------------------------------------------------------------------------------------------------------------------
HTML标签:
HTML(超文本标记语言),为网页提供结构。
HTML告诉浏览器哪些部分是标题,哪些部分是段落,哪些是列表等。
HTML标签可以通过属性来提供更多的信息。
标签通常是成对出现的,包括开始标签和结束标签。
<p>这是一个段落</p>
<h1>这是一个标题</h1>
<a href="#">这是一个超链接。</a>
单标签,如下:
<input type="text">
<br>
<hr>
注意:单标签用于没有内容的元素,双标签用于有内容的元素。
---------------------------------------------------------------------------------------------------------------------------------
HTML 文件结构
一个HTML文档,通常由以下几个部分组成:
<!DOCTYPE html> -----------------告诉浏览器这是一个HTML文件。
<html>
</html> -------------------------------HTML标签对,也是HTML文档的根元素。HTML文档起 始标志。也是文档的最外层容器。
<head>
</head>-------------------------------head标签对,包含文档的元信息,比如,文档的标题;
文档的编码格式;一些CSS、js文件。
<body>
</body>-------------------------------包含了,实际显示在浏览器中的页面内容。
---------------------------------------------------------------------------------------------------------------------------------
常用文本标签
1.标题标签。HTML中有6个标题标签,分别用 h1 到 h6 表示。
2.段落标签。<p> </p>
3.HTML的文本格式化标签。<b></b>;<i></i>;<u></u>;<s></s>
4.一个外部的<ul></ul>,包裹着几个<li></li>
5.一个外部的<ol></ol>,包裹着几个<li></li>
6.一个外部的<table></table>,行标签<tr></tr>,行标签中包裹着列标签<td></td>
7.表格列标题:<tr><th>此处为表格列标题</th></tr>
---------------------------------------------------------------------------------------------------------------------------------
举例:<p>更改文本样式:<b>字体加粗</b>,<i>斜体</i>、<u>下划线</u>,<s>删除线</s></p>
效果:更改文本样式:字体加粗,斜体、下划线,删除线
---------------------------------------------------------------------------------------------------------------------------------
举例:
<ul>
<li>无序列表元素1</li><li>无序列表元素2</li><li>无序列表元素3</li>
</ul>
效果:
- 无序列表元素1
- 无序列表元素2
- 无序列表元素3
---------------------------------------------------------------------------------------------------------------------------------
举例:
<ol>
<li>有序列表元素1</li><li>有序列表元素2</li><li>有序列表元素3</li>
</ol>
效果:
- 有序列表元素1
- 有序列表元素2
- 有序列表元素3
---------------------------------------------------------------------------------------------------------------------------------
举例:
<table>
<tr>
<th> 列标题1</th>
<th> 列标题2</th>
<th> 列标题3</th>
</tr>
<tr>
<td>元素1</td>
<td>元素2</td>
<td>元素3</td>
</tr>
</table>
效果:
列标题1列标题2列标题3
元素1元素2元素3
---------------------------------------------------------------------------------------------------------------------------------
后续内容见《Web前端基础知识(二)》