在学习几天前端发现什么都没学到后的从零开始的HTML学习

在学习几天前端发现什么都没学到后的从零开始的HTML学习

---

---

前言

---

一、各个基本元素

1、p标签： 段落标签

<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
    <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip </p>

2、a标签：实现网页之间的跳转，href填链接的地址，两尖括号之间填显示的文本
可以当成超链接理解

 <a href="https://www.freecatphotoapp.com">cat photos</a>

同时a元素也可以用于创建内部链接，跳转到网页内的各个不同部分

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

<a href="#footer" >Jump to Bottom</a>

3、main：用于快速找到主要代码（可以把p a img等放到main里）

<main>
    <img src="https://www.bit.ly/fcc-relaxing-cat" alt="No Pic!">
    <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
    <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip </p>
</main>

4、img：src里写图片地址，alt写如果图片无法加载显示的一些提示信息

注：良好的代码必须有alt

<img src="https://www.bit.ly/fcc-relaxing-cat" alt="No Pic!">

二、其他文本元素的嵌套链接

1. 其他文本元素的嵌套链接

1、a嵌套在段落p中

2、target锚点元素：用来指定链接的打开方式，属性值 _blank 表示链接会在新标签页打开，href
是锚点元素的另一个属性，它用来指定链接的 URL。

3、a元素内的文本叫锚点文本，会显示为一个可以点击的链接

效果：创建一个新的段落 p 元素来包裹 a 元素。 新段落应有文本 View more cat photos，其中 cat photos 是一个链接，其余是纯文本。

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

2. 用 # 号来创建链接占位符

添加了a元素而不知道把它链接到哪里，就将href中用#占位

<p>Click here to view more <a href="#" target="_blank">cat photos</a>.</p>

3. 给图片添加链接

如果把 a 的 href 属性值设置为 #，创建的是一个死链接（不跳转到其他画面）

<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

三 列表

1.无序列表

<ul>
    <li>毛球</li>
    <li>猫粮</li>
    <li>纸板</li>

</ul>

2.有序列表

有序列表以 <ol> 开始，中间包含一个或多个 <li> 元素。 最后以 </ol> 结束

<ol>
    <li>老鼠</li>
    <li>老鼠</li>
    <li>老鼠</li>
</ol>

四 输入框

1.创建一个输入框

input 输入框可以让你轻松获得用户的输入

注意 input 输入框是没有结束标签的

<input type="text">

2.给输入框添加占位符文本

占位符文本用户在 input 输入框中输入任何东西前的预定义文本
placeholder后面跟占位的文本。

<input type="text" placeholder="cat photo URL">

该处使用的url网络请求的数据。

---

五 表单

1.创建一个表单

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

注意：form是双标签

<form action="https://www.freecatphotoapp.com/submit-cat-photo">
    <input type="text" placeholder="cat photo URL">
  </form>

2.添加提交按钮

button标签为双标签，button中使用type控制按钮的类型

<button type="submit">
    Submit
</button>

3.给表单添加一个必填字段

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

<input type="text" placeholder="cat photo URL" required>

4.创建一组单选按钮

单选按钮是 input 选择框的一种类型。

每一个单选按钮都应该嵌套在它自己的 label（标签）元素中。 这样，我们相当于给 input 元素和包裹它的 label 元素建立起了对应关系。

所有关联的单选按钮应该拥有相同的 name 属性。 创建一组单选按钮，选中其中一个按钮，其他按钮即显示为未选中，以确保用户只提供一个答案。

最佳实践是在 label 元素上设置 for 属性，让其值与相关联的 input 单选按钮的 id 属性值相同。 这使得辅助技术能够在标签和相关的 input 元素之间建立关联关系。 例如：

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

注意：该单选框提示的文字应当写在label标签中，如上文的Indoor

5.创建一组复选框

复选框是 input 选择框的一种类型。

每一个复选框都应该嵌套在它自己的 label（标签）元素中。 这样，我们相当于给 input 元素和包裹它的 label 元素建立起了对应关系。

所有关联的复选框应该拥有相同的 name 属性。

使得 input 与 label 关联的最佳实践是在 label 元素上设置 for 属性，让其值与相关联的 input 复选框的 id 属性值相同。

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

6.使用单选框和复选框的value属性

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

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

即对于上文代码中，如果网页中的indoor选项被选中，表单数据会包含：
indoor-outdoor=indoor 【 也就是所选项的 name 和 value 属性值】

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

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

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

8.元素嵌套

div 元素也叫内容划分元素，是一个包裹其他元素的通用容器。可以将p li 等标签都嵌套在div标签中

9.声明HTML的文档类型

你可以通过 来告诉浏览器页面上使用的 HTML 版本，"…" 部分就是版本号。 对应的就是 HTML5。
! 和大写的 DOCTYPE 是很重要的，尤其是对那些老的浏览器。 但 html 无论大写小写都可以。

总结

多看多写，总会可以的