乐趣区

关于前端:HTML-笔记

HTML 和 HTML5

HTML 或 Hyper Text Markup Lanuage(超文本标记语言)是一种标记语言,应用特定的标签和元素来示意网页的构造。

超文本指的是一种蕴含链接到其余文本的文本。标记指的是用在文档中的标签和元素。

HTML 文件通常以 .html 后缀为扩展名。网站的主页通常命名为 index.html

HTML 的规范由 W3C(World Wide Web Consortium)组织制订。以后的版本为 HTML5。

HTML 标签 Tag

大多数 HTML 元素都有 一个开始标签 一个完结标签,例如:

<h1> 响应式网页设计笔记 </h1>

开始标签和完结标签都以尖括号(angle brackets)作为开始和完结。完结标签和开始标签惟一的 区别 就是多了一个 斜杠

有些元素是自闭合元素(self-closing element),其没有完结标签。这类元素通常应用 <br><br /> 示意。


文档类型 Document Type

在文档的顶部,须要申明 HTML 的版本。

通过 <!DOCTYPE ...> 来申明 HTML 的版本,”...” 局部是版本号。<!DOCTYPE html> 对应 HTML5。

! 和大写的 DOCTYPE 很重要,尤其是针对旧版本的浏览器。但 html 无论大写小写都能够。

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

这是一个网页构造的例子:

<!DOCTYPE html>
<html>
    <!-- Your code -->
</html>

文档构造 Document Structure

html 的构造次要分为两大部分:headbody。网页的形容放入 head 标签,网页的内容则应放入 body 标签。

比方 linkmetatitlestyle 都应放入 head 标签。

<!DOCTYPE html>
<html>
  <head>
    <meta />
    <style>
    </style>
  </head>
  
  <body>
    <div>
    </div>
  </body>
</html>

题目 Heading

HTML 一共有六级题目,别离是:

<h1> 一级题目 </h1>、<h2> 二级题目 </h2>、<h3> 三级题目 </h3>
<h4> 四级题目 </h4>、<h5> 五级题目 </h5>、<h6> 六级题目 </h6>

段落 Pragraph

p 代表 paragraph

<p> 这是一个段落 </p>

占位符 Placeholder

Web 开发者通常用 lorem ipsum text 来做占位符。lorem ipsum text 是从古罗马西塞罗的一段驰名经文中随机抽取的。


正文 Comment

<!-- 正文内容 -->

正文的作用是:阐明代码性能以及在不删除代码的状况下使其生效。


构造元素

HTML5 引入了很多更具描述性的 HTML 元素,包含

<main> 主体 </main>、<header> 页眉 </header>、<footer> 页脚 </footer>、<nav> 导航栏 </nav>、<video> 视频 </video>、<article> 文章 </article>、<section> 局部 </section>

这些元素让 HTML 更易读,同时有助于搜索引擎优化(SEO)和无障碍拜访(Accessibility)。

main 元素使搜索引擎和开发者能很快地找到网页的次要内容。


图片 Image

<img src="" alt=" "width="" height="" />

src 指向图片的地址,所有 img 元素必须有 alt 属性

alt 属性有两个作用:

  • 让屏幕阅读器能够通晓图片的内容,这会对网页的可拜访性有很大晋升;
  • 当图片无奈加载时,页面须要显示的代替文本。

留神:

  • img 元素是没有完结标签的。
  • 现实状况下,alt 属性不应该蕴含特殊字符,除非有非凡须要。
  • 所有 HMTL 标签都应该是小写字母。
  • 如果图片是纯装饰性的,把 alt 的属性值设置为空。

超链接 Anchor

a 来实现网页间的跳转。

例如:

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

a 元素也能够用于创立外部链接,跳转到网页内的各个不同局部。

要创立外部链接,须要将链接的 href 属性值设置为一个哈希符号 # 加上想外部链接到的元素的 id,通常是在网页下方的元素。而后你须要将雷同的 id 属性增加到链接到的元素中。id 是形容网页元素的一个属性,它的值在整个页面中惟一。例如:

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

能够在其余文本元素内嵌套链接,也能够在链接内嵌套元素。

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

target 是超链接元素的一个属性,它用来指定链接的打开方式。属性值 _blank 示意链接会在新标签页关上。href 是锚点元素的另一个属性,它用来指定链接的 URL。

如果把 ahref 属性值设置为 #,创立的是一个死链接(不跳转到其余页面)


列表 List

无序列表 Unordered List

无序列表 <ul> 开始,两头蕴含一个或多个 <li> 元素,最初以 </ul> 完结。

例如:

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

有序列表 Ordered List

有序列表 <ol> 开始,两头蕴含一个或多个 <li> 元素。最初以 </ol> 完结。

例如:

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

表单 Form

通过 HTML 来实现发送数据给服务器的表单,只须要给 form 元素增加 action 属性即可。如果不指定 action,提交的申请会发送给以后网页。

例如:

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

数据

当表单提交后,浏览器会发出请求,客户端或服务器脚本会响应该申请并解决数据。

默认状况下,表单数据是作为 GET 申请被发送的,为 URL 含有的已提交数据。

举个例子:如果发送申请到:https://example.com/animals,提交数据为:frog,则 URL:

https://example.com/animals?animal=frog

所以能够从前端或者后端从 URL 获得数据。

当然也能够应用 POST 办法,改变申请属性:

<form method="post">
  ...
</form>

如果应用了 POST,数据被贮存在申请体(request of body)。此时数据不会在 URL 中显示,只能通过前后端脚本获得数据。

通常来说,如果是登录注册表单,信息敏感型表单,须要应用 POST 办法;如果数据是可分享的,搜寻型表单,能够应用 GET 办法,此时浏览器历史会记录该 URL。

标签 Label

应用标签形容表单组件的内容,比应用纯 HTML 文本更具备可拜访性。

<label for="color"> 最喜爱的色彩 </label>
<input type="text" id="color" name="color">

标签的 for 属性匹配输入框的 id 属性。

输入框 Text Field

input 输入框能够取得用户的输出。

创立一个文本输入框:

<input type="text" id="color" name="color">

留神 input 输入框是没有完结标签的。

属性

id

输入框的 id 属性连贯输入框和标签。

name

输入框的 name 属性批示了用户输出的数据。例如:

name=”mountain”,用户输出:”Gutenberg”,那么申请中会蕴含:mountain=Gutenberg

占位符

用户在 input 输入框中输出任何内容前的预约义文本。

创立一个占位符:

<input type="text" placeholder="这是一段占位符">

类型

  • button
  • checkbox
  • color
  • date
  • file
  • email
  • hidden
  • number
  • password
  • radio
  • range
  • search
  • submit
  • text
  • time
  • url

文本区 TextArea

多行文本应用 textarea 标签。

<label for="comment">Comment</label>
<textare id="comment" name="comment"></textare>

选择器 Select

应用 select 标签。

<label for="color">Color</label>
<select id="color" name="color">
  <option value="orange">Orange</option>
  <option value="pink">Pink</option>
</select>

首先把 label 的 for 和 select 的 id 分割,而后退出独有的 name 属性值。

在 select 中退出多个 option,每个代表一个选项。每个 option 都有一个独特的 value 属性,能够辨别不同的选项。value 属性是用于解决数据的,而 option 标签的两头的人类可读的或者用于用户的。

日期 Date

HTML5 标准增加了 date 类型来创立日期选择器。如果浏览器反对,在点击 input 标签时,会弹出日期选择器。

<label for="input1">Enter a date:</label>
<input type="date" id="input1" name="input1">

HTML5 还引入了 time 标签与 datetime 属性来标准化工夫。time 元素是一个行内元素,用于在一个页面上显示日期或工夫。datetime 属性蕴含的无效格局。辅助设施能够获取这个值。这个属性也有助于防止凌乱,因为它规定了工夫的标准化版本,甚至能够在文本中以非正式的形式或学术形式应用它。

<p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p>

按钮 Button

给表单增加一个 submit(提交)按钮。点击提交按钮时,表单中的数据将会被发送到 action 属性指定的 URL 上。

例如:

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

必填项

能够指定某些字段为必填项(required),只有当用户填写了该字段后,才能够提交表单。

input 元素中加上 required 属性就能够了,例如:<input type="text" required>

单选框 Radio

radio buttons(单选按钮)是 input 抉择框的一种类型。

每一个单选按钮都应该嵌套在它本人的 label(标签)元素中。相当于给 input 元素和包裹它的 label 元素建设起了对应关系。

所有关联的单选按钮应该领有雷同的 name 属性。创立一组单选按钮,选中其中一个按钮,其余按钮即显示为未选中,以确保用户只提供一个答案。

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

最佳实际是在 label 元素上设置 for 属性,让其值与相关联的 input 单选按钮的 id 属性值雷同。这使得辅助技术可能在标签和相干的 input 元素之间建设关联关系。

也能够在 label 标签中嵌入 input 元素:

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

fieldset 标签包裹整组单选按钮,实现这个性能。它常常应用 legend 标签来提供分组的形容,以便屏幕阅读器用户会浏览 fieldset 元素中的每个选项。

当选项的含意很明确时,如“性别抉择”,fieldsetlegend 标签能够省略。这时,应用蕴含 for 属性的 label 标签就足够了。

<form>
  <fieldset>
    <legend>Choose one of these three items:</legend>
    <input id="one" type="radio" name="items" value="one">
    <label for="one">Choice One</label><br>
    <input id="two" type="radio" name="items" value="two">
    <label for="two">Choice Two</label><br>
    <input id="three" type="radio" name="items" value="three">
    <label for="three">Choice Three</label>
  </fieldset>
</form>

复选框 Checkbox

checkboxes(复选框)是 input 抉择框的一种类型。

每一个复选框都应该嵌套在它本人的 label(标签)元素中。这样,相当于给 input 元素和包裹它的 label 元素建设起了对应关系。

所有关联的复选框应该领有雷同的 name 属性。

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

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

value 属性

提交表单时,被选中项的值会发送给服务端。radiocheckboxvalue 属性值决定了发送到服务端的理论内容。

<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。也就是所选项的 namevalue 属性值。

如果没有指明 value 属性值,则会应用默认值做为表单数据提交,也就是 on。在这种状况下,如果用户选中 “indoor” 选项而后提交表单,表单数据则会蕴含 indoor-outdoor=on。这样的表单数据看起来不够直观,因而最好将 value 属性值设置为一些有意义的内容。

默认值

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

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

表格 Table

表格把数据组织为行和列的模式。

  • table表格
  • tr表行
  • th表头
  • td表项
  • tbody主体
  • caption字幕
  • colspan合并列
  • rowspan 合并行
The table header
The table body with two columns

援用 Quote

应用 qblockquote示意援用内容

<q>quote</q>
<blockquote>
    quote
</blockquote>

代码块 Code

应用 code 示意代码块

<code>console.log();</code>

文本格式 Pre

应用 pre 使得 HTML 按预约文本显示

<pre>something</pre>


划分元素 Division Element

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

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

<div>
  <p> something </p>
</div>
退出移动版