HTML5入门基础

最新推荐文章于 2024-05-20 21:21:56 发布

Najjiemin

最新推荐文章于 2024-05-20 21:21:56 发布

阅读量309

点赞数 7

文章标签： html5 前端 html

本文链接：https://blog.csdn.net/m0_73091458/article/details/131882791

版权

一、HTML简介

HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言
由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言
能独立于各种操作系统平台，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即我们所见到的网页

二、元素/标签

标签是HTML语言中最基本的单位，是最重要的组成部分

2、整体结构

<!DOCTYPE> 声明有助于浏览器中正确显示网页。不区分大小写，一般采用大写

 <!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

<html></html> 表明该文档为html文档
<head></head> 包含头部标签元素
<body></body>该标签内包含文档的主体

HTML文档的框架：

<!DOCTYPE html>
<html>
	<head>
		...
	</head>
	
	<body>
		...
 	</body>
</html>

3、`<head>` （头部内容）中常用标签

<title></title> 定义文档标题
<meta> 为空元素，描述了基本的元数据，浏览器解析后可以获取网页的描述，例如作者、关键字等
<link> 为空元素，最常见的用途是链接样式表，包含属性 rel，type，href，target 等
<base> 为空元素，规定了所有链接的默认链接
<style></style> 定义了HTML文档的样式

4、`<body>` （主体内容）中常用标签

标签	定义
`<h1></h1>`	标题
`<p></p>`	段落
`<a></a>`	链接
`<table></table>`	表格
`<tr></tr>`	表格的一行
`<td></td>`	数据单元格
`<th></th>`	表头单元格
`<ul></ul>`	无序列表
`<ol></ol>`	有序列表
`<li></li>`	列表项
`<img>`	图像
`<br>`	换行
`<hr>`	水平线
`<span></span>`	无特定含义，内联元素
`<div></div>`	无特定含义，块级元素

示例：

<a href="链接">链接的名称</a>

<!--水平标题-->
<table>
  <thead>
    <tr>
      <th>列标题1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>行1，列1</td>
    </tr>
    <tr>
      <td>行2，列1</td>
    </tr>
  </tbody>
</table>

<!--垂直标题-->
<table>
<tr>
  <th>标题1</th>
  <td>内容</td>
</tr>
<tr>
  <th>标题2</th>
  <td>内容</td>
</tr>
</table>

<!--无序列表-->
<ul>
	<li>html</li>
	<li>css</li>
</ul>

5、其他

 注释，VScode中 Ctrl+/ 是注释快捷键
文本格式化标签：
- <b></b>(bold) <i></i>(italic) <sup></sup> <sub></sub> 分别为加粗、斜体、上标和下标
- 通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i> 标签使用
- <big></big> <small></small> 分别为讲文本放大和缩小
- 还有一些其他有趣的文本格式化的标签，可以参考该网站
空元素
没有内容的 HTML 元素被称为空元素，空元素是在开始标签中关闭的。<br> 就是一个空元素，在开始标签中添加斜杠，<br/>，是关闭空元素的正确方法
表单：<form></form>
HTML 标签对大小写不敏感，推荐使用小写

<!--注释-->

<p> 这是<big>大写</big>字体</p>
<p>这是<small> 小写</small>字体</p>

<form>
Email: <input type="text" name="mail">
Password: <input type="password" name="pwd">
</form>

三、属性

1、简介

HTML 属性由元素来设置，在元素中添加附加信息
属性在开始标签中，总是名称/值的形式出现
属性两边始终有引号，单引号与双引号灵活使用，不作严格区分，通常使用双引号

2、常见属性

href 属性用于引用超链接地址；
在 href 属性基础上，target 属性可以设置链接打开方式，_blank 用于在新窗口打开，_top 在当前窗体打开链接，并替换当前的整个窗体(框架页)
type 属性规定被链接文档/资源的 MIME 类型；
rel属性定义了该文档与链接文档的关系
src 是源属性，值为图像的 url 地址； alt 属性用来为图像定义一串预备的可替换的文本
class 规定元素的类名，id 规定元素的唯一 id