HTML进阶笔记
介绍
费曼学习法最重要的部分，即把知识教给一个完全不懂的孩子——或者小白。
为了更好的自我学习，也为了让第一次接触某个知识范畴的同学快速入门，我会把我的学习笔记整理成电子幽灵系列。
提示：文章的是以解释-代码块-解释的结构呈现的。当你看到代码块并准备复制复现的时候，最好先保证自己看过了代码块前后的解释。
作为对＜电子幽灵＞前端第一件：HTML基础笔记上和＜电子幽灵＞前端第一件：HTML基础笔记下的补充，这篇文章将介绍HTML中区块、框架和表单的用法，并且简单介绍脚本和字符实体。
本篇笔记主要来源于对 菜鸟教程：HTML教程的学习。
约定规范
HTML区块
在HTML中，大部分标签被分类成 块级元素 和 内联元素。
<!--该段代码部分由AI Fitten Code生成并已经过验证-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落</p>
<div style="color:aqua">
<h3>这是一个div中定义的标题</h3>
<p>这是一行在div中定义的文本</p>
</div>
<p>接下来是span标签的使用实例:</p>
<p>她梳着两个<span style="color:red">红色的长辫子</span>。</p>
<p>漂亮的晚霞把城市染成了<span style="color:deeppink">洋红色</span>。</p>
</body>
</html>
- 块级元素：块级元素出现的时候，通常会以新的一行作为开始。比如p、table、ol/ul等。
- 内联元素：显示的时候通常不以新的一行作为开始，如img，b，a，td等。
div/span：大块和小部分
div用来分割HTML文件中的不同区块，属于块级元素。无特殊属性。
span则用来对部分文本设置特殊的样式属性，属于内联元素。无特殊属性。
div和span的是对浏览器进行布局和属性设置的老式手法。随着HTML的发展，他们更多的和CSS、JavaScript一同使用，创建更丰富多彩的页面。
用div实现的HTML布局
<!--该案例从菜鸟教程拷贝而来-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<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:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>
</div>
</body>
</html>
通常像这样用div实现一个网站布局比较耗时，可以搜索一些网站布局模板；而且把样式放在div标签当中，网站很大时会难以维护，因此现在更多使用CSS进行网页的布局和渲染等工作。
HTML框架
HTML框架为我们提供了一种方式，可以在一个浏览器页面中显示多个网页页面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<iframe src = "https://www.youkuaiyun.com/",width = 1000,height = 800></iframe>
<p>实际上，iframe标签还可以和a标签有联动，比如说：</p>
<iframe src = "https://www.youkuaiyun.com/" width = 1000 height = 800 name = "frame_1"></iframe>
<br/>
<a href = "https://www.runoob.com/" target = "frame_1">点下这个链接，上面的iframe中就会显示菜鸟教程界面。</a>
</body>
</html>
iframe：框架标签
iframe是一个内联标签，用来在网页中新定义一个框架。在这个框架中，可以显示另外一个HTML页面。
iframe的常用属性
- height:规定iframe的高度
- width:规定iframe的宽度
- src:规定iframe中页面的URL
- name:规定iframe的名称
HTML表单
很多时候，我们都需要通过网页注册一些账号、搜索一些东西等等。为此，我们输入一些信息，并得到相应的结果。存储并传输我们信息的HTML网页部分就叫做表单。表单让HTML的交互性更加强大而灵活。
<!--该案例部分从菜鸟教程拷贝而来，部分由AI FittenCode生成，已经过验证-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>表单示例</p>
<form action="" method="post">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" required><br/><br/>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" required><br/><br/>
<label for="phone">手机号码：</label>
<input type="tel" id="phone" name="phone" required><br/><br/>
<label for="message">留言：</label>
<textarea id="message" name="message" required></textarea><br/><br/>
<label>性别:</label>
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
<br/><br/>
<label>爱好:</label>
<input type="checkbox" id="reading" name="hobby[]" value="reading">
<label for="reading">阅读</label>
<input type="checkbox" id="swimming" name="hobby[]" value="swimming">
<label for="swimming">游泳</label>
<input type="checkbox" id="hiking" name="hobby[]" value="hiking">
<label for="hiking">登山</label>
<input type="checkbox" id="others" name="hobby[]" value="others">
<label for="hiking">其他</label>
<br/><br/>
<label for="country">国家:</label>
<select id="country" name="country">
<option value="cn">CN</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select>
<br/><br/>
<label for="国家">国家:</label>
<input list = cnlist>
<datalist id="cnlist">
<option value="cn">CN</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</datalist>
<label for="file">上传文件：</label>
<input type="file" id="file" name="file"><br/><br/>
<input type="submit" value="提交">
</form>
</body>
</html>
HTML表单相关的标签提供了很多种交互方式，涉及到多个标签。
HTML表单相关标签
form：创建表单标签
form标签用于创建一个可供用户输入的表单，其中有各种各样的(至少一个)表单元素，比如input、label等等。
form的常用属性
- method:规定用于发送该表单数据的HTTP方法。可选值：get、post
- name:规定表单名称
- action:规定当提交表单是要向哪里提交数据。值为URL
- target:在哪里打开action中指向的URL。值同标签a。
label：表单元素标签
label只是为input标签提供相应的解释；但是在点击label标签对应的文本时，浏览器也会将注意力转移到和它相关的input上——例如直接勾选相关input的方框等。
label的常用属性
- for:规定该label应当和哪个input绑定。值应当为某个input的id。
input：输入框创建标签
input获取用户的输入，只有用户在input中输入内容时，才会被表单提交。
input可以根据type属性进行多种变化。
input是空标签。
input的常用属性
- type: 规定要显示的input元素的类型。
值有：- button
- text
- checkbox
- file
- submit
- ratio
- password
- url
- date
- time
- image
- …
- value:指定input当中的默认值
- accept:指定可被上传的文件类型(仅针对type = "file"时)
- width:指定input的宽度(仅针对type = "image"时)
- height:指定input的高度(仅针对type = "image"时)
- src:指定input的来源url(仅针对type = "image"时)
- alt:指定input的替代文本(仅针对type = "image"时)
- form:规指定nput所属的一个/多个表单
- required:指定是否是必填项
- name:指定input元素的名字
- list:指明该input元素是不是一个下拉列表。值为相对应的datalist的id值。
- multiple:是否可以输入多个(仅针对type = "email"或"file"时)
- max/min:规定输入的最大/小值。
- maxlength:规定输入的字符串最大长度。
select/option/datalist：下拉列表标签
有两种下拉列表输入数据的方式：select+option标签，或者input+datalist+option标签，实现的效果不同。
其中，select兼具input的功能，datalist需要当input的type = "list"时被调用，option主要是用做select或者datalistlist的其中一个选项。
当使用select时，输入只能是option中给定的几个选项之一；当使用input的时候，datalist中的选项只有参考和快捷输入的作用，实际上可以随意填写。
select的常用属性
- name:定义下拉列表的名称
- form:指明select所属的一个或多个表单
- size:指明下拉列表中可见选项的个数
datalist的常用属性
datalist没有特殊的属性，但是为了被input等标签调用，它应当有一个id属性，表明自己的身份、便于被调用。
option的常用属性
- value:当该option被选中时，被交付的将会是value中的数据。
- selected:表单中将默认选中该option。
HTML脚本
前端三大件：HTML、CSS、JavaScript。这三者之间是递进的关系，在学习的时候也应该递进的学习。CSS、JavaScript都可以用来修饰、赋能HTML，那么他们该如何出现在HTML文件当中呢？答案是：脚本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
document.write("Hello, World!");
</script>
<noscript>如果浏览器不支持JavaScript，这行字就会出现。</noscript>
<body>
</body>
</html>
HTML脚本相关标签
HTML中，脚本语句写在script当中。当然，如果脚本中的内容不为浏览器所支持，还可以用noscript中的替代文本来显示。
script:脚本设置标签
script放在body当中，其中的元素既可以是脚本代码，也可以通过src属性指向外部的脚本文件。
script的常用属性
- src:指定外部的脚本URL
- async：异步执行脚本文件(仅当脚本为外部文件时)
- defer:页面完成解析后再执行脚本(仅当脚本为外部文件时)
- charset:规定在脚本中使用的字符编码
- type:指定脚本中的MIME类型
noscript:脚本替代标签
noscript一般放在script后面，如果浏览器不支持script中的语言，noscript中的内容就会替代script出现。
body中正常可以出现的内容，在noscript中都可以出现。
noscript的常用属性
noscript没有特殊属性。
总结
至此，HTML的大致用法已经在三个博客里展现出来了。我尽量省略了细枝末节的内容，而把大体的框架和常用的部分放在了文章里，为的就是让任何一个对前端感兴趣的人可以快速上手，写出较为完整的、可以直接简单实用的程序。至于使用是需要注意的细节，可以去其他的教学网站、视频、文档当中寻找；而如果想快速过完三大件，为自己的前端知识迅速打底，也恭喜你，基本完成了第一大件：HTML的学习。但是在如今这完全不够。看完这篇文章后，作为一个前段初学者更应该做的是，立即开始阅读下一篇文章——<电子幽灵>前端第二件：CSS基础笔记上
谢谢。
所有的真理都具有时效性。根据集合论，似乎所有的所谓“真理”最后都会导出矛盾。因此，运动性而非机械性的思考是非常重要的。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
