前端笔记1 HTML基础

馬致远

已于 2022-09-07 08:17:24 修改

阅读量499

点赞数 2

分类专栏：前端阶段文章标签： HTML

于 2019-07-20 08:10:01 首次发布

本文链接：https://blog.csdn.net/linyuancsdn/article/details/96558376

版权

这篇博客详细介绍了HTML的基础知识，包括标签语法、标签分类、属性入门、基本构架，以及各种复杂标签的使用，如字体标签、超链接标签、列表、表单和表格。还讲解了HTML5的多媒体标签和颜色表示法。

摘要由CSDN通过智能技术生成

文章目录

概念
- html 超文本标记语言
- 作用
html 基本用法
颜色表示法

概念

html 超文本标记语言

全写：HyperText Mark-up Language

概念: 一种为普通文件中某些字句加上标示的语言，其目的在于运用标记（tag）使文件达到预期的显示效果。

超文本
标记

作用

主要用于网页的制作

html 基本用法

标签入门

标签语法

使用尖括号作为关键字的语法格式
标签需要成对出现 <>
标签中可以添加属性, 表示标签的具体实现细节
标签可以字母大写, 但是推荐使用小写

标签分类

双标签 (围堵标签)

它以开始标签及结束标签将文字围住，令其达到预期显示效果

<b>内容</b>  有加粗效果

单标签

标签单独出现，只有开始标签没有结束标签

不需要包含任何东西, 本身就具有某种含义

<br/> 换行

属性入门

hr  横线 
是一条 颜色为红色 比较粗的一条横线
<hr/> 贯穿屏幕的一条横线
<hr color="red" size="5">
格式  <标签名 属性名="属性值" 第二个属性="">

html 基本构架

<!DOCTYPE html>		头声明 
<html lang="en">   	根标签
    <head>			头文件 
        <meta charset="UTF-8">	编码格式 
        <title>Title</title>	网页的标题
    </head>
    <body>			身体, 主体网页文件
    </body>
</html>

使用webStrom 有快捷方式 生成基本架构
Html:5  加上 Tab 键 可以自动生成 基本架构
html:4s

简单标签

举例常见标签

<b></b>	字体加粗
<i></i>	字体倾斜
<u></u>	下划线
<s></s>	删除线

<sub></sub> 下标文本
<sup></sup> 上标文本
<big></big> 字体变大
<small></small> 字体变小

<center></center> 居中
<h></h>	标题标签
<h1>xxx</h1>~<h6>xxx</h6>

标题标签的四个特点

自动换行
自动加粗
自动调整字体大小
标题之间的留白

其他标签

<p></p>  段落标签  有换行功能 段落之间可以自动隔行
<abbr title="中国中央电视台">CCTV</abbr>    
表示它所包含的文本是一个更长的单词或短语的缩写形式
可以在 <abbr> 标签中使用全局的 title 属性，这样就能够在鼠标指针移动到 <abbr> 元素上时显示出简称/缩写的完整版本。