本文已参与「新人创作礼」活动,一起开启掘金创作之路。
前言
🎬本文章是 【JAVA WEB开发技术】 专栏的文章,主要是上课的随堂笔记与练习
🔗JAVA WEB开发技术专栏 传送门
💻提示:目录顺序以当堂内容(教材)为准,所以并非“1、2、3”
📽本节主要内容:简单认识HTML的结构、文本标记、表格标记 因为之前学习过一些HTML,所以这部分老师只是大概过了一下
2.1 HTML
2.1.1 创建第一个HTML文件
🚀 什么是HTML?
HTML 是用来描述网页的一种语言, 指的是超文本标记语言: HyperText Markup Language。HTML 不是一种编程语言,而是一种标记语言,标记语言是一套标记标签 (markup tag),HTML 使用标记标签来描述网页,HTML 文档包含了HTML 标签及文本内容。HTML文档也叫做 web 页面
🚀 HTML标签
HTML 标签是由尖括号包围的关键词,比如
<html>HTML 标签通常是成对出现的,比如
<b>和</b>标签对中的第一个标签是开始标签,第二个标签是结束标签,开始和结束标签也被称为开放标签和闭合标签,
<标签>内容</标签>
🚀 HTML元素
"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签,如
<p>内容</p>
🚀 HTML编辑器
2.1.2 HTML文档结构
<html>
<head>
<title>页面标题</title>
</head>
<body>
<h1>一级标题</h1>
<p>段落</p>
</body>
</html>
🚀 HTML标记
<html>标记是HTML文档的开头,所有HTML标记都应放置在标记中
🚀 HEAD标记
<head>元素包含了所有的头部标签元素。在<head>元素中可以插入脚本(scripts), 样式文件(CSS),及各种meta信息,可以添加在头部区域的元素标签为:<title>, <style>, <meta>, <link>, <script>, <noscript>, <base>
<title> | 定义了文档的标题 |
|---|---|
<base> | 定义了页面链接标签的默认链接地址 |
<link> | 定义了一个文档和外部资源之间的关系 |
<meta> | 定义了HTML文档中的元数据 |
<script> | 定义了客户端的脚本文件 |
<style> | 定义了HTML文档的样式文件 |
🚁 title标记
<title>标签定义了不同文档的标题
<title>在 HTML/XHTML 文档中是必须的
<title>元素:定义了浏览器工具栏的标题,当网页添加到收藏夹时,显示在收藏夹中的标题显示在搜索引擎结果页面的标题
🚁 body标记
<body>标签定义文档的主体
<body>元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等)
2.1.3 HTML文本标记
换行标记
<br>,无结束标记段落标记
<p>标题标记
<h1><h2>...<h6>居中标记
<center>无序列表
<ul>,<li>有序列表
<ol>,<li>区域标记
<span>
🚀 块级元素特点
总是在新行上开始,占据一整行
高度,行高以及外边距和内边距都可控制
宽度始终是与浏览器宽度一样,与内容无关
它可以容纳内联元素和其他块元素
🚀 行内元素特点
- 和其他元素都在一行上
- 高,行高及外边距和内边距部分可改变
- 宽度只与内容有关
- 行内元素只能容纳文本或者其他行内元素
2.1.4 表格标记
表格由
<table>标签来定义。每个表格均有若干行(由<tr>标签定义),每行被分割为若干单元格(由<td>标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等
| 标签 | 描述 |
|---|---|
<table> | 定义表格 |
<th> | 定义表格的表头 |
<tr> | 定义表格的行 |
<td> | 定义表格单元 |
<caption> | 定义表格标题 |
<colgroup> | 定义表格列的组 |
<col> | 定义用于表格列的属性 |
<thead> | 定义表格的页眉 |
<tbody> | 定义表格的主体 |
<tfoot> | 定义表格的页脚 |