首页 > 其他分享> > HTML 超文本标记语言——html笔记

HTML 超文本标记语言——html笔记

2021-09-05 20:01:45 作者：互联网

一、认识HTML

1. 概念

HTML（Hyper Text Markup Language），超文本标记语言，顾名思义，超文本就是除了文本还有其他类似于图片、音频、视频的标记语言。

1.1 超文本

超出文本之外的内容

文本
图片
音频
视频
……

1.2 标记

无论是文本、图片、音频还是视频，想要将其呈现出来，就需要使用特殊的标记来进行表示。

2. 意义

2.1 网站的根本

各大网站均是由HTML语言所构建的。

爱奇艺官网

淘宝官网

B站官网

天涯论坛官网

2.2 后端的基石

我们必须掌握网站的结构，才能在其基础之上构建后台脚本程序。

2.3 网安的桥梁

掌握网站的前后台设计，网络安全的落实才有迹可循。

3. 关系

3.1 HTML：搭架子

就像盖一个大楼，一开始就是钢筋混凝土搭建起来的框架。虽然框架已经有了，但是没有任何装修。

3.2 CSS：搞装修

使用CSS可以让我们的大楼变得更漂亮，网页也是同理，可以使用CSS加装饰。

3.3 JavaScript：搞特效

使用HTML+CSS构建的网站，虽然已经足以满足我们的需求，但是并不够高端，我们可以使用JavaScript让网站于用户的交互更加友好。

二、基础语法

1. 标签/标记分类

1.1 单标签

名字只出现一次，且使用斜杠直接将自己结束的标签，就是单标签。

语法结构：<标签名称/>
标签案例：
- <hr/>
- <br/>

1.2 双标签

名字出现两次，在后面的标签使用斜杠结束的标签，就是双标签。

语法结构：<标签名称> </标签名称>
标签案例：
- <div></div>
- <p></p>

2. HTML文件

新建HTML文件的方法非常简单，右键新建一个文本文档，将其后缀名修改为 .html 即可。

index.html
demo.html

3. 编辑器

HTML的可用编辑器非常多，我们推荐使用 Notepad++、Sublime、PHPStorm。

4. 主体结构

每个HTML网页的构成，都脱离不了以下的基础代码，每创建一个HTML文档，都将这些代码加入其中，可以帮助我们更方便快捷的开始编写HTML脚本。

<span style="background-color:#dadada"><span style="color:#1f0909"><span style="color:#555555"><!DOCTYPE html></span>
<span style="color:#117700"><</span><span style="color:#117700">html</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">head</span><span style="color:#117700">></span>
        <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">charset</span>=<span style="color:#aa1111">"utf-8"</span><span style="color:#117700">></span>
        <span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></span>网页标题<span style="color:#117700"></</span><span style="color:#117700">title</span><span style="color:#117700">></span>
    <span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span>
    <span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span></span></span>

<!DOCTYPE html>：声明当前文档格式为html格式
<html></html>：网页文件最外层标签，包含网页所有内容
<head></head>：文件的头信息，标签之间通常包含网页标题，编码等内容；这里的内容不会显示在网页内容中
<body></body>：网页的主体标签，标签之间包含网页的正文内容，如：文字、音频、视频、图片，会显示在网页中

5. 注释符号

被注释的内容不会呈现在网页当中，但是通过网页的源代码是可以看到HTML的注释的，因此不要再注释当中记录重要信息。

注释格式：

6. 标签属性

描述一个人的属性，通常指的的是这个人的身高、体重、肤色等内容；而描述一个标签的属性，则代表了设置这个标签的颜色、宽高、粗细等内容。

6.1 属性格式

<div 属性名1='属性值1' 属性名2='属性值2' 属性名n='属性值n'></div>

6.2 注意事项

每个属性描述该标签的一个特征。
单标签和双标签都可以添加n个属性。
不区分大小写，建议使用小写。
单双引号一定是英文字符。

7. 属性练习

给body标签尝试添加一下属性试试。

<span style="background-color:#dadada"><span style="color:#1f0909"><span style="color:#555555"><!DOCTYPE html></span>
<span style="color:#117700"><</span><span style="color:#117700">html</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">head</span><span style="color:#117700">></span>
        <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">charset</span>=<span style="color:#aa1111">"utf-8"</span><span style="color:#117700">></span>
        <span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></span>网页标题<span style="color:#117700"></</span><span style="color:#117700">title</span><span style="color:#117700">></span>
    <span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">body</span> <span style="color:#0000cc">bgcolor</span>=<span style="color:#aa1111">"#FFCC00"</span><span style="color:#117700">></span>
    <span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span></span></span>

7.1 属性名称

bgcolor：背景颜色，全拼：background color
leftmargin：页面左边距
background：背景图片

7.2 属性值

bgcolor
- 英文单词：red、green、blue、pink、purple
- 十六进制：#FF0000(红)、#00FF00(绿)、#0000FF(蓝)
leftmargin
- 像素值
background
- 本地图片：./images/bg.png
- 网络图片：https://cn.bing.com/......

三、标签练习

1. 行内标签

特点：可以和其他元素保持再同一行，一般不能设置宽度和高度。

1.1 文本标签

文本标签：<font>文本内容</font>
- 常用属性：
  - color：文本颜色
  - size：文本大小
  - face：文本字体
加粗标签：<b>文本内容</b>、<strong>文本内容</strong>
- 常用属性：
倾斜标签：<i>文本内容</i>、<em>文本内容</em>
- 常用属性：
删除线标签：<s>文本内容</s>、<del>文本内容</del>
- 常用属性：
下划线标签：<u>文本内容</u>
- 常用属性：
居中标签：<center>文本内容</center>
- 常用属性：
span标签：<span>文本内容</span>
- 常用属性：
label标签：<label>文本内容</label>
- 常用属性：

1.2 超链接标签

网页中会常见一些可以点击的文字，点击这些文字可以跳转到其他的网页，这就是超链接的效果！

超链接标签：<a>文本内容</a>

常用属性：
- href：链接目标页面地址
  - 本地：./test/index.html、../images/123.png、C:\wamp64\www\index.html
  - 网络：https://www.baidu.com
  - 空链接：#
- target：目标页面的打开方式
  - _self：(默认) 当前页打开
  - _blank：新标签页打开
  - _top：顶部框架打开
  - _parent：父级框架打开
- title：鼠标悬停文字提醒
  - 解释：鼠标移入具有该属性的超链接上时，会有小对话框弹出。

案例演示：

<span style="background-color:#dadada"><span style="color:#117700"><</span><span style="color:#117700">html</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">head</span><span style="color:#117700">></span>
        <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">charset</span>=<span style="color:#aa1111">"utf-8"</span><span style="color:#117700">/></span>
        <span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></span>测试页面<span style="color:#117700"></</span><span style="color:#117700">title</span><span style="color:#117700">></span>
    <span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span>
        <span style="color:#117700"><</span><span style="color:#117700">a</span> <span style="color:#0000cc">href</span>=<span style="color:#aa1111">"http://www.baidu.com"</span> <span style="color:#0000cc">target</span>=<span style="color:#aa1111">"_blank"</span> <span style="color:#0000cc">title</span>=<span style="color:#aa1111">"文本"</span><span style="color:#117700">></span>百度<span style="color:#117700"></</span><span style="color:#117700">a</span><span style="color:#117700">></span>
    <span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span></span>

1.3 表单标签

表单标签
- 书写格式：<form></form>
- 常用属性：
  - action：提交地址
  - method：提交方式
    - get
    - post
单行文本框
- 书写格式：<input type='text'/>
- 常用属性：
  - type：文本框类型
  - size：文本框宽度
  - value：文本框默认值
  - readonly：文本框只读
  - disabled：文本框不可用
  - maxlength：文本框最大字符容纳字数
  - name：文本框名称
密码文本框
- 书写格式：<input type='passwd'/>
- 常用属性：
  - size：密码框宽度
  - name：密码框名称
  - value：密码框默认值
- 单选按钮
- 书写格式：<input type='radio'/>
- 常用属性：
  - value：单选框提交值
  - checked：单选框默认选中
  - name：单选框名称
复选按钮
- 书写格式：<input type='checkbox'/>
- 常用属性：
  - value：复选框提交值
  - checked：是否默认选中
  - name：复选框的名字
多行文本框
- 书写格式：<textarea></textarea>
- 常用属性：
  - cols：可容纳列数（宽度）
  - rows：可容纳行数（高度）
  - name：多行文本框名称
下拉菜单
- 书写格式：<select></select>
- 配套使用：
  - 选项组：<optgroup></optgroup>
    - 常用属性：
      - label：下拉菜单组名
  - 下拉项：<option></option>
    - 常用属性：
      - value：下拉菜单项的默认值
      - selected：默认选中指定下拉项
- 常用属性：
  - name：下拉菜单名称
上传文本域
- 书写格式：<input type="file"/>
- 常用属性：
  - name：上传文本域名称
  - multiple：多文件上传
隐藏域
- 书写格式：<input type='hidden'/>
- 常用属性：
  - name：隐藏域名称
  - value：隐藏域默认值
表单按钮
- 按钮分类：
  - 提交按钮：<input type='submit'/>
    - 常用属性：value，按钮显示文本
  - 重置按钮：<input type='reset'/>
    - 常用属性：value，按钮显示文本
  - 普通按钮：<input type='button'/>
    - 常用属性：value，按钮显示文本
  - 图片提交按钮：<input type='image'/>
    - 常用属性：
      - src：图片路径
      - value：按钮显示文本

1.4 图片标签

书写格式：<img />
常用属性：
- src：图片路径
- width：图片宽度
- height：图片高度
- alt：加载失败时提示文本
- title：鼠标悬停提示文本

2. 块级标签

特点：通常都是独立成行的，可以设置宽度和高度。

2.1 表格标签

书写格式：<table></table>
配套使用：
1. 表格标题：<caption></caption>
  - 常用属性：
    - align：对齐方式
2. 表格一行：<tr></tr>
  - 常用属性：
    - align：对齐方式
    - bgcolor：背景颜色
3. 表格一列：<td></td>
  - 常用属性：
    - align：对齐方式
    - width：单元格宽度
    - height：单元格高度
    - bgcolor：单元格背景色
    - colspan：合并列（跨列）
    - rowspan：合并行（跨行）
4. 表格表头：<th></th>
  - 标签特点：
    - 文字加粗
    - 自动居中
    - 常做标题
常用属性：
- width：表格宽度
- height：表格高度
- border：边框宽度
- cellspacing：单元格与单元格的间距
- callpadding：内容与单元格的间距
- aligh：对齐方式
- bgcolor：背景颜色

2.2 段落标签

段落标题：
- 书写格式：<h1>标题内容</h1> ~ <h6></h6>
- 标签特点：加粗，独立成行，有6个大小可选
- 常用属性：
  - align：对齐方式
段落内容：
- 书写格式：<p>段落内容</p>
- 标签特点：独立成段，通常包含大段文字
- 常用属性：
  - align：对齐方式

2.3 列表标签

无序列表：<ul></ul>
- 常用属性：type
  - disc：小黑圆圈
  - circle：空心圆
  - square：实心方块
有序列表：<ol></ol>
- 常用属性：type
  - 1：阿拉伯数字
  - a：小写字母
  - A：大写字母
  - i：小写罗马数字
  - I：大写罗马数字

列表项：<li></li>

<span style="background-color:#dadada"><span style="color:#117700"><</span><span style="color:#117700">ul</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">></span>张三<span style="color:#117700"></</span><span style="color:#117700">li</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">></span>李四<span style="color:#117700"></</span><span style="color:#117700">li</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">></span>王五<span style="color:#117700"></</span><span style="color:#117700">li</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">ul</span><span style="color:#117700">></span>

<span style="color:#117700"><</span><span style="color:#117700">ol</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">></span>1000万<span style="color:#117700"></</span><span style="color:#117700">li</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">></span>500万<span style="color:#117700"></</span><span style="color:#117700">li</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">></span>200万<span style="color:#117700"></</span><span style="color:#117700">li</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">ol</span><span style="color:#117700">></span></span>

2.4 自定义列表

书写格式：<dl></dl>

<span style="background-color:#dadada"><span style="color:#117700"><</span><span style="color:#117700">dl</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">dt</span><span style="color:#117700">></</span><span style="color:#117700">dt</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">dd</span><span style="color:#117700">></</span><span style="color:#117700">dd</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">dl</span><span style="color:#117700">></span></span>

2.5 其他标签

水平线标签：<hr/>
- 常用属性：
  - size：线条高度
  - width：线条宽度
  - noshade：空心变实心
  - color：线条颜色
换行标签：<br/>

3. 盒子标签

书写格式：<div></div>
- 常用属性：
  - id：盒子id名称
  - class：盒子类别名称
  - style：盒子css样式
    - 常用样式：
      - width：宽度
      - height：高度
      - border：边框样式
      - border-radius：圆角
      - background：背景色，背景图片
      - float：浮动
        
        left：左浮动
        
        right：右浮动
        
        none：无浮动

4. 特殊标签

特点：一些特殊字符，在特定位置有特殊含义
结构：&标签名;

标签：常用,标签,html,HTML,超文本,格式,文本,属性
来源： https://blog.csdn.net/m0_59150380/article/details/120119941