H5-前端学习-01前端入门

最新推荐文章于 2024-07-19 11:29:17 发布

前端小火龙

最新推荐文章于 2024-07-19 11:29:17 发布

阅读量913

点赞数 3

分类专栏： 0基础新手入门适合小白文章标签：前端学习 servlet

本文链接：https://blog.csdn.net/gy_gsdsb/article/details/126085355

版权

0基础同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

新手入门

8 篇文章 0 订阅

订阅专栏

适合小白

8 篇文章 0 订阅

订阅专栏

哈喽，各位小伙伴，今天开始，我们就会开始更新一些前端的文章，想学习前端的小伙伴，特别是0基础的小伙伴，或者对此感兴趣的小伙伴，可以关注我，我会保持更新

Web组成
结构层----------------HTML
表现层（样式）------CSS
行为交互------------------JS

HTML：超级文本标记语言
HTML5：超级文本标记语言第五个版本，5代表版本号
H5：包含了HTML，CSS，JS

文件命名规则：
1.不能用中文命名
2.不要以数字开头
3.建议使用数字，字母，下划线组合命名，不要包含空格和特殊字符（！#￥%&*）
4.建议使用英文命名（看见名字知道干嘛的）
5.网站首页只能起名为index.html

emmet:tab按下TBA出现拓展缩写，需要先在设置里输入这个，然后进去勾选即可

一般来说，设置完毕之后，输入！再按住Tab就可以自从补齐代码开头，除此之外也可以直接输入doc或者HTML，自动补齐

页面基本结构
<!DOCTYPE html>-------------------声明文档类型为HTML
<html lang="en">-----------------说明当前页面使用的是HTML语言
<head>---------------------当前文件(页面)头部
<meta charset="UTF-8">----------声明页面编码格式为UTF-8
<title>测试</title>---------------文件标题，显示在浏览器状态栏上
</head>
<body>
想要展示的文本内容与结构层代码
</body>
</html>

HTML基本语法：
双标签：
语法：<标签名属性="属性值" 属性="属性值" 属性="属性值"></标签名>
特点：
1.双标成对出现，有开始有结束
2.属性和属性值用等号连接
3.属性值放在引号内(引号可以是单引号也可以是双引号)
4.可以有多个属性或是没有
例如：<title>测试</title>
单标签
语法：<标签名属性="属性值" 属性="属性值" 属性="属性值">
特点：
1.自己独立出现
2.属性和属性值用等号连接
3.属性值放在引号内(引号可以是单引号也可以是双引号)
4.可以有多个属性或是没有
5.标签后的/可加可不加
例如：<meta charset="UTF-8">

例如：<张三姓名="张三" 性别="男" 身高="180" 体重="60KG">
姓名，性别，身高，体重可以看成属性；(是一个描述)
张三，男，180，,60KG可以看成属性值；(是对描述的赋值)

常用标签：
1.标题标签
<h1>一级标题内容</h1>
<h2>二级标题内容</h2>
<h3>三级标题内容</h3>
<h4>四级标题内容</h4>
<h5>五级标题内容</h5>
<h6>六级标题内容</h6>
一级标题常用来做页面大的标题或者页面logo(通常一个页面只出现过一次)
二级，三级标题标签常用来实现页面的副标题
四级，五级，六级标题标签根据具体情况来使用
特点:
1.h1-h6字号由大到小；
2.字体有加粗效果；
3.标题标签自己独占一行，并且自带间距

2.段落标签
<p>段落文本内容</p>
特点：
1.字体独占一行
2.自带间距

3.换行标签(强制换行标签)
<br>

4.空格标签: 
5.水平线标签：<hr>
6.字体加粗标签：
<b>文本内容</b>
<strong>文本内容</strong>(更具有强调性，推荐使用)
7.字体倾斜标签：
<i>文本内容</i>
<em>文本内容<em>(更具有强调性，推荐使用)
8.删除线标签：
<s>文本内容</s>
<del>文本内容 </del>
9.下划线标签：
<u>文本内容</u>
10.角标标签：
上角标标签：<sup>文本内容</sup>
下角标标签：<sub>文本内容</sub>
11.图片标签：
<img src="路径" alt="提示信息" title="鼠标悬停提示信息">
src路径：
相对路径：
1.当前文件与目标文件在同一级别，src"文件名+后缀名"
2.当前文件与目标文件所在的文件夹在同一级别，src="文件夹名/文件名+后缀名"
3.当前文件所在的文件夹与目标文件所在的文件夹在同一级别，src="../文件夹名/文件名+后缀名"
说明：../表示向上找一级； ../../表示向上找两级，一次类推
绝对路径：
1.电脑下具体某一个盘符下
2.在具体某一个网址上
alt:提示信息(只有在图片加载失败后才能看到)
title:鼠标悬停提示信息
12.超链接标签
<a href="路径(连接地址)" target=""> </a>
特点：
1.超链接默认字体颜色蓝色
2.超链接标签默认自带下划线
3.超链接标签默认在当前窗口打开新页面
target：控制浏览器是否打开新窗口
取值：
1._self--------在当前窗口打开页面(默认值 )
2._blank-------在新窗口打开页面