HTML笔记

Posted 2023-04-01 小电动车

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML笔记相关的知识，希望对你有一定的参考价值。

文章目录

1.HTML
2.HTML基础
3.HTML元素
4.HTML属性
5.文本格式化
6.HTML头部
7.HTML-CSS
8.HTML表格&列表
- 8.1表格
- 8.2列表
9.HTML区块
10.HTML表单
11.HTML框架
12.HTML脚本
ref

1.html

超文本标记语言(HyperText Markup Language), 一种用于创建网页的标记语言(一套标记标签markup tag), 非编程语言
HTML文档包含HTML标签与文本内容, 也叫web页面
后缀.html, .htm, 无区别
标签: 成对出现, 开放标签, 闭合标签
元素: 一个HTML元素包含了开始表亲啊, 结束标签
历史: HTML(1991)->XHTML5(2013)
HTML实例
- <!DONCTYPE html>: 声明为HTML5文档, 有助于浏览器正确显示网页, 不区分大小写
- <html>: HTML页面根元素
- <head>: 包含文档的元(meta)数据, 如定义网页编码格式utf-8 / GBK
- <title>: 文档标题
- <body>: 可见的页面内容
- <h1>: 定义一个大标题
- <p>: 定义一个段落

2.HTML基础

标题: 通过<h1>-<h6>定义
- 标题通过<h1>-<h6>定义, <h1>定义最大标题主标题(最重要)-><h2>次重要, 以此类推
- 浏览器会自动在标题前后添加空行
- 确保标题标签仅用于标题, 不能仅为了生成粗体/大号文本而使用
- 搜索引擎使用标题为网页结构/内容编制索引
段落: 通过<p>定义
- 浏览器自动在段落前后添加空行, <br/>不产生新段落的情况下换行
- HTML被显示的确切效果不可确定, 屏幕大小/窗口调整会导致不同结果, 添加额外空行/空格没有效果, 所有连续空格,空行(换行)显示为一个空格
链接: 通过<a>定义, 在href属性中指定链接的地址
- 可以是字/词/图, 点击后跳转到新的文档/当前文档某个部分
- target属性定义被链接文档在何处显示, 新窗口打开target="_blank"
图像: 通过<img>定义, 在src, width, height中指定名称, 尺寸
- 空标签, 有属性, 无闭合
- alt属性: 无法载入图像时的替换文本

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<p>段落1</p>
<p>段落2</p>
<a href="https://www.runoob.com/html/html-basic.html">链接1</a>
<img decoding="async" src="https://www.runoob.com/wp-content/uploads/2013/06/02A7DD95-22B4-4FB9-B994-DDB5393F7F03.jpg" width="256" height="48">

<br /><!-- 换行 -->
<hr /><!-- 定义水平线, 注释 -->

3.HTML元素

HTML文档由HTML元素定义, 多数元素可嵌套, HTML文档由相互嵌套的元素组成
以开始标签起始, 以结束标签终止
元素内容是开始标签与结束标签之间的内容
某些HTML有空内容empty content, 空元素在开始标签中进行关闭, 如<br>(以后正确用法是<br/>)
大多数HTML元素可拥有属性

4.HTML属性

HTML元素可设置属性, 属性可在元素中添加附加信息, 一般描述于开始标签
形式: 属性总以名称/值对形式出现, 如name="value", 属性,属性值对大小写不敏感
引用: 属性值始终包括于引号内, 单双引号均可, 若属性值本身有双引号, 最外层要用双引号
常用
- class: 为html元素定义一个/多个类名(classname)
- id: 定义元素的唯一id
- style: 规定元素的行内样式(inline style)
- title: 描述元素的额外信息(作为工具条使用)

5.文本格式化

<b>定义粗体文本</b>
<em>定义着重文字</em>
<i>定义斜体字</i>
<small>定义小号字</small>
<strong>定义加重语气</strong>
<sub>定义下标签</sub>
<sup>定义上标签</sup>
<ins>定义插入字(下划线)</ins>
<del>定义删除字(横线)</del>

<code>//定义计算机代码 print("Hello World")</code>
<samp>//定义计算机代码样本 print("Hello World")</samp>
<kbd>定义键盘码</kbd>
<var>定义变量 a</var>
<pre>定义预格式文本
  保留空格和换行符
  文本为等宽字体
</pre>

<abbr title="某些浏览器中, 鼠标移到缩略词上时, 可展示完整">定义缩写</abbr>
<address>
  定义文档作者/所有者联系信息, 常被包含在<footer>元素其他信息中
</address>
<bdo dir="rtl">定义方向</bdo>
<blockquote cite="定义长引用">这是一个超长的文本这是一个超长的文本这是一个超长的文本这是一个超长的文本这是一个超长的文本这是一个超长的文本这是一个超长的文本这是一个超长的文本</blockquote>
<q>定义短引用语(加了引号)</q>
<cite>定义引用</cite>
<dfn>定义一个定义项目</dfn>

6.HTML头部

<head>元素包含了所有头部标签元素, 可插入脚本scripts, 样式文件CSS, meta信息
- 可添加: <title> <style> <meta> <link> <script> <noscript> <base>
<title>标签定义了不同文档的标题, 必需,
- <title>元素, 定义了浏览器工具栏标题, 网页添加到收藏夹中时显示在收藏夹的标题, 显示在搜索引擎结果页面的标题
<base>描述了基本的链接地址/链接目标, 作为HTML文档中所有链接标签的默认链接
<link>定义了文档与外部资源之间的关系, 通常用于链接到样式表
<style>定义了HTML文档样式文件引用地址, 也可直接添加样式来渲染HTML文档
<meta>描述基本元数据, 不显示但被解析
- 常指定网页描述, 关键词, 文件最后修改时间, 作者, 其他元数据
<script>加载脚本文件, 如javascript

<!DOCTYPE html>
<html>
<head>
  <base href="https://www.runoob.com/html/html-head.html" target="_blank">
  <link rel="stylesheet" type="text/css" href="mystyle.css">
  <style type="text/css">
    body 
      background-color:yellow;
    
    p
      color:blue
    
  </style>
  <meta name="keywords" content="为搜索引擎定义关键词">
  <meta name="description" content="为网页定义描述内容">
  <meta name="author" content="定义网页作者">
  <meta http-equiv="refresh" content="30"> <!-- 每30秒刷新页面 -->
</head>
</html>

7.HTML-CSS

CSS(Cascading Style Sheets)用于渲染HTML元素标签的样式, HTML4开始使用, 为更好渲染HTML元素而引入
添加方式
- 内联样式: HTML元素中使用style属性
- 内部样式表: HTML文档头部<head>区域使用<style>属性包含CSS
- 外部引用: 使用外部CSS文件(最好的方式)

内联样式: 特殊样式需要应用到个别元素

<body style="background-color:yellow;">
<h2 style="background-color:red;">红色背景的标题</h2>
<p style="font-family:arial; background-color:green; font-size:20px;">绿色背景的段落</p>
<p style="background-color:yellow; text-align:center;">居中对齐的段落</p>
</body>

内部样式表: 单个文件需要特别样式

<head>
<style type="text/css">
  body background-color:yellow;
  pcolor:blue;
</style>
</head>

外部样式表: 样式被许多页面用到, 可更改一个文件来改变整个站点外观

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

8.HTML表格&列表

8.1表格

表格(由<table>标签定义), 每表格若干行(由<tr>标签定义), 每行分若干单元格(由<td>标签定义)
数据单元格可包含文本, 图片, 列表, 段落, 表单, 水平线, 表格等
边框属性border, 定义才显示
表头由<th>标签定义, 多数浏览器显示为粗体居中的文本

<table border="5">
  <tr>
    <th>0列</th> <th>1列</th> <th>2列</th>
  </tr>
  <tr>
    <td>0,0</td> <td>0,1</td> <td>0,2</td>
  </tr>
  <tr>
    <td>1,0</td> <td>1,1</td> <td>1,2</td>
  </tr>
  <tr>
    <td>2,0</td> <td>2,1</td> <td>2,2</td>
  </tr>
</table>

8.2列表

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
</ul>

标签	描述
`<ol>`	定义有序列表
`<ul>`	定义无序列表
`<li>`	定义列表项
`<dl>`	定义列表
`<dt>`	定义列表项目
`<dd>`	定义列表描述

9.HTML区块

HTML区块元素: 多数HTML元素定义为块级元素/内联元素
- 块级元素在浏览器显示时常以新行开始/结束
- <h1> <p> <ul> <table>
HTML内联元素: 不以新行开始
- <b> <td> <a> <img>
<div>元素, 块级元素, 可用于组合其他HTML元素的容器
- 无特定含义, 但浏览器在前后显示折行
- 若与CSS一起使用, 可对大的内容块设置样式属性
- 常用于文档布局, 取代了使用表格定义布局的老式方法
<span>元素, 内联元素, 可用作文本容器, 用来组合文档的行内元素
- 无特定含义
- 与CSS一同使用时, 可用于为部分文本设置样式属性

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>zzcc测试</title>
  </head>
  <body>
    <div id="container" style="width:500px;">
    <div id="header" style="background-color:#C0A590;">
      <h1 style="margin-bottom:0;">测试用标题</h1></div>
    <div id="menu" style="color:black; background-color:#C0D0E0; height:200px; width:100px; float:left;">
      <b>前端三剑客</b><br>
      HTML<br>
      CSS<br>
      Javascript<br></div>
    <div id="content" style="background-color:white; height:200px; width:400px; float:left">学习一下</div>
    <div id="footer" style="color:black;background-color:#FFA500; clear:both; text-align:center;"><b>向菜鸟教程学习</b></div>
    </div>
  </body>
</html>

10.HTML表单

HTML表单用于收集用户输入信息, 表示文档的一个区域, 包含交互控件, 将用户收集到的信息发送到Web服务器
表单是一个包含表单元素的区域, 如, 下拉列表select, 单选框radio-buttons, 复选框checkbox等
输入元素<input>: 输入类型由type属性定义, 常见类型:
- 文本域textarea: <input type="text">标签设定, 在表单中键入字符, 数字等, 多数浏览器中文本域默认20字符宽
- 密码字段: <input type="password">标签定义, 不明文显示
- 单选按钮: 定义单选框
- 复选按钮: 定义复选框
- 提交按钮: 定义提交按钮, 单机确认时表单内容传送到服务器, 动作属性action定义了服务端文件名, 对接收到的用户输入数据进行相关处理
  - 如下点击确认后, 输入数据会传送到text.php文件, 该页面显示输入结果
  - method属性用于定义表单数据提交方式
    - post: HTTP POST方法, 表单数据包含在表单体内发给服务器, 用于提交敏感数据, 用户名,密码等
    - get: 默认值, HTTP GET方法, 表单数据附加在action属性的URL中, 以?为分隔符, 一般用于不敏感信息, 如分页等. 如https://www.runoob.com/?page=1, 此处page=1及get方法提交的数据

<form name="input" action="text.php" method="get">
Username: <input type="text" name="firstname"><br>
Password: <input type="password" name="password"><br>
<input type="checkbox" name="Language" value="HTML">HTML
<input type="checkbox" name="Language" value="CSS">CSS
<input type="checkbox" name="Language" value="Javascript">Javascript<br>
<input type="radio" name="bool" value="true">学会了
<input type="radio" name="bool" value="false">没学会<br>
<input type="submit" value="交作业了"><br>
</form>

11.HTML框架

使用框架可在同一个浏览器窗口显示不止一个页面
<iframe src="URL"></iframe>, URL指向不同的网页

<iframe loading="lazy" src="https://www.runoob.com/html/html-iframes.html" name="iframe_a" width="500" height="800" frameborder="0"></iframe>

12.HTML脚本

Javascript脚本让HTML页面有更强的动态和交互性, 常用于图片操作, 表单验证及内容动态更新
<script>标签用于定义客户端脚本, 如Javascript, 可包含脚本语句或通过src属性指向外部脚本文件

<noscript>标签提供无法使用脚本时的替代内容

<script>
  document.write("Hello");
</script>
<noscript>抱歉, 这里不支持JavaScript</noscript>

事件响应

  <p id="demo">点击试下</p>
  <script>
    function tap()
    
      document.getElementById("demo").innerHTML="点完了";
    
  </script>
  <button type="nutton" οnclick="tap()">点一下</button>

ref

菜鸟教程HTML 教程- (HTML5 标准)

01html笔记

00 html定义 HTML：HyperText Markup Language，超文本标记语言 01 HTML后缀名 .html .htm 02 基本框架 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob

以上是关于HTML笔记的主要内容，如果未能解决你的问题，请参考以下文章

[前端笔记——HTML介绍] 2.开始学习HTML

前端学习笔记（HTML/CSS）

python学习笔记-Day13-- 前端知识 html

前端笔记整理（HTML）