前端学习笔记（一）HTML入门

最新推荐文章于 2024-09-12 18:02:32 发布

handsomeDXhero

最新推荐文章于 2024-09-12 18:02:32 发布

阅读量155

点赞数 1

分类专栏：前端学习文章标签： html html5

本文链接：https://blog.csdn.net/weixin_41972947/article/details/107121161

版权

前端学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

我从昨天开始学习前端技术。想要以博客的形式，记录一下自己的学习内容，并且把自己认为有用的部分记录下来，以便于自己以后查询，同时也希望能够帮助到其他学习者。

我的前端学习路径参考了知乎Web 前端怎样入门？
问题下汪小黑的回答。学习资料目前主要使用w3school。按照汪小黑的学习路径，我目前花费一天半时间学习了w3school上面的HTML教程，包括“HTML基础教程”的“HTML教程”到“HTML列表”部分，以及“HTML表单”部分。其中大部分代码示例，我都照着打了一遍，以加深记忆和使用理解。

编辑器方面，我根据知乎上面的测评，选择了bracket。因为这款编辑器开源免费，并且有实时预览功能（虽然有些HTML表单内容似乎并不能实时预览），调试起来方便直观。而且可以在HTML中间编辑CSS。下图是实时预览界面，非常方便。在这里插入图片描述
下文主要是我在HTML入门学习中的一些简单理解和记忆点。更多完整的示例代码在w3school上全部搜索得到，所以只贴了一点点。部分标签会影响到markdown格式编写的博客的格式，所以我加了空格，例如< a/ >。

1.HTML（超文本标记语言）不是编程语言，而是标记语言，用标记标签来描述网页。HTML文档就是网页，包括HTML标签和纯文本。

2.HTML标题通过< h1 >-< h6 >标签定义。
HTML段落通过< p >标签定义。
HTML链接通过< a >标签定义。在href中指定链接的地址。URL意为同一资源定位符，即网络地址。
HTML图像通过< img >标签定义。图像的名称和尺寸以属性形式提供。

3.HTML文档由HTML元素定义。大多数HTML元素可拥有属性。
大多数HTML元素可以嵌套。（元素的内容可以是元素）
没有内容的HTML元素是空元素，< br />是关闭空元素的正确方法。

4.HTML标签有属性，在start tag中规定。
例：链接的地址在href属性中指定。
align for h1, bgcolor for body, border for table.（前两者其实现在都被style取代了，慎用）。
Style属性用于改变HTML元素的样式。
属性值在双引号内，如果属性值中有双引号，则用单引号。
适用于大多数元素的属性：class，id，style，title

5.HTML标题：只用于标题，不能用于粗体or大字！！
搜索引擎使用标题为网页的结构和内容编制索引。

6.< hr />用于创建水平线。
< !-- This is a comment -->为注释，可以用条件注释，定义只有Internet Explorer执行的HTML标签。
用< br / >插入空行，不要< p >< p/ >
< br / >可以不产生新段落换行。
不要省略结束标签，可能导致错误。
显示页面时，浏览器会移除源代码中多余的空格和空行。（看起来一般只保留一个空格，回车也视作一个空格）

前几部分的示例代码如下：

<html>
<body style = "background-color: powderblue">
    
<h1 style = "background-color: yellow">This is a heading</h1>
<h2 style = "text-align: center">This is a heading</h2>
<h3>This is a heading</h3>

<a href="#tips">跳到Tips</a>
    
<p>This is a paragraph.<p/>
<hr />
<p>This is another paragraph.</p>
    
<p>This is <br /> another paragraph.</p>

<p>This is        another
paragraph.</p>
    
<a href = "http://www.w3school.com.cn" target="_blank">This is a link</a>
<br />
<br />
<img src = "w3school.jpg" width = "104" height = "142" alt="w3school"/>
    
<!-- This is a comment-->

<br />

<a name="tips">Tips:</a>
    
<p style = "font-family: verdana; color: red">
This text is in Verdana and red</p>
    
<p style = "font-family: times; color: green">
This text is in Times and green</p>
    
<p style = "font-size: 30px">
This text is 30 pixels high</p>
    
</body>
</html>

7.文本格式化：HTML可定义很多供文本格式化输出的元素，包括粗体、大字、小字、斜体、删除线、下划线、长引用、短引用、缩写、文字方向，等等。示例代码如下：

<html>
<body>

<b>This text is bold</b>
<br />

<strong>This text is strong</strong>
<br />

<big>This text is big</big>
<br />

<em>This text is emphasized</em>
<br />

<small>This text is small</small>
<br />

This text contains
<sub>subscript</sub>
<br />

This text contains
<sup>superscript</sup>
    
</body>
</html>

8.< dfn >元素使用比较复杂，建议直接当做< abbr >用，或者只用< abbr >

9.可以通过< head >部分的样式信息（或在其中用< link >标签链接到外部样式表）来对HTML进行格式化。
1）当样式要被应用到很多界面时，使用外部样式表。这样可以通过更改一个文件来更改整个网页的外观。
2）当单个文件需要特别样式时，使用内部样式表。可以在head部分通过< style >标签定义内部样式表。
3）当特殊样式要应用到个别元素时，使用内联样式。使用方法是在相关的标签中使用样式属性。样式属性可以包含任何CSS属性。
示例代码如下：

<html>

<head>
<style type = "text/css">
    h1{color:red}
    p {color:blue}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
</head>
    
<body>
<h1>header 1</h1>
<p>paragraph</p>
<a href="http://www.w3school.com.cn" style="text-decoration: none">这是一个链接</a>
<p style="color: red; margin-left: 20px">This is a paragraph</p>
</body>
 
</html>

10.超文本的基本特征就是可以超链接文档。
超链接标准叫法叫锚（anchor）。可以通过它跳到同文档中的某个主题，或是跳到其他文档。
使用< a >的两种方式：
1） href属性：指向另一个文档的链接
2） name属性：创建文档内的书签（然后可以通过href=#namexxx来指向该锚）
如果使用target属性，可以设定被打开的链接在哪里显示。例如，把target设为“_blank”，则该链接会在新窗口中打开。

11.图像标签< img >是空标签，只包含属性，并且没有闭合标签。必须使用源属性（src）才能显示图像。源属性的值是图像的URL地址。
图像标签可用alt属性来定义一串预备的可替换文本。图片无法显示时，会显示这串文本。
HTML页面可以添加背景图片。
可以排列图像位置（默认为bottom）。可以将图片浮动至段落的左边/右边。
可以使用< map >和< area >定义图像地图和其中的可点击区域。

12.表格中的每个单元格里面可以嵌套其他元素（元素内显示元素）包括表格、列表、段落等等。示例代码如下：

<html>
<body>
    
<h4>表头：</h4>
<table border="1" frame="vsides">
<caption>标题</caption>
<tr>
    <th>姓名</th>
    <th>电话</th>
    <th>电话</th>
</tr>
<tr>
    <td>Bill Gates</td>
    <td>123 123</td>
    <td>123 123</td>
</tr>
</table>

<h4>垂直表头：</h4>
<table border = "2">
<tr>
    <th>姓名</th>
    <td>Bill Gates</td>
</tr>
<tr>
    <th>电话</th>
    <td>123 123</td>
</tr>
<tr>
    <th>电话</th>
    <td>123 123</td>
</tr>
</table>

<br />
    
<table border="1" cellspacing="10">
<tr>
    <th>姓名</th>
    <th colspan="2">电话</th>
</tr>
<tr>
    <td>Bill Gates</td>
    <td>123 123</td>
    <td>123 123</td>
</tr>
</table>
    
<br />
    
<table border = "2" cellpadding="10">
<tr>
    <th>姓名</th>
    <td>Bill Gates</td>
</tr>
<tr>
    <th rowspan="2">电话</th>
    <td>123 123</td>
</tr>
<tr>
    <td>123 123</td>
</tr>
</table>

</body>
</html>

13.列表包括有序（< ol >）和无序（< ul >）。列表中可嵌套列表。示例代码如下：

<html>
<body>

<ol start="10">
    <li>Coffee</li>
    <li>Milk</li>
    <li>Tea</li>
</ol>

<ul type="circle">
    <li>Coffee</li>
    <li>Milk</li>
    <li>Tea</li>
</ul>    
    
<dl>
    <dt>计算机</dt>
    <dd>用来计算的机器</dd>
    <dt>显示器</dt>
    <dd>以视觉方式显示信息的装置</dd>
</dl>

</body>
</html>

14.HTML表单用于收集用户输入。
< input >元素有很多形态，根据不同的type属性。常用的包括text，radio，date，number，submit等。
Chrome、Firefox 或 Internet Explorer 不支持 type=“datetime”，不支持输入类型时，输入类型会显示为text。
url和email类型与普通文本的区别：支持这些功能的浏览器会自动对电子邮件地址/url字段进行自动验证。
Search类型与普通文本类似。Tel类型只有Safari8支持。

15.Action属性定义在提交表单（通常是使用submit按钮）时执行的动作。通常，表单会被提交到web服务器上的网页。GET为默认处理方法，适合少量数据的提交，没有敏感信息。POST适用于表单正在更新数据或包含敏感信息（如密码）。POST的安全性更好，因为在页面地址栏中被提交的数据是不可见的。
如果想要正确地被提及，则每个输入字段必须设置一个name。
< fieldset >用于组合表单中的相关数据，< lenged >用于为< fieldset >元素定义标题。

16.表单input的属性
1） Value：输入字段的初始值。
2） Readonly：只能读不能改。readonly不需要值，它等同于readonly=“readonly”。
3） Disabled：禁用该输入字段。被禁用的元素不可用，不可点击，不会被提交。也不需要值，同上。
4） Size：输入字段的尺寸。
5） Maxlength：输入字段允许的最大长度。
6） Autocomplete：表单和单独的输入字段都可以选择是否开启/关闭自动补全功能。当开启时，浏览器会基于用户之前的输入值自动填写值。
7） Novalidate：< form >的属性，设置了的话则提交表单时不对表单数据进行验证。
Formovalidate则是用于单个input的属性，设置了的话则提交表单时不对该input数据进行验证
8） Target：form的属性，指示提交表单后在何处显示接收到的响应。
Formtarget则是单个input的该属性。
9） Autofocus：自动获得输入焦点。其实意思是运行网页时，光标初始会直接落在这个地方。
10） Form：在form有id的情况下，< input >元素的form决定了它属于哪个表单。这样，输入字段即使外观上在某个表单之外，输入内容却仍可以属于该表单。
11） Formaction：只适用于type为submit或者image。它的值应为当提交表单时处理该输入的文件的url。
12） Formenctype：规定当提交表单数据时如何对其编码（仅针对method=“post”的表单
13） Formmethod：只适用于type为submit或者image。和form的method属性本质一样，当有多个submit时，可用于规定某单个submit的提交方法。
14） Height和width：image input的尺寸。（一定要规定，否则页面会在图像加载时闪烁）
15） List：引用的datalist中包含了input list元素的预定义选项。
16） Min和max：输入的最大值和最小值。适用于number、range、date、datetime、datetime-local、month、time 以及 week。
17） Multiple：如果设置了该属性，则允许输入超过一个input元素。（只适用于email和file）
18） Pattern：用于检测input元素值的正则表达式。
19） Placeholder：在输入前的显示的提示。（最常见的，“请输入搜索内容”这种。）适用于以下输入类型：text、search、url、tel、email 以及 password。
20） Required：必须填写输入字段才能提交表单。适用于以下输入类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.
21） Step：input数字的间隔。适用于number、range、date、datetime、datetime-local、month、time 以及 week。
Date – 缺省是1天
Week – 缺省是1周
Month – 缺省是1月
Time – 缺省是1分钟
DateTime – 缺省是1分钟
DateTime –local– 缺省是1分钟

表单示例代码如下：

<html>
<body>
<form action = "action_page.php" method = "post">
    
    <fieldset>
    <legend>Personal Information</legend>
    
    First name:
    <br />
    <input type = "text" name = "firstname", value = "Mickey" autofocus>
    <br />
    Last name:
    <br />
    <input type = "text" name = "lastname", value = "Mouse">
    <br />
    
    <input type = "radio" name = "sex" value = "male" checked>Male
    <br />
    <input type = "radio" name = "sex" value = "female">Female
    <br />
        
    <select name = "cars">
    <option value = "volvo">Volvo</option>
    <option value = "saab">Saab</option>
    </select>
    <br />
        
    <textarea name = "message" rows = "10" cols = "60">The cat was playing in the garden.
    </textarea>
    <br />
        
    <button type = "button" onclick = "alert('Hello World')">Click Me!</button>
    <br />
    
    <input list = "browsers">
    <datalist id = "browsers">
        <option value = "IE">
        <option value = "Chrome">
    </datalist>
    <br />
        
    Quantity (between 1 and 5):
    <input type = "number" name = "quantity" min = "1" max = "5">
    <br />
        
    Birthday:
    <input type = "date" name = "bday" step = "2">
    <br />
        
    Favorite color:
    <input type = "color" name = "favcolor">
    <br />
        
    <input type = "range" name = "points" min = "0" max = "20">
    <br />
        
    Time:
    <input type = "datetime-local" name = "usr_time">
    <br />
        
    E-mail:
    <input type = "email" name = "email">
    <br />
        
        
    <br />
    <input type = "submit" value = "Submit">
        
    </fieldset>
</form>
        
</body>
</html>