Basic HTML and HTML5
注：内容来自https://www.freecodecamp.org/learn/
标题
一级标题使用<h1>开始，</h1>结束，其他级别标题类似。
<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
段落
段落用<p>开始，以</p>结束，并且是小写，大写不可用。
<p>Hello Paragraph</p>
注释
HTML中的注释以 <!-- 开始，以 -->结束。
网页主体
使用 main关键字帮助浏览器和其他开发者快速找到页面的主题部分。
<main>
<h1>Hello World</h1>
<p>Hello Paragraph</p>
</main>
图像
使用img关键字将图像添加到您的网站，并使用src属性指向目标图像的URL 。所有img元素必须具有alt属性。alt属性作为当前图像的说明，如果图像无法加载，则显示该属性。
<img src="https://www.freecatphotoapp.com/your-image.jpg" alt="A business cat wearing a necktie.">
外部链接
可以在网页插入链接，用于转到其他页面。使用a（锚点）元素链接到其他网页或内容，格式包含链接的网址（用href参数指定），以及在当前页面显示的标记（在<a>和</a>之间输入不带引号的文本指定）。
<a href="https://freecodecamp.org">this links to freecodecamp.org</a>
可以在段落内部插入链接，用target（锚标签属性）指定在何处打开链接，当其值为 _blank时在表示在新选项卡中打开链接。
<p>
Here's a <a target="_blank" href="http://freecodecamp.org"> link to freecodecamp.org</a> for you to follow.
</p>
上述代码将显示为：Here's a link to freecodecamp.org for you to follow.
注意代码中已将链接前后的空格加入。
内部链接
a（锚点）元素也可以用于创建内部链接，以跳转到网页中的不同部分。要创建内部链接，请将链接的href属性分配给哈希符号，#再加上内部链接的元素的id属性。然后，您需要向链接的元素添加相同的属性。id是标识元素的唯一属性。
<a href="#contacts-header">Contacts</a>
...
<h2 id="contacts-header">Contacts</h2>
内部链接锚点后面的href属性需要加#，被链接的内容的id不加#，锚点后面的Contacts是页面上链接显示的内容，h2后的Contacts是h2的内容。
当链接的锚点的href="#"时，表示该链接为无效链接。
将图片转换为链接
只需将图像嵌套在锚点a中即可实现点击图片，跳转链接。
<a href="#"><img src="https://bit.ly/fcc-running-cats" alt="Three kittens running towards the camera."></a>
无序列表
无序列表以开头<ul>元素开头，后跟任意数量的<li>元素，以</ul>结尾。
<ul>
<li>milk</li>
<li>cheese</li>
</ul>
有序列表
无序列表以开头<ol>元素开头，后跟任意数量的<li>元素，以</ol>结尾。
<ol>
<li>Garfield</li>
<li>Sylvester</li>
</ol>
用户输入
input 元素是从用户那里获取输入的便捷方法。
<input type="text">
占位符文本是input用户输入任何内容之前在元素中显示的透明色的内容。
<input type="text" placeholder="this is placeholder text">
提交数据
HTML单独可以向服务器提交数据，它通过创建Web表单再提交给服务器的方式实现。表单使用表单标签 <form> 来设置，action属性指定服务器地址。通过添加一个submit按钮（指定type=“submit”）进行提交。
<form action="/url-where-you-want-to-submit-form-data">
<button type="submit">this button submits the form</button>
</form>
可以指定表单中的必填项，在未输入前不能提交数据。只需在input内添加required关键字。input是自封闭的，开始结尾都在<>内完成。
<input type="text" required>
单选按钮
单选按钮通过label和input共同实现，在label内加入for="indoor"，说明这个标签是为id为indoor的输入创建的；每个输入都有一个label，它们的label里的input下的name属性都是一致的，用于说明它们是一组单选按钮。
<label><input name="Fruit" type="radio" value="" >苹果 </label>
<label><input name="Fruit" type="radio" value="" >桃子 </label>
<label><input name="Fruit" type="radio" value="" >香蕉 </label>
<label><input name="Fruit" type="radio" value="" >梨 </label>
<label><input name="Fruit" type="radio" value="" >其它 </label>
复选框
复选框相对于单选按钮，只需修改input内的type="checkbox"。
<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
选中状态的确定
<label for="indoor">
<input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
<label for="outdoor">
<input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor
</label>
这里有两个单选按钮，如果Indoor被选中，则传回服务器中的表单中将会增加一行：indoor-outdoor=indoor，即需要name和value两个属性共同确定。
value的默认值是on，当Indoor中value未被设置，而Indoor又被选中的情况下，则传回服务器中的表单中有一行：indoor-outdoor=on，实际上是无效的，服务器不能识别，所以需要设置value等于id的内容。
设置默认选项
可以为单选按钮或复选框设置默认选项，通过在input中添加checked关键字进行设置。
<input type="radio" name="test-name" checked>
分隔标记
使用div元素对内容进行分隔。
<div>
</div>
声明文档类型
在文档的顶部，您需要告诉浏览器页面使用的HTML版本。HTML是一种不断发展的语言，并且会定期进行更新。大多数主流浏览器都支持最新规范HTML5。但是，较旧的网页可能会使用该语言的早期版本。您可以通过<!DOCTYPE ...>在第一行添加标签来告知浏览器该信息，其中第一...部分是HTML的版本。对于HTML5，请使用<!DOCTYPE html>。接下来，其余的HTML代码需要包装在html标记中。开头<html>位于该<!DOCTYPE html>行的正下方，而</html>结尾位于页面的末尾。
<!DOCTYPE html>
<html>
<!-- Your HTML code goes here -->
</html>
定义标题和正文
您可以在html带有head和body元素的标记内的HTML文档中添加另一个组织级别。任何包含有关您的页面信息的标记都将放入head标记中。然后，带有页面内容（用户显示内容）的任何标记都将进入body标签。
<!DOCTYPE html>
<html>
<head>
<!-- metadata elements -->
</head>
<body>
<!-- page contents -->
</body>
</html>
浙公网安备 33010602011771号