JAVA WEB开发技术随堂笔记 了解HTML

162 阅读3分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

前言

🎬本文章是 【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编辑器

Notepad++Sublime TextHBuilderEclipse

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>定义表格的页脚