• 01 HTML介绍

    1. HTML介绍

    1.1 HTML是什么

    • HTML （Hyper Text Markup Language）表示超文本标记语言
    • HTML 文件是一个包含标记的文本文件，标记会告诉浏览器如何显示这个页面
    • HTML 文件的后缀名必须是htm或者html
    • HTML 文件可以用一个简单的文本编辑器创建

    1.2 HTML标签解释

    HTML文档中，第一个标签是<html>，这个标签会告诉浏览器这是HTML文档的开始。HTML文档的最

    后一个标签是</html>，这个标签告诉浏览器这是HTML文档的终止。在<head>和</head>标签之间

    文本的是头信息。在浏览器窗口中，头信息是不被显示的。在<title>和</title>标签之间的文本是文

    档标题，它被显示在浏览器窗口的标题栏。在<body>和</body>标签之间的文本是正文，会被显示在浏

    览器中。

    2. HTML标签

    2.1 什么是HTML标签

    HTML标签就是用不同的标签实现不同的功能

    2.2 HTML标签的书写格式

    • 一般标签都是成对出现的，比如：<body></body>，但是也有单独出现的，如：<br>
    • 第一个标签表示开始，第二个表示结束
    • 开始标签和结束标签之间的文本是内容
    • 标签大小写无所谓

    2.3 HTML标签的属性

    标签可以拥有很多属性，属性能够为页面上的HTML元素提供附加属性

    举例：

    正常的主体标签是：
<body></body>

但是我现在想让页面的背景变成红色，那么可以这么样写：
<body bgcolor="red"></body>

再举个例子，我想创建一个表格，但是这个表格不希望他有边框，可以这样写: 
<table border="0"></table>

    3. HTML基本标签

    3.1 HTML基本标签组成

    HTML中最重要的标签是定义标题元素，段落和换行的标签。

    举个栗子：

    <html>
  <body>
    我的第一个HTML网页
  </body>
</html>

    3.2 标题元素

    • 标题元素是由标签<h1>到h6定义
    • <h1>定义了最小的标题元素
    • <h2>定义了最大的标题元素

    举个栗子：

    <html>
  <body>
    <p>这是第1段话</p>
    <p>这是第2段话</p>
    <p>这是第3段话</p>
    <p>这是第4段话</p>    
  </body>
</html>

    3.3 段落

    段落是用<p>标签定义的，HTML自动在一个段落前后各添加一个空行

    举个栗子：

    <html>
  <body>
    <p>这是第1段话</p>
    <p>这是第2段话</p>
    <p>这是第3段话</p>
    <p>这是第4段话</p>    
  </body>
</html>

    3.4 换行

    <br>会在网页上显示一个换行，无论在那都会强制换行

    <html>
  <body>
	 第一行
    <br>
     换行啦啦啦
    <br>
  </body>
</html>

    3.5 居中的标题

    在标签中可以设置属性align="center"就会把标签的内容居中

    <html>
	<body>
		<h1 align="center">这是居中的标题</h1>
		<p>这是一段文字,没什么意义,反正我也不知道自己在打什么哈哈哈</p>
	</body>
</html>

    3.6 插入水平线

    <hr>会在网页上显示一条水平线

    <html>
	<body>
	下面是一条水平线		
    <hr>
  </body>
</html>

    3.7 背景颜色

    通过在标签中设置属性bgcolor="red"实现

    <html>
	<body bgcolor="red">
    <h2>这是红色的背景！</h2>
	</body>
</html>

    4. HTML格式

    4.1 什么是HTML格式

    HTML定义了很多的格式化输出 , 比如 加粗 斜体等

    4.2 常用格式化

    标签 功能
    <b></b> 加粗
    <strong></strong> 加粗
    <big></big> 放大文本
    <small></small> 缩小文本
    <i></i> 倾斜
    <em></em> 倾斜
    <sup></sup> 上标
    <sub></sub> 下标
    <s></s> 删除线
    <del></del> 删除线
    <u></u> 下划线
    <ins></ins> 下划线

    4.3 格式化代码

    <pre>标签会把文本内容是什么样就展示什么样

    <html>
	<body>
		<b>预处理格式用来显示代码非常好</b>
		<pre>
            def func():
            	pass
		</pre>
	</body>
</html>

    4.4 文本倒着输出

    <bdo dir="rtl">必须设置dir属性为rtl

    <html>
	<body>
		<bdo dir="rtl">
		这段文字是倒着的
		</bdo>
	</body>
</html>

    5.HTML实体

    5.1 什么是HTML实体

    有些符号你是无法通过输入法打出来后在页面上正常显示的，这个时候就需要HTML实体来显示我们的

    内容了

    实体 解释
    &nbsp 空格
    &lt 小于
    &gt 大于
    &amp and符合
    &quot 引号

    6. HTML链接

    6.1 什么是HTML链接

    就是通过点击链接跳转到其他页面或其他的网站 , 通常用<a>标签实现跳转 , 在<a>标签的herf属性

    写上需要跳转的具体地址即可。

    a标签的属性

    • href 要链接的地址

      • 为空时表示一个空连接，代表自身

      • #top代表回到顶部，我们可以定义一个空标签，来进行定位

        <h6 id="top"></h6>
<a href="#top">回到顶部</a>

    • target 在哪里打开页面

      • _self 当前页面（默认值）
      • _blank 新的空白页

    • title 鼠标悬浮在标签上时现实的文字

    6.2 跳转到其他本地文件

    <!-- 前提是在当前目录下有下一页.html这个文件-->
<html>
  <body>
    <a href="下一页.html">点击跳转</a>到其他页面<br>
  </body>
</html>

    6.3 跳转到其他网站

    <html>
  <body>
    <a href="https://www.baidu.com">点击跳转</a>到其他网站<br>
  </body>
</html>

    6.4 跳转到指定位置

    <html>
  <body>
    <a href="#c3">点击跳转到第三章</a>
     <h1>第一章</h1>
     <h1>第二章</h1>
     <h1 id="c3">第三章</h1> <!--a标签也可以写name属性为c3-->
     <h1>第四章</h1>
     <h1>第五章</h1>
     <h1>第六章</h1>
  </body>
</html>

    7. HTML框架

    7.1 什么是HTML框架

    使用框架，可以在一个浏览器窗口中显示不止一个HTML文档。
这样的HTML文档被称为框架页面，它们是相互独立的。

    7.2 标签解释

    frameset标签

    1.<frameset>标签定义了如何将窗口拆分成框架。
2.每个frameset标签定义了一组行和列。
3.行/列的值指明了每个行/列在屏幕上所占的大小

    frame标签

    <frame>标签定义了每个框架中放入什么文件。

    7.3 垂直分栏

    <html>
<frameset cols="25%,75%">
	<frame src="index1.html">
	<frame src="index2.html">
</frameset>
</html>

    0.通过cols的值进行分栏
1.第一个被设置成窗口宽度的25％，第二个被设置成窗口宽度的75％。
2.页面“index1.html”被放在第一个分栏中，“index2.html”被放在第二个分栏中。

    7.4 水平分

    <html>
<frameset rows="25%,50%,25%">
	<frame src="index1.html">
	<frame src="index2.html">
    <frame src="index3.html">
</frameset>
</html>

    0.通过rows的值进行分栏
1.第一个被设置成窗口高度的25％，第二个被设置成窗口高度的50％,第三个被设置成窗口高度的25％。
2.页面“index1.html”被放在第一个分栏中，“index2.html”被放在第二个分栏中,“index3.html”被放在第三个分栏中。

    7.5 不可改动的分栏

    <html>
<frameset rows="50%,50%">
    <!--noresize="noresize"设置分栏不可改动-->
	<frame noresize="noresize" src="frame_a.htm">
	<frameset cols="25%,75%">
		<frame noresize="noresize" src="frame_b.htm">
		<frame noresize="noresize" src="frame_c.htm">
	</frameset>
</frameset>
</html>

    7.6 使用导航框架跳转到指定章节

    index.html

    <html>
<frameset cols="200,*">
	<frame src="frame_linksection.html">
	<frame src="frame_a.html" name="showframe">
</frameset>
</html>

    frame_linksection.html

    <a href ="frame_a.html" target ="showframe">Frame a</a><br>
<a href ="frame_b.html" target ="showframe">Frame b</a><br>
<a href ="frame_c.html" target ="showframe">Frame c</a><br>

    frame_a.html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>aaaaa</h1>
</body>
</html>

    frame_b.html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>bbbbbbbbbbb</h1>
</body>
</html>

    frame_c.html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>cccccccccccc</h1>
</body>
</html>

    8. HTML表格

    8.1 什么是HTML表格

    表格就是你认为的那个表格

    table标签

    • tr标签，表示一行
      • th标签，表示表头，会加粗
      • td标签，表示表格数据

    8.2 有边框的表格

    <html>
  <body>
	<table border="1">
		<tr>
			<td>第1行第1列</td>
			<td>第1行第2列</td>
		</tr>
		<tr>
			<td>第2行第1列</td>
			<td>第2行第2列</td>
		</tr>
	</table>
	</body>
</html>

    table属性：

    • border 设置表格边框
    • cellspacing 设置表格单元格间隔

    9. HTML列表

    9.1 什么是列表

    HTML支持有序、无序和自定义列表。

    9.2 无序列表

    <html>
<body>
<h4>无序列表</h4>
<ul>
	<li>咖啡</li>
	<li>茶</li>
	<li>牛奶</li>
</ul>
</body>
</html>

    无序列表属性type,改变列表项前端样式

    • circle 空心圆点
    • square 方块

    9.3 有序列表

    <html>
<body>
<h4>有序列表</h4>
<ol>
	<li>咖啡</li>
	<li>茶</li>
	<li>牛奶</li>
</ol>
</body>
</html>

    有序列表属性type,改变序号种类

    • 默认为1，表示阿拉伯数字

    10. HTML表单

    10.1 什么是HTML表单

    HTML表单用来选择不同种类的用户输入。用input标签显示输入框

    • input标签，输入框

      input的属性：

      • value属性，提交的数据的键值对中的值
      • name属性，提交的数据的键值对中的键
      • type属性，修改输入框的种类
        • text 文本输入框
        • password 密码输入框
        • submit 提交按钮，会提交表单。默认按钮上的文字为提交，可通过input的value属性修改
        • radio 单选框，几个单选框起相同的name，表示为一组，互斥。添加checked属性表示默认选中
        • checkbox 多选框，添加checked属性表示默认选中
        • datetime-local 日期框
        • file 上传文件选择框

    • label标签，和input输入框进行关联。label的for属性的值和input的id值相同，两个标签会产生关联，点击label标签，输入框也会聚焦

    10.2 文本框

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<body>
<form action="">
    <p>
        <label for="username">用户名:</label>
        <input type="text" id="username">
    </p>
    <p>
        <label for="phonenum">手机号:</label>
        <input type="password" id="phonenum">
    </p>
</form>
</body>
</html>

    10.3 密码框

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<body>
<form action="">
    <p>
        <label for="username">用户名:</label>
        <input type="text" id="username" name='username'>
    </p>
    <p>
        <label for="password">密码:</label>
        <input type="password" id="password" name='password'>
    </p>
</form>
</body>
</html>
<!-- 表单提交的数据是username="用户输入的账号"和password="用户输入的密码"-->

    10.4 单选按钮

    <form>
	<input type="radio" name="sex" value="male">男
	<br>
	<input type="radio" name="sex" value="female">女
</form>

    10.5 复选框

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
	<input type="checkbox" name="bike" checked="">自行车 默认选中
	<br>
	<input type="checkbox" name="car">小汽车
	<input type="checkbox" name="big">大汽车
</form>
</body>
</html>

    10.6 下拉框

    select标签，下拉列表，内部包裹option标签表示下拉选项。默认选中selected。可以通过设置multiple属性多选

    下拉列表。

    <html>
<body>
<form action="" method="" enctype="application/x-www-form-urlencoded">
    <select name="gender" id="">
        <option value="male">男</option>
        <option value="female">女</option>
    </select>
</form>
</body>
</html>

    10.7 文本框

    <html>
<body>
    <p>下面是一个文本输入框</p>
    <textarea rows="10" cols="30">请输入你的内容</textarea>
</body>
</html>

    10.8 按钮

    按钮的文本内容就是input标签的value值

    <html>
<body>
<form>
    <input type="button" value="点我一下">
</form>
</body>
</html>
  • 相关阅读:
    使用原生JS封装一个动画函数
    在Vue 中调用数据出现属性不存在的问题
    vs code 如何修改默认主题的注释颜色
    HTML5新标签的兼容性处理
    如何在Vue中使用Mockjs模拟数据的增删查改
    call、apply和bind的用法
    JS原型继承的几种方式
    JavaScript基础部分经典案例
    运算符与基本数据类型
    python安装与初始
  • 原文地址：https://www.cnblogs.com/xcymn/p/14030522.html
Copyright © 2020-2023  润新知