前端技术基础

HTML

什么是HTML

HTML（Hyper Text Markup Language）是一种用于创建网页内容的标记语言。

HTML常用的基本标签

HTML常用的基本标签

1. 标题标签：h1, h2, h3, h4, h5, h6

h标签表示标题一般字号会根据h后面跟着的数字的增大而减小

h1示例

h2示例

h3示例

2. 段落标签：p

当需要显示一段段的文字的时候

示例:

段落示例

段落示例2

3. 链接标签：a

当需要创建一个链接的时候链接里面可以是本系统的其他网页也可以是其他域名的网页也可以是其他标签

示例： 这是一个链接 示例2：a标签作为锚点 跳转到锚点

标签用于创建超链接。 href 属性用于指定链接的目标地址。在这里，它指向了页面中id为"section1"的元素。跳转到锚点是链接的文本内容，用户在页面上看到的就是这个文字。

4. 图片标签：img

当需要插入一张图片的时候

示例：

示例2：图片标签的alt属性 这是一张图片

alt属性用于指定图片无法显示时的替代文本，有助于搜索引擎优化和无障碍访问。

图片标签的src属性可以是相对路径也可以是绝对路径。

示例：

在HTML中，可以使用相对路径或绝对路径来引用外部资源，如CSS样式表、JavaScript脚本文件等。相对路径是相对于当前文档的位置，而绝对路径是从网站的根目录开始的完整URL。

示例：

5. 列表标签：ul, ol, li,dl

ul和ol标签用于创建无序列表和有序列表。li标签用于定义列表项。

示例：

列表项1
列表项2
列表项3

列表项1
列表项2
列表项3

定义列表项: 描述列表项的内容; 描述列表项的内容2
定义列表项2: 描述列表项的内容2-1; 描述列表项的内容2-2

6. 强调标签：em, strong u

em标签用于表示斜体文本，而strong标签用于表示加粗文本。

示例：

斜体文本

加粗文本

下划线文本

加粗

7. 注释标签：

注释标签用于在HTML代码中添加注释，不会被浏览器解析和显示。

示例：

HTML标签的属性

HTML标签的属性用于为标签添加额外的信息。这些属性通常以键值对的形式出现，例如：name="value"。

示例： <img src="images/讯飞杯2.jpg" alt="描述文字" width="300" height="200" >

在上述示例中，width和height属性分别设置了图片的宽度和高度。

p标签的常用属性

1. 文本对齐：align属性用于设置段落的对齐方式，可选值有left、center和right。

示例：

居中对齐

右对齐

左对齐

2. 行间距：line-height属性用于设置段落的行间距。

示例：

行间距为1.5倍字体大小

3. 文本缩进：indent属性用于设置段落的首行缩进。

示例：

首行缩进2个字符宽度

4. 字体大小：font-size属性用于设置段落的字体大小。

示例：

字体大小为18像素

5. 字体颜色：color属性用于设置段落的字体颜色。

示例：

字体颜色为红色

6. 字体样式：font-family属性用于设置段落的字体样式。

示例：

使用Arial字体，如果Arial不可用，则使用其他无衬线字体

a标签的常用属性

1. 链接地址：href属性用于指定链接的目标地址。

示例： 这是一个链接

2. 链接文本：link和visited属性用于设置链接的样式。

示例： 这是一个链接

3. 鼠标悬停效果：title属性用于设置鼠标悬停在链接上时显示的提示信息。

示例： 这是一个链接

表格

班级学生信息统计
班级	姓名	年龄	学号	性别	宿舍	籍贯	兴趣1	兴趣2	兴趣3
合计人数8人
工业应用软件开发	李四	21	20201014	女	A19N616	安徽	篮球
	王五	21	20201014	女	A19N616	安徽	篮球	唱跳	Rap
	赵六	21	20201014	女	A19N618	安徽	篮球	唱跳
	孙七	21	20201014	女	A19N618	安徽	篮球	唱跳	Rap
	王八	21	20201014	女	A19N618	安徽	篮球		唱跳
智能软件开发班	李四	21	20201014	女	A19N616	安徽	篮球	唱跳	Rap
	王五	21	20201014	女	A19N616	安徽	篮球	唱跳	Rap
	赵六	21	20201014	女	A19N618	安徽	篮球	唱跳	Rap
	孙七	21	20201014	女	A19N618	安徽	篮球	唱跳	Rap
	王八	21	20201014	女	A19N618	安徽	篮球	唱跳	Rap

表单

1. 表单提交后，数据会发送到指定的URL。

2. 表单中的数据通过GET方法发送，这意味着数据会被添加到URL的末尾。

2-1. 并且提交的数据不需要自己手动获取，是根据name进行自动获取并拼接的

3. 表单中的数据通过name属性进行获取，如果多个同名的input元素，则只会获取到最后一个。

3-1. 如果需要获取所有的同名input元素，可以使用数组的形式来获取，例如：document.getElementsByName('username')[0].value

4. post 在控制台的network能看到提交的formdata

5. submit按钮用于提交表单。

6. 表单提交是会产生界面跳转的，并且无法通过返回值验证数据。

form的常用元素

工号：
姓名：
密码：
性别：男女
爱好：篮球足球
国家：
评论：

HTML的分类

行内元素: 行内元素是指那些不需要独占一行，只占用其父元素宽度的HTML元素。常见的行内元素有：a、abbr、acronym、b、big、br、button、cite、code、dfn、em、i、img、input、kbd、label、map、q、samp、select、small、span、strong、sub、sup、textarea和time。
块级元素: 块级元素是指那些独占一行，占用其父元素宽度的HTML元素。常见的块级元素有：address、article、aside、base、blockquote、body、caption、center、cite、code、colgroup、dd、details、dialog、div、dl、dt、fieldset、figcaption、figure、footer、form、h1-6、head、header、hr、html、iframe、iframe、img、input、ins、kbd、label、legend、li、link、main、map、mark、menuitem、meter、nav、noscript、object、ol、optgroup、option、output、pagination、param、picture、pre、progressbar、section、selection、small、spanning element, summary, svg, table, tbody, td, template, tfoot, th, thead, time, tr, track, video等。

HTML5新增的标签

HTML5新增标签

1. 新表单控件：datalist、output、progress、meter、details和summary。

progress 标签

progress元素用于表示进度，可以设置最大值和当前值。例如：

                                <progress value="70" max="100"></progress>

2. 新的语义化标签：article、aside、details、figcaption、figure、footer、header、main、mark、nav、section、timeline等。

3. video和audio元素：用于嵌入视频和音频文件。

video 标签

video元素用于嵌入视频文件。例如：

                                <video src="movie.mp4" controls></video>

audio 标签

audio元素用于嵌入音频文件。例如：

                                   <audio src="music.mp3" controls></audio>

4. canvas元素：用于在网页上绘制图形。

5. localStorage和sessionStorage对象：用于在浏览器中存储数据。

6. web worker API：用于在后台线程中运行JavaScript，不影响页面性能。

7. geolocation接口：用于获取用户的地理位置信息。

获取地理位置

可以使用navigator.geolocation接口获取用户的地理位置信息。例如：

                                <script>
                                    if (navigator.geolocation) {
                                        navigator.geolocation.getCurrentPosition(showPosition);
                                    } else {
                                        alert("Geolocation is not supported by this browser.");
                                    }
                                    function showPosition(position) {
                                        alert("Latitude: " + position.coords.latitude +
                                        "Longitude: " + position.coords.longitude);
                                    }
                                </script>

8. drag and drop API：用于实现元素的拖放功能。