html 学习笔记（1）

HTML 是英文 Hyper Text Markup Language（超文本标记语言）的缩写。

 1.开始（主标题）                            

                      大部分 HTML 元素都有一个开始标记和一个结束标记。

                      开始标记像这样：<h1>

　　　　　　结束标记像这样：</h1>

　　　　　　开始标记和结束标记的唯一区别就是结束标记多了一个/。

2.副标题

　　　　h1元素通常被用作主标题，h2元素通常被用作副标题，还有h3、h4、h5、h6元素，它们分别用作不同级别的标题。

　　　　　例如:<h1>Hello world</h>

　　　　　　　<h2>How are you< h2>

3.段落

　　　　 p 通常被用来创建一个段落  

　　　　   例如：<p>I'm a bad people</p>

                 按照惯例，所有 HTML 标签都应该是小写字母，例如应使用 <p></p>，而不会使用 <P></P>。

4.用占位符文本填充空白

　　　　Web 开发者通常用lorem ipsum text来做占位符，占位符就是占着位置的一些文字，没有实际意义。(空格键不管有几个,都显示一个空格?)

5.注释

               在 HTML 中，注释的开始标记是<!--，结束标记是-->。

　　　　例如:<!-->哎!真累啊!-->

6.htm元素

　　　　HTML5 引入了很多更具描述性的 HTML 元素，例如：header、footer、nav、video、article、section等等。

　　　　这些元素让 HTML 更易读，同时有助于搜索引擎优化和无障碍访问。

　　　　main元素让搜索引擎和开发者瞬间就能找到网页的主要内容。

　　　　<main>.........</main>

7.img

　　　　你可以使用 img 元素来为你的网站添加图片，其中 src 属性指向图片的地址。

　　　　<img src="https://www.freecatphotoapp.com/your-image.jpg" alt="fuck you">
 　　　　 img元素没有结束标签

　　　　　　　　所有的 img 元素 必须 有 alt 属性。 alt 的属性值有两个作用，

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

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

　　　　　　　　理想情况下，alt 属性不应该包含特殊字符，除非有特殊需要。

8.href(跳转外部链接)

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

  　　　　  红色部分是a显示的文本   注意蓝色部分

9.href（跳转内部链接）

 

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

 

　　　　要创建内部链接，你需要将链接的 href 属性值设置为一个哈希符号 # 加上你想内部链接到的元素的 id，

　　　　通常是在网页下方的元素。 然后你需要将相同的 id 属性添加到你链接到的元素中。 id 是描述网页元素的一个属性，它的值在整个页面中唯一。

 

　　　　当用户点击了 Contacts 链接，页面就会跳转到网页的 Contacts 区域。

　　　　<a href="#contacts-header">Contacts</a>
　　　　<h2 id="contacts-header">Contacts</h2>
10.a嵌套在段落内 target 

锚点元素 <a>
target 是锚点元素的一个属性，它用来指定链接的打开方式。 属性值 _blank 表示链接会在新标签页打开。 
href 是锚点元素的另一个属性，它用来指定链接的 URL：
a 元素内的文本 link to www.freecodecamp.org 叫作锚文本，会显示为一个可以点击的链接：

<p>
  Here's a <a target="_blank" href="https://www.freecodecamp.org"> link to www.freecodecamp.org</a> for you to follow.
</p>
显示  Here's a link to www.freecodecamp.org for you to follow.

11.#做占位符

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

   当你使用 JavaScript 更改链接的指向时，这也很方便，

12.给图片添加链接

如果我们要把图片嵌套进 a 元素， 可以这样写：

<a href="#"><img src="https://www.bit.ly/fcc-running-cats" alt="Three kittens running towards the camera."></a>

如果把 a 的 href 属性值设置为 #，创建的是一个死链接（不跳转到其他画面）。
完成后，请你把鼠标光标悬停在你的图像上， 鼠标光标将变成点击光标。 于是图片就变成了链接。
13.创建一个无序列表
无序列表以 <ul> 开始，中间包含一个或多个 <li> 元素， 最后以 </ul> 结束。

<ul>                                      注意是l  (L)

   <li>a</li>                                                                                                                                                                

   <li>b</li>

   <li>c</li>                                 

  </ul>

14.创建有序列表

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

<ol>

      <li>z</li>

      <li>x</li>

      <li>c</li>

      </ol>       

有序列表和无序列表区别

• dsf                                           无序
• sad
• sd

1. sd                      jhk                  有序             
2. d                       dfg   

有序列表和无序列表都有前缀，但是有序列表是大写字母、小写字母、数字和罗马数字等，
而无序列表的前缀是实心圆、空心圆、实心正方形。 自定义列表与有序列表，无序列表的区别是它有缩进而没有前缀。
15.input输入框

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

你可以像这样创建一个文本输入框：

<input type="text">

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

16.给输入框添加占位文本

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

你可以像这样创建一个占位符：

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

注意： 别忘了 input 元素是 "自闭和标签"，即不需要结束标签。

有无占位符区别

17.创建一个表单

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

例如：

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

 18.给表单添加提交按钮

点击提交按钮时，表单中的数据将会被发送到 action 属性指定的 URL 上。

例如：

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

19.给表单添加必填项

如果你想把文本输入框设置为必填项，在 input 元素中加上 required 属性就可以了，例如：<input type="text" required>

20.创建一组单选按钮

radio buttons（单选按钮）就好比单项选择题，正确答案只有一个。

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

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

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

下面是一个单选按钮的例子：

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

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

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

我们也可以在 label 标签中嵌入 input 元素：

<label for="indoor"> 
  <input id="indoor" type="radio" name="indoor-outdoor">Indoor 
</label>
20.多选框

checkboxes（复选框）就好比多项选择题，正确答案有多个。

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

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

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

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

  <label for="1"><input type="checkbox" name="personality">a</label>

21.value

提交表单时，所选项的值会发送给服务端。 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>

这里有两个 radio 单选框。 当用户提交表单时，如果 indoor 选项被选中，表单数据会包含：indoor-outdoor=indoor。 也就是所选项的 name 和 value 属性值。

如果没有指明 value 属性值，则会使用默认值做为表单数据提交，也就是 on。 在这种情况下，如果用户选中 "indoor" 选项然后提交表单，表单数据则会包含 indoor-outdoor=on。

这样的表单数据看起来不够直观，因此最好将 value 属性值设置为一些有意义的内容。

22.默认选中项

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

在一个 input 元素里面添加 checked 这个词，即可实现。 例如:

<input type="radio" name="test-name" checked>
22.元素嵌套

div 元素也叫内容划分元素，是一个包裹其他元素的通用容器。

它也是 HTML 中出现频率最高的元素。

和其他普通元素一样，你可以用 <div> 来标记一个 div 元素的开始，用 </div> 来标记一个 div 元素的结束。

23.声明html类型

之前的挑战涵盖了一些 HTML 元素和它们的用法。 另外有些元素为页面提供了整体结构，每个 HTML 文档中都应该有这些元素。

在文档的顶部，我们需要告诉浏览器网页所使用的 HTML 的版本。 HTML 是一个在不停发展的语言，大部分浏览器都支持 HTML 的最新标准，也就是 HTML5。

大部分主流浏览器都支持最新的 HTML5 规范。 但是一些陈旧的网页可能使用的是老版本的 HTML。

你可以通过 <!DOCTYPE ...> 来告诉浏览器页面上使用的 HTML 版本，"..." 部分就是版本号。 <!DOCTYPE html> 对应的就是 HTML5。

! 和大写的 DOCTYPE 是很重要的，尤其是对那些老的浏览器。 但 html 无论大写小写都可以。

所有的 HTML 代码都必须位于 html 标签（<html> </html>）中。 其中 <html> 位于 <!DOCTYPE html> 之后，</html> 位于网页的结尾。

<!DOCTYPE html>

<html>

</html>

24.head和body

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

比如 link、meta、title 和 style 都应放入 head 标签。

这是网页布局的一个例子：

<!DOCTYPE html>

<html>
  <head>
    <meta />
  </head>
  <body>
    <div>
    </div>
  </body>
</html>