关于前端:HTML-笔记

28次阅读

共计 6591 个字符，预计需要花费 17 分钟才能阅读完成。

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

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

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

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

大多数 HTML 元素都有 一个开始标签 和一个完结标签，例如：

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

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

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

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

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

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

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

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

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

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

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

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

HTML 一共有六级题目，别离是：

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

p 代表 paragraph

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

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

<!-- 正文内容 -->

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

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

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

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

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

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

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

alt 属性有两个作用：

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

留神：

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

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

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

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

例如:

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

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

例如:

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

通过 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。

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

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

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

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 标签。

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

应用 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 标签的两头的人类可读的或者用于用户的。

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>

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

例如：

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

必填项

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

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

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 元素中的每个选项。

当选项的含意很明确时，如“性别抉择”，fieldset 与 legend 标签能够省略。这时，应用蕴含 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>

checkboxes（复选框）是 input 抉择框的一种类型。

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

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

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

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

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 属性值设置为一些有意义的内容。

默认值

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

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

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

table表格
tr表行
th表头
td表项
tbody主体
caption字幕
colspan合并列
rowspan 合并行

The table header
The table body	with two columns

应用 q 和blockquote示意援用内容

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

应用 code 示意代码块

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

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

<pre>something</pre>

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

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

<div>
  <p> something </p>
</div>

正文完

前端

发表至：前端

2022-09-18

0

关于前端:自动化构建

关于前端:由-Base64-展开的知识探讨

关于前端:世界杯火热进行中-用一个div画个足球场助助兴

关于前端:字符串方法

关于前端:macOS-App-自动化分发-App-Store-探索与实践

关于前端:HTML-笔记

HTML 和 HTML5

HTML 标签 Tag

文档类型 Document Type

文档构造 Document Structure

题目 Heading

段落 Pragraph

占位符 Placeholder

正文 Comment

构造元素

图片 Image

超链接 Anchor

列表 List

无序列表 Unordered List

有序列表 Ordered List

表单 Form

数据

标签 Label

输入框 Text Field

属性

类型

文本区 TextArea

选择器 Select

日期 Date

按钮 Button

单选框 Radio

复选框 Checkbox

表格 Table

援用 Quote

代码块 Code

文本格式 Pre

划分元素 Division Element

站内搜索