前端学习 - 初识HTML

发布于：2022-12-25 ⋅ 阅读:(245) ⋅ 点赞:(0)

初识HTML

一、HTML是什么？

HTML4.01 发布于1999年；
HTML5 草案发布于2008年，正式的发布时间是2014年；
HTML 被称为超文本标记语言，英文全称Hyper Text Markup Language，标准通用标记语言下的一个应用。不是一种编程语言

二、HTML的基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

<!DOCTYPE html> ：文档声明部分（告诉浏览器，我，HTML是超文本标记语言，你，要按照我的规矩来办事。）
html：网页的根标签，放在最外层，一个网页中只会出现一次。
lang=" en"：规定当前语言类型为英文。
lang=" zh"：规定当前语言类型为中文。
head：网页头部，主要用于记录网站的相关信息等。
<meta charset="UTF-8">： 统一字符编码。
<title>Document</title>：网页的标题。
body：网页的主体内容，主要代码的编辑区域，用于展示网页的内容。

三、HTML的基本语法

  • 所有的标签都应该包含在< >起止符之间；
  • 大部分的标签都有开始标签< >和结束标签</>;
  • 标签可以拥有属性，属性总是以 属性名 = ‘属性值’ 这样以键值对出现，多个属性就通过空格隔开；
  • 标签可以嵌套；
  • 标签名建议用小写
  • HTML 文档的后缀名为 .html 或者 .htm；
  • 注释 <!-- 注释内容 --> 该内容不会被浏览器渲染，主要用于文档的说明。
  • 注释快捷键说明：
    单行注释：Ctrl + /
    选中注释：Atl + Shift+ A

四、常见HTML的标签

h1~h6：
<h1>标题标签</h1>

标题标签

效果是加粗和字体大小的变化。

p：
<p>段落标签</p>：

段落标签

主要用于文本展示。

div：
<div>块级标签</div>：
块级标签
没有意义的标签，一般用于布局。

span：
<span>文本标签</span> ： 文本标签，没有意义的标签，一般用在需要突出显示文字的时候。

b：
<b>文字加粗标签</b ： 文字加粗标签，一般不建议使用，加粗效果可以通过 css 实现。

strong：
<strong>拥有文字加粗效果</strong>： 拥有文字加粗效果，还有语气加重的含义。

i：
<i>文字斜体效果</i>： 文字斜体效果，不建议使用，可以通过 css 实现。

em：
<em>文字斜体，有语气加重</em>： 文字斜体，有语气加重。

small：
<small>比</small> 比一般的文字小一点。

sub：
下标： X<sub>2</sub>： X 2 。


sup：
上标： X<sup>2</sup>： X 2 。

del：
<del>被删除的文本</del>： 被删除的文本。

（一）HTML的超链接

在超文本标记语言 HTML 中超链接是使用 a 标签 <a></a>
在超链接中所拥有的部分属性如下：

href

默认进行链接的跳转，设置跳转地址的时候必须加上域名；
超链接：<a href="http://www.baidu.com">百度</a>
执行JavaScript代码：<a href="javascript:alert(123);">执行 JS 代码</a>
打电话： <a href="tel:13562698714">打电话</a>
发短信： <a href="sms:13562698714">发短信</a>
发邮件 ：<a href="mailto:fay@163.com?subject=邮件主题&bodu=邮件内容">发送邮件</a>

target:

一般用于链接跳转，代表当前打开的链接在什么位置显示。
_blank：在新标签页打开；
_self：在当前标签页打开；
_top：在顶层窗口打开；
_parent：在窗口打开；

title（绝大部分标签都有该属性）

鼠标停留在该标签上时，会显示的文字。

（二）HTML的img标签

<img> 或者 <img/> 是一个单标签
<img src="图片地址" alt="描述">

src：
图片地址。
alt：
这是一个有问题的图片
<img src="图片地址" alt="这是一个有问题的图片">
主要用于图片损坏的情况下对图片的说明

绝对地址：
https://static.linktarget.top/images/self/test.jpg
网络中的绝对地址
<img src="https://static.linktarget.top/images/self/test.jpg" alt="网络中的绝对地址">
网络中的绝对地址

相对地址（地址命名格式）：
1、兄弟关系，直接写“图片名”.后缀名；
2、图片的父级与文件是兄弟关系，图片所在“文件夹名” / “图片名”.后缀名
3、图片与文件的父级是兄弟关系，../图片名.后缀名
../ 表示返回上一级

（三）HTML的媒体

       音频

audio 支持格式为 MP3，wav，ogg；
controls:控制工具属性；
loop: 循环；
muted: 静音；
autoplay：自动播放，但是目前绝大多数浏览器禁用。

       视频

video 支持MP4；
controls:控制工具属性；
loop: 循环；
muted: 静音；
autoplay：自动播放，但是目前绝大多数浏览器禁用。

五、HTML标签的嵌套规则

  • 原则上块级标签可以嵌套块级标签和内联标签；
  • 内联标签原则上只能嵌套内联标签；
  • p 标签和 h1~h6标签 只能嵌套内联标签；
  • ul标签 和 ol标签 只能嵌套li标签 li标签可以嵌套任何标签；

六、HTML语义化标签

（一） 语义化

根据内容的结构，选择合适的标签，便于开发者阅读和机器的阅读，从而写出更加优雅的代码，为浏览器的爬虫和机器更好的解析。

（二） 新增了一些语义化标签

  • header: 定义文档或者章节头部。
  • nav：定义导航链接部分。
  • footer: 用于定义文档或者章节的底部。
  • article: 用于定义文档的文章（帖子、新闻、博客）。
  • section: 用于定义一个文档的章节（大块中的小部分）
  • aside: 用于定义与当前页面文章内容无关的附属信息。
  • address：用于地址

    以上标签都是块级标签

七、表格

（一）涉及的标签

table: 用于定义表格;
caption：用于定义表格标题；
th: 用于定义列标题，文字自动居中且具有自动加粗；
tr：定义行；
td：定义单元格；
thead： 表格头，一般不用；
tbody：表格主题，一般不用；
tfoot：表格底部，一般不用；

嵌套规则：
    table只能嵌套 tr 或者 caption；
    tr 只能嵌套 td 或者 th；
    td 或者 th 能嵌套任意标签；

（二）标签的属性

table 的属性(一般不建议使用)
boder：只能设置 1 或者 ' ',1代表有边框线；
cellspacing: 单元格与单元格之间的间隙；
cellpadding: 单元格内部填充的一个空白；

td 属性
colspan: 同一行合并；
rowspan: 同一列合并；

注意： 如果单元格中没有内容，出现该单元格被压缩的情况，那么在当前单元格内写上 &nbsp;

（三）表格演示

<table >
        <tr>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
            <th colspan="2">星期六</th>
            <!-- <td>星期日</td> -->
        </tr>
        <tr>
            <td rowspan="2">星期一</td>
            <td>星期二</td>
            <td>星期三</td>
            <td>星期四</td>
            <td>星期五</td>
            <td>星期六</td>
            <td>星期日</td>
        </tr>
        <tr>
            <!-- <td>星期一</td> -->
            <td>星期二</td>
            <td>星期三</td>
            <td>星期四</td>
            <td>星期五</td>
            <td>星期六</td>
            <td>星期日</td>
        </tr>
        <tr>
            <td>星期一</td>
            <td>星期二</td>
            <td>星期三</td>
            <td>星期四</td>
            <td>星期五</td>
            <td>星期六</td>
            <td>星期日</td>
        </tr>
        <tr>
            <td>星期一</td>
            <td>星期二</td>
            <td>星期三</td>
            <td>星期四</td>
            <td>星期五</td>
            <td>星期六</td>
            <td>星期日</td>
        </tr>
    </table>

效果如下

星期一 星期二 星期三 星期四 星期五 星期六
星期一 星期二 星期三 星期四 星期五 星期六 星期日
星期二 星期三 星期四 星期五 星期六 星期日
星期一 星期二 星期三 星期四 星期五 星期六 星期日
星期一 星期二 星期三 星期四 星期五 星期六 星期日

八、表单

表单

在网页上提供一个图形界面，用以手机用户数据
 

input

常用到的基本属性
 

  • text: 普通文本输入框
  • password: 密码框
  • radio: 单选框, 同一个组的但选项需要设置相同的name属性值；
  • checkbox：复选框
  • placeholder: 内容提示占位符
  • checked: 属性默认选中；

偶尔用到：
 

  • range: 进度条、播放条
  • file: 上传按钮；

不怎么用的：
 

  • email: 代表邮箱输入框
  • url: 地址输入框
  • number: 数值输入框

有意思的：
 

  • date: 显示日期
  • time: 时间
  • color: 拾色器

label:
 

  • for 属性：该属性值为表单元素的 id
  • 提示：id是所有标签都有的一个属性，并且该值唯一；

textarea： 文本域 or 多行文本输入框

select & option ：下拉选择框

  • selected 默认选中

button
拥有的属性：
button: 普通的按钮
reset: 重置
submit: 提交数据

<label>
	密码：
	<input type="password" placeholder="请输入密码">
</label>

<select name="" id="">
	<option value="beijing">北京</option>
    <option value="shanghai" selected>上海</option>
    <option value="chengdu">成都</option>
</select>

九、锚点的使用

主要用于页面内，类似于目录的跳转

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>十五、锚点的使用</title>
</head>
<body>
  <a href="#a">aaa</a>
  <a href="#b">bbb</a>
  <a href="#c">ccc</a>

  <hr>

  <p id="a" style="height: 600px;">锚点a</p>
  <p id="b" style="height: 600px;">锚点b</p>
  <p id="c" style="height: 600px;">锚点c</p>
</body>
</html>

十、内联框架

iframe
简单应用方式

十一、实体符号

空格 大于符号 小于符号 &符号
书写方式 ` & nbsp;` & gt; & lt; & amp;
呈现结果 `  ` > < &
• 符号 » 符号 ® 符号 © 符号
书写方式 & bull; & raquo; & reg; & copy;
呈现结果 • » ® ©

十、列表

有序列表
<ol> <li></li> </ol>
无序列表
<ul> <li></li> </ul>
ol 或者 ul 中只能包含 <li></li>标签

十二、标签的分类

（一） 按文档流分为 两大类型

内联标签：

  • 不会独占一行；
  • 从左往右依次排列，直到当前行排列不下的时候就会换行；
  • 宽度由内容决定；
  • 包含：span、a、img、strong、i、em、b

块级标签：

  • 独占一行；
  • 排列从上往下依次排列；
  • 宽度由父元素的宽度决定，为父标签宽度的 100%
  • 包含：h1~h6、div、p、ul、ol、li

（二）按功能分类为 四大类

  • 以 <div></div> 为代表的 块级标签
  • 以 <span> </span>代表的 内联标签
  • 以 <a></a> 代表的 超链接标签
  • 以 <img></img> 为代表的 图片标签

（三） 标签嵌套规则

  • 原则上块级标签可以桥套块级标签和内联标签；
  • 内联标签原则上只能嵌套内联标签；
  • p 和 h1~h6 只能嵌套内联标签；
  • ul 和 ol 只能嵌套 li可以嵌套任何标签；

前往 CSS

后续内容持续更新中，以上内容用于自我总结。

头大

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布