基础HTML5和HTML操作

---

前言

HTML 是一种标记语言，使用特殊的语法或标记来向浏览器描述网页的结构。HTML 元素由开始和结束标签构成，标签之间是文本内容。 不同的标签可以让文本内容以标题、段落、列表等形式展现。

---

提示：以下是本篇文章正文内容，关于HTML的基础操作

part 1.

HTML元素都有一个开始标签和结束标签
ps:HTML内标签都使用小写字母

<h1>

</h1>

<h1.>通常用作主标题<h2.><h3.>用做不同等级的标题

代表段落

<p>
</p>

HTML元素的注释

<!--
-->

< main>元素

给网站增加图片元素

<img src="https://www.freecatphotoapp.com/your-image.jpg" alt="A business cat wearing a necktie.">

img是指增加图片
src作用是指向图片的地址

所有的 img 元素 必须 有 alt 属性。 alt 的属性值有两个作用，第一个作用是让屏幕阅读器可以知晓图片的内容，这会对网页的可访问性有很大提升；另一个作用是当图片无法加载时，页面需要显示的替代文本。

ps 如果图片是纯装饰性的，把 alt 的属性值设置为空是最佳实践。

用 a 实现网页间的跳转

<a href="https://www.freecodecamp.org">this links to freecodecamp.org</a>

href 属性指向跳转的目的地。与此同时，后面应该有文本作为点击链接的桥梁

用a实现网页内跳转

要创建内部链接，需要将链接的 href 属性值设置为一个哈希符号 # ，加上想内部链接到的元素的 id，通常是在网页下方的元素。 然后需要将相同的 id 属性添加到你链接到的元素中。 id 是描述网页元素的一个属性，它的值在整个页面中唯一。

<a href="#contacts-header">Contacts</a>
...
<h2 id="contacts-header">Contacts</h2>

contacts是点的链接

将 a 嵌套在段落中

<p> View more 
  <a href="https://www.freecatphotoapp.com" target="_blank">cat photos</a>  
</p> 

like this

用 # 号来创建链接占位符

有时你想为网站添加一个 a 元素，但还不确定要将它链接到哪里。使用href="#"

给图片添加链接`

<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="Three kittens running towards the camera."></a>

如果把 a 的 href 属性值设置为 #，创建的是一个死链接（不跳转到其他画面）。 请把现存的图片嵌套进 a（ 锚点）元素中。

创建一个无序列表< ul>

<ul>
  <li>milk</li>
  <li>cheese</li>
</ul>

创建一个有序列表

<ol>
  <li>Garfield</li>
  <li>Sylvester</li>
</ol>

创建一个输入框

<input type="text">

给输入框添加占位符文本

<input type="text" placeholder="this is placeholder text">

用到placeholder

创建一个表单

我们可以只通过 HTML 来实现发送数据给服务器的表单， 只需要给 form 元素添加 action 属性即可

<form action="/url-where-you-want-to-submit-form-data">
  <input>
</form>

给表单添加提交按钮

让我们来给表单添加一个 submit（提交）按钮。 点击提交按钮时，表单中的数据将会被发送到 action 属性指定的 URL 上。

<button type="submit">this button submits the form</button>

type可以搞为"submit"

给表单添加一个必填字段

当你设计表单时，你可以指定某些字段为必填项（required），只有当用户填写了该字段后，才可以提交表单。 如果你想把文本输入框设置为必填项，在 input 元素中加上 required 属性就可以了，例如：

<input type="text" required>

创建一组单选按钮

单选按钮是 input 选择框的一种类型。 每一个单选按钮都应该嵌套在它自己的 label（标签）元素中。 这样，我们相当于给 input 元素和包裹它的 label 元素建立起了对应关系。 所有关联的单选按钮应该拥有相同的 name 属性。 创建一组单选按钮，选中其中一个按钮，其他按钮即显示为未选中，以确保用户只提供一个答案。

例子

<label> 
  <input type="radio" name="indoor-outdoor">Indoor 
</label>

<input id="indoor" type="radio" name="indoor-outdoor">
<label for="indoor">Indoor</label>

<label for="indoor"> 
  <input id="indoor" type="radio" name="indoor-outdoor">Indoor 
</label>

创建一组复选框

<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>

复选框是 input 选择框的一种类型。 每一个复选框都应该嵌套在它自己的 label（标签）元素中。 这样，我们相当于给 input 元素和包裹它的 label 元素建立起了对应关系。 所有关联的复选框应该拥有相同的 name 属性。 使得 input 与 label 关联的最佳实践是在 label 元素上设置 for 属性，让其值与相关联的 input 复选框的 id 属性值相同。

提交表单时，所选项的值会发送给服务端。 radio 和 checkbox 的 value 属性值决定了发送到服务端的实际内容。

<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>

给单选按钮和复选框添加默认选中项

用 checked 属性把第一个复选框和单选按钮都设置为默认选中。

<input type="radio" name="test-name" checked>

元素嵌套

div 元素也叫内容划分元素，是一个包裹其他元素的通用容器。 它也是 HTML 中出现频率最高的元素。 和其他普通元素一样，你可以用 < div> 来标记一个 div 元素的开始，用 < / div> 来标记一个 div 元素的结束。

声明 HTML 的文档类型

你可以通过 来告诉浏览器页面上使用的 HTML 版本，"..." 部分就是版本号。 对应的就是 HTML5。 ! 和大写的 DOCTYPE 是很重要的，尤其是对那些老的浏览器。 但 html 无论大写小写都可以。 所有的 HTML 代码都必须位于 html 标签中。 其中 位于 之后， 位于网页的结尾。

定义 HTML 文档的 head 和 body

html 的结构主要分为两大部分：head 和 body。 网页的描述应放入 head 标签， 网页的内容（向用户展示的）则应放入 body 标签。 比如 link、meta、title 和 style 都应放入 head 标签。