HTML5 前端学习存档

2021-04-22-HTML5记录

Posted by xnchen on April 22, 2021

摘要
基础知识
- 语法
- 功能
  - HTML头部
  - 图像
  - 表格
  - 列表
  - 格式化
  - 区块布局
  - 表单
  - 程序
  - 字符实体

[TOC]

摘要

学习前端的目的是：

毕设答辩
wland不行

目前的路径：

前端：HTML5+CSS3+JS
数据库：MySQL
后端：GO

HTML5参考文献：

W3CSchool

基础知识

语法

HTML中的连续空格（空格字符、换行）会被解释器渲染为一个单独的空格符（要用多个空格，参考字符实体
HTML标签对大小写不敏感请用小写

功能

HTML头部

标签	用处	例子	注释
<head>	内部包含HTML文档的元信息		必须包含<title>，可以包含<base>、<meta>、<script>、<link>等
<title>	定义标题	`<title>HTML学习捏</title>`	会出现在浏览器窗口的标题中
<base>	定义页面所有连接的默认URL和默认目标	`<base href="https://www.w3cschool.cn/statics/images/"; target="_blank">`	属性包括了href和target。href定义默认URL，target定义默认目标（规定超链接和表单在何处打开）这两个属性会被连接中的属性覆盖。
<meta>	定义HTML元信息	`<meta name="description" content="页面描述">` `<meta name="keywords" content="HTML,CSS,XML,JavaScript（关键字用于搜索引擎）">` `<meta name="author" content="页面作者">` `<meta charset="UTF-8">`	属性中，charset定义了文档的字符编码 Meta在线生成器
<link>	链接到外部CSS式样表，可以使用外部资源渲染网页	`<link rel="stylesheet" type="text/css" href="styles.css">`
<style>	在文档内定义样式信息	`<style type="text/css">` `body {background-color:yellow;}` `h1 {color:red;}` `p {color:blue;}` `</style>`	<style>之间的内容就是CSS background-color定义背景颜色 font-family定义字体样式 color定义字体颜色 font-size定义字体大小 text-align定义文本的水平与垂直对齐方式

图像

标签	用处	例子	注释
<img>	插入图像	`<img src="1.png" width="200" height="100" alt="无法载入图像时的文本提示信息">`	不需要结束标记 border属性指定图片边框粗细 align属性设置图像对齐方式（center或right）

表格

标签	用处	例子	注释
<table>	插入表格	`<table border="1"><br/>` `<tr>` `<td>row 1, cell 1</td>` `<td>row 1, cell 2</td>` `</tr>` `<tr>` `<td>row 2, cell 1</td>` `<td>row 2, cell 2</td>` `</tr>` `</table>`	表格如果不定义边框属性border，就不会显示边框。
<th>	表头单元格		大多数浏览器会把表头显示为粗体居中的文本
<tr>	定义表格中的行		rowspan属性设置单元格可以横跨的行 colspan属性设置单元格可以横跨的列

列表

标签	用处	例子	注释
<ul>	定义无序列表	`<ul>` `<li>Coffee</li>` `<li>Milk</li>` `</ul>`
<ol>	定义有序列表	`<ol>` `<li>Coffee</li>` `<li>Milk</li>` `</ol>`
<li>	定义列表项
<dl>	开始一个定义列表	`<dl>` `<dt>Coffee</dt>` `<dd>- black hot drink</dd>` `<dt>Milk</dt>` `<dd>- white cold drink</dd>` `</dl>`
<dt>	定义列表中的一个列表项
<dd>	定义列表中列表项项的描述

格式化

标签	用处	例子
<a>	插入链接	1. `<a href="http://www.baidu.com">这是一个百度</a>` 2. `<a href="#">定义空链接（实际上是跳转到#定义的位置上，默认是网页上端）</a>` ``定义另一个空链接（死链接，点击不会有效果）`<br/>3.` 这是一个新窗口打开的百度`<br>4. 另一个可以用的方法：id属性创建标签，可以跳转：<br>`在HTML文档中插入ID`<br>`在文档的另一个部分创建链接，这个链接可以跳转到之前的tips中`<br>`或者，在别的页面中，使用URL链接到该页面的tips部分`
<p>	定义段落	`<p>这是一个段落。</p>`
<h1> - <h5>	标题	`<h1>标题1</h1>`
<hr>	水平线	`<hr>`
<!–…–>	注释	`<!-- 这是一个注释 -->`
<br>	换行	`<br>`
<b>和<strong>	粗体	`<b>加粗文本</b>` `<strong>重要文本</strong>`
<i>和<em>	斜体	`<i>斜体文本</i>` `<em>重要文本</em>`
<sub>和<sup>	上下标	`<sub>上标</sub>` `<sup>下标</sup>`
<blockquote>	块引用	`<blockquote cite="http://www.baidu.com">For 50 years, WWF has been protecting the future of nature.</blockquote>`

区块布局

标签	用处	例子	注释
<div>	定义文档区域块		没有特定含义，不会在文档中显示，它可以用于包含其他HTML元素，定义其格式，以及加入id。因为是块级元素，浏览器会在其前面显示折行。支持HTML的全局属性和事件属性，可以使用div和它的style属性进行布局。
<span>	定义行内文档区域		没有特定含义，不会在文档中显示，它可以用于包含其他HTML元素，定义其格式，以及加入id。它是内联元素。支持HTML的全局属性和事件属性。

表单

标签	用处	例子	注释
<form>	生成表单
<input>	表单中的输入元素	1. 输入文本：`姓名：<input type="text" name="firstname">` 2. 输入密码：`密码：<input type="password" name="pwd">` 3. 单选按钮： `<input type="radio" name="sexual" value="male">`男 `<input type="radio" name="sexual" value="male">`女 4. 复选按钮： `<input type="checkbox" name="vehicle" value="bike">自行车` `<input type="checkbox" name="vehicle" value="Car">` 5. 提交按钮：当用户单击确认按钮时，表单的内容会被传送到另一个文件。form中的动作属性action定义了该文件的文件名 `<form name="input" action="html_form_action.php" method="get">` `Username: <input type="text" name="user">` `<input type="submit" value="Submit">` `</form>`

程序

标签	用处	例子	注释
<script>	将脚本（如JavaScript）插入HTML文档	`<script> document.write("Hello World!") </script>` `<script src="//www.w3cschool.cn/statics/js/project.view.js" type="text/javascript"></script>`	可以用于脚本语句，，也可以使用src属性指向外部脚本文件。如果指向外部脚本文件，则script必须是空的（中间没有内容）。
<noscript>	定义针对不支持客户端脚本的用户的替代内容	`<script> document.write("Hello World!") </script>` `<noscrirpt>Sorry, your browser does not support JavaScript!</noscript>`

字符实体

显示结果	描述	实体代码	实体编号
	空格	` `	` `
<	小于号	`<`	`&#60`
>	大于号	`>`	`&#62`