HTML
前端技术基础
-
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:用于实现元素的拖放功能。