乐趣区

前端学习笔记一HTML入门

我从昨天开始学习前端技术。想要以博客的模式,记录一下本人的学习内容,并且把本人认为有用的局部记录下来,以便于本人当前查问,同时也心愿可能帮忙到其余学习者。

我的前端学习门路参考了知乎 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>

今天下午开始学习根底 CSS,心愿好运!

退出移动版