学习资料：《HTML菜鸟教程》

学习目标：熟悉HTML的语法即可

开发环境：VSCode + Chrome + Plugin:Open In Default Browser

进度：2021.6.1 完成HTML的语法熟悉

HTML简介

<!DOCTYPE html>
<html><head><meta charset = "utf-8"><title> HTML教程 Fighting!!! </title></head><body><h1> 标题 </h1><p> 段落 </p></body>
</html>

代码解析

<!DOCTYPE html> 声明是HTML5文档。有助于浏览器正确显示内容，告知浏览器用了哪种HTML版本，doctype不区分大小写
<html> 是HTML页面的根元素
<head>包含文档的meta data和title data
<body>包含元素的可见内容

什么是HTML？

超文本标记语言 Hyper Text Markup Language
不算严格的编程语言，没有if-else

HTML标签（元素）

带尖括号的文本内容，例如<html></html>
<p></p>

HTML标签和属性（以key = "value" / 'value' 的形式出现）

大小写不敏感，尽量采用小写
常见的属性
- class：为元素定义一个类
- id：元素的唯一id
- sytel：样式
- title：额外的信息，但这个和标签title是同名的，应该是同名功能不同
常见的标签和一些tips
- <a> href必须得加http/https，否则链接失效。属性定义在标签内，标签之间，代表超链接的名字
```
<a href = 'https://www.BAidu.com' target = "_blank"> 百度链接 </a>
```
  - 如果是超链接名字里有双引号，那必须最外层用单引号，例如：name='John "ShotGun" Nelson'
  - target可以代表打开的方式，_blank代表另起一页
- <h1></h1>是最大的标题，font标签的size为6是最大的字体。不要通过标题来生成加粗/大号字体
- <hr>可以生成水平线
- <br>可以换行
- 
- <p></p>会自动在行位添加换行符
- 连续的空格，只会当做一个空格
- 文本格式化标签
  - strong 和 b 等价，都是加粗。出现的原因，是在一些场合，strong和em有加重语气
  - em和i等价，都是斜体
```
<!DOCTYPE html>
<html><head><title> HTML教程 Fighting!!! </title></head><body><b>加粗！</b> <br><em>定义着重文字</em> <br><i>定义斜体</i><br><small>定义小号字</small><br><sub>下标</sub><br><sup>上标</sup><br><ins>插入字</ins><br><del>删除字</del><br><code>计算机代码</code><br><kbd>键盘码</kbd><br><samp>计算机代码样本</samp><br><var>定义变量</var><br><pre>预格式文本</pre><br><abrr>定义缩写</abrr><br><address>地址</address><bdo dir = "rtl">123456</bdo></body>
</html>
```
- head中有许多标签
  - <title>在HTML页面中是必须的
  - <base href = "xxx"> 如果其他地方的href没value，就会用base的href-value
  - <link>用于链接到样式表，有点像头文件引用
  - <style>通过样式来渲染HTML文档
  - <meta>描述基本的元数据。元数据不显示在浏览器上，但会被浏览器解析。可以作为引擎搜索的关键词
  - <script>用于加载js脚本语言

HTML CSS【以内联样式举例】

CSS生效的三种方法
- 内联样式：给HTML的style属性设值
- 内部样式表：在HTML文档<head>区，使用<style>元素来包含CSS（HTML全局）
- 外部引用：引用外部CSS文件【这种最好，外部引用，改变外部文件，可以改所有】

背景色，边距，字体颜色

<p style = "color:red;margin-left: 20px;background-color: black;">哈哈</p>

列举一些属性
- font
- color
- font-size
- text-align：对齐方式
后面在CSS专栏里会更具体地学习，这里但当涉猎

HTML图像

<img src = "http://www.runoob.com/images/pulpit.jpg" alt="haha" width="900px" height="900px" >

<img>没有闭合标签
src是url
alt是图片加载失败后的tips
width和height分别代表宽高（px）
<area></area>标签，可以定义图片可点击区域以及跳转页面

HTML表格

<table border="1"><th> 表头1 </th><th> 表头2 </th><tr><td>(1,1)</td><td>(1,2)</td></tr><tr><td>(2,1)</td><td>(2,2)</td></tr>
</table>

<table></table>实现表格
border属性定义边框大小
<th></th>代表表头
<tr>代表一行
<td>代表一行中的某个数据
因为table是父元素，所以子元素所有的节点都有属性border = 1

HTML列表

<body><ul><li>Coffee</li><li>Milk</li></ul><ol><li>Coffee</li><li>Milk</li></ol>
</body>

有序列表与无序列表

HTML布局

 <div id="container" style="width:500px"><div id="header" style="background-color:#FFA500;"><h1 style="margin-bottom:0;">主要的网页标题</h1></div><div id="menu" style="background-color:#FFD700;height:200px;width:99px;float:left"><b>菜单</b><br>HTML<br>CSS<br>JavaScript</div><div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:right;">内容在这里</div><div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">版权 © runoob.com</div></div>

<table></table>表格不是布局工具
<div></div>直接整个块，然后div里的属性可以影响里面的元素
通过div标签和float属性进行HTML排版

HTML表单

<form>First name : <input type = "text" value="ee"><br>Password   : <input type = "password"><br><input type = "radio" name ="sex" > Happy0<br><input type = "radio" name = "sex1"> Happy1<br><input type = "radio" name= "sex" > Happy2<br><input type="checkbox" > bick0 <br><input type="checkbox" > bick1 <br>
</form><form name="input" action="your html path" method="get"><input type="text" name="usewerwerrddewrewrwr"><input type="submit" value="Submit">
</form>

input标签中，type属性的常见类型
- password
- text
- radio：单选，name相同只有一个会被勾选
- checkbox
- 通过action可以将数据发送到your html path

HTML框架

<iframe loading="lazy" src="http://www.baidu.com" width="2000" height="2000"></iframe>

iframe框架可以在浏览器中同时显示多个页面

HTML脚本

<script>document.write("<p> this is a paragraph </p>");
</script>
<noscript>sorry,your browser does not support js!
</noscript>
<p id="oo"> hello !!!!</p>
<script>function MyOnclickFunc(){document.getElementById("oo").innerHTML = "click change the text";}
</script>
<button type = "button" onclick = "MyOnclickFunc()"  ></button>

script用于定义客户端脚本语言，例如JS
<noscript>用于当浏览器禁止脚本语言时候的 try out
通过button，指定onlick属性值，可以触发JS事件

HTML字符实体

HTML中某些字符是预留的。就像C++中，有些字符是预留字符一个道理
- 表达方式：&entity_name &#entity_number

《HTML菜鸟教程》学习相关推荐

【SQL学习笔记】《SQL进阶教程》1.1
SQL进阶教程学习笔记1.1 1-1case 表达式将已有编号方式转换为新的方式并统计 SELECT CASE pref_nameWHEN '辽宁' THEN '东北'WHEN '福建' THEN ...
【SQL进阶教程】第一章 case表达式
本系列基于<SQL进阶教程>(如下图)学习,实现了书中代码及练习题代码.PS:电子书请大家各自默默脚本之家. [知识点1]case表达式概述 Case表达式有简单case表达式和搜索cas ...
SQL基础教程学习第六站：数据更新
仅用于记录学习,欢迎批评指正,共同交流,共同进步,大神勿喷系列文章 SQL基础教程学习第一站:PostgreSQL下载安装以及如何创建并登录数据库: SQL基础教程学习第二站:数据库基本知识: SQ ...
SQL进阶教程—自链接的用法
用法 https://moonshuo.cn/posts/14085.html 可重排列,排列,组合需求:现在我需要将这个水果的品种各个组合起来,构成一个有序对的组合在这个过程中首先执行完毕fro ...
SQL进阶教程—CASE表达式
所有的文件在SQL进阶教程 (ituring.com.cn),随书下载那里概述文章原址基本写法简单CASE表达式 SELECT CASE 列名称WHEN 匹配字符 THEN 转换字符WHEN ...
SQL数据库教程-学习笔记2
SQL数据库教程-学习笔记2 文章目录 SQL数据库教程-学习笔记2 三.DML语言的学习 1.插入语句:insert into 2.修改语句:update 3.删除语句:delete 4.练习题四 ...
【SAP Hana】X档案：SAP HANA SQL 进阶教程
SAP HANA SQL 进阶教程 5.HANA SQL 进阶教程 (1)Databases (2)User & Role (3)Schemas (4)Tables (5)Table Inde ...
【SQL学习笔记】《SQL进阶教程》1.2
1-2自连接的用法自连接+非等值连接自连接+GROUP BY = 递归集合表是行的集合,面向集合开销较大唯二重要的方法 CASE 自连接 SQL语言 : 面向集合的特性可重排列.排列.组合 ...
SQL进阶教程——用SQL进行集合运算（第七章）
1. 前言集合论是SQL语言的根基--这是贯穿全书主题之一.因为他的这个特性,SQL也被称为面向集合语言.只有从集合的角度思考,才能明白SQL的强大. 但是,实际上这一点长期以来都被很多人忽略了.造 ...
SQL进阶教程 | 史上最易懂SQL教程 5小时零基础成长SQL大师
目录第一部分:基础--增删查改 [第一章]做好准备 Getting Started (时长25分钟) [第二章]在单一表格中检索数据 Retrieving Data From a Single Ta ...

《HTML菜鸟教程》学习

HTML简介

代码解析

什么是HTML？

HTML标签（元素）

HTML标签和属性（以key = "value" / 'value' 的形式出现）

HTML CSS【以内联样式举例】

HTML图像

HTML表格

HTML列表

HTML布局

HTML表单

HTML框架

HTML脚本

HTML字符实体

《HTML菜鸟教程》学习相关推荐

最新文章

热门文章