这篇博客是HTML入门手册，详细介绍了HTML的基础语法，包括基本结构、meta标签、段落、链接、图片、表格、按钮、列表、基础属性、样式属性等。重点讲解了如何创建链接、设置图片属性、创建表格以及使用CSS样式。同时，提到了HTML表单的定义、属性以及各种输入类型的用法。
HTML
注：参考慕课网和w3cschool(https://www.w3schools.com/html/default.asp)
GitHub：https://github.com/JinluZhang1126/Front-end-Web-Development-Tutorial
文章目录
HTML基础语法
基本结构
meta
specify which character set is used, page description, keywords, author, and other metadata.Metadata is used by browsers (how to display content), by search engines (keywords), and other web services.
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
Note:一般内容的乱码出现在中文等非英文内容中，解决方式就是在head中声明meta属性设定编码方式，比如：
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
基础元素
HTML段落
<p></p>标签代表的是段落， 生成空格， <br/>是转行符， <hr/>是分割线
<P align="left">HTML 指的是超文本标记语言 (Hyper Text Markup Language),HTML 不是一种编程语言，而是一种标记语言 (markup language),标记语言是一套标记标签 (markup tag),HTML 指的是超文本标记语言 (Hyper Text Markup Language),HTML 是一种编程语言，而是一种标记语言 (markup language),标记语言是一套标记标签 (markup tag),</P>
<hr></hr>
<pre></pre>标签中可以保留文本的转行，空格：
<pre> HTML 指的是超文本标记语言 (Hyper Text Markup Language),
HTML 不是一种编程语言，而是一种标记语言 (markup language),
标记语言是一套标记标签 (markup tag),</pre>
HTML链接⭐️
- Use the <a> element to define a link
- Use the href attribute to define the link address
- Use the target attribute to define where to open the linked document
- Use the <img> element (inside <a>) to use an image as a link
HTML链接使用<a>标记定义：
<a href="https://www.w3schools.com">This is a link</a>
链接的目的地在href属性中指定。
属性用于提供有关HTML元素的其他信息。
您将在下一章中了解有关属性的更多信息。
鼠标悬浮显示标题 tittle
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>
目标属性 target
_blank -在新窗口或标签中打开链接的文档
_self -在与单击相同的窗口/选项卡中打开链接的文档（默认设置）
_parent -在父框架中打开链接的文档
_top -在整个窗口中打开链接的文档
框架名称 -在命名框架中打开链接的文档
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
打开图片
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
通过CSS设置style
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
</style>
HTML Block
| Tag | Description |
|---|---|
| <div> | Defines a section in a document (block-level) |
| <span> | Defines a section in a document (inline) |
HTML图片🔴
HTML图像使用<img>标签定义。
源文件（src），替代文本（alt） width，和height作为属性提供：
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
注意：The alt attribute is required. A web page will not validate correctly without it.
点击图片跳转链接
<a href="http://www.php.cn"><img src="/test/img/2.png"> </a>
Image Maps
点击指定区域，跳转到新的连接
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>
背景图片
指定div块里设置背景图片，也可以在<body>中设置背景
<div style="background-image: url('img_girl.jpg');">
To avoid the background image from repeating itself, use the background-repeat property.
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
覆盖
完全覆盖，但是会损失一部分图片内容，也就是把图片直接放大到整个屏幕，不改变长宽比,Also, to make sure the entire element is always covered, set the background-attachment property to fixed:
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
拉伸
If you want the background image stretch to fit the entire image in the element, you can set the background-size property to 100% 100%:Try resizing the browser window, and you will see that the image will stretch and maybe change original proportions, but always cover the entire element.
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
<picture> Element
The element contains a number of elements, each referring to different image sources. This way the browser can choose the image that best fits the current view and/or device.
Each <picture> element have attributes describing when their image is the most suitable.判断根据是media属性
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>
特点：
- Bandwidth
If you have a small screen or device, it is not necessary to load a large image file. The browser will use the first `` element with matching attribute values, and ignore any of the following elements.
- Format Support
Some browsers or devices may not support all image formats. By using the `` element, you can add images of all formats, and the browser will use the first format it recognizes and ignore any of the following.
HTML 表格🔺
定义,Border
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse; <!-- 把两个table的border合到一起-->
}
</style>
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Firstname</th><!-- 单元格标题-->
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
| Firstname | Lastname | Age |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
padding
Cell padding specifies the space between the cell content and its borders.
th, td {
padding: 15px;
}
Border Spacing
table {
border-spacing: 15px;
}
效果：
Note: 必须要先指定border，并且border-collapse没有生效
分割 Span Many Columns/Rows
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
| Name | Telephone | |
|---|---|---|
| Bill Gates | 55577854 | 55577855 |
| Name: | Bill Gates |
|---|---|
| Telephone: | 55577854 |
| 55577855 |
HTML按钮
HTML按钮使用<button>标记定义：
<button>Click me</button>
HTML列表⭐️
定义
HTML列表是用（无序/项目符号列表）或（有序/编号列表）标签定义的，其后是<ul>标签（列表项）：
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
The CSS list-style-type property is used to define the style of the list item marker:
| Value | Description |
|---|---|
| disc | Sets the list item marker to a bullet (default) |
| circle | Sets the list item marker to a circle |
| square | Sets the list item marker to a square |
| none | The list items will not be marked |
有序列表Ordered HTML List
The type attribute of the ol tag, defines the type of the list item marker:
| Type | Description |
|---|---|
| type=“1” | The list items will be numbered with numbers (default) |
| type=“A” | The list items will be numbered with uppercase letters |
| type=“a” | The list items will be numbered with lowercase letters |
| type=“I” | The list items will be numbered with uppercase roman numbers |
| type=“i” | The list items will be numbered with lowercase roman numbers |
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
基础属性
- 所有HTML元素都可以具有属性
- 属性提供有关元素的其他信息
- 属性始终在开始标记中指定
- 属性通常以名称/值对的形式出现，例如：name =“ value”
href属性
HTML链接是使用<a>标记定义的。链接地址在href属性中指定：
src属性
HTML图像使用``标签定义。
图像源的文件名在src属性中指定：
宽度和高度属性
HTML图像还具有width和height属性，用于指定图像的宽度和高度：
<img src="img_girl.jpg" width="500" height="600">
alt属性
alt如果无法显示图像，则该属性指定要使用的替代文本。
alt屏幕阅读器可以读取该属性的值。这样，“听”网页的某人（例如视力障碍者）可以“听到”该元素。
HTML样式属性
- 使用该
style属性来样式化HTML元素- 使用
background-color的背景颜色- 使用
color的文字颜色- 使用
font-family的文字字体- 使用
font-size文本大小- 使用
text-align文本对齐
可以使用style属性设置HTML元素的样式。
HTML style属性具有以下语法：
<*tagname* style="*property*:*value;*">
该***属性***是CSS属性。该***值为*** CSS值。
背景颜色 background-color
CSS background-color属性定义HTML元素的背景色。
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
文字颜色 color
CSS color属性定义HTML元素的文本颜色：
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
字型font-family
CSS font-family属性定义用于HTML元素的字体：
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
文字对齐text-align
CSS text-align属性定义HTML元素的水平文本对齐方式：
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
文本格式
<b> - 加粗字体
<strong> -重要文字
<i> -斜体文字
<em> -强调文字
<mark> -标记文字
<small> -小文字
<del> -删除的文字
<ins> -插入文字
<sub> -下标文字
<sup> -上标文字
举例i:
<p>This is <sup>superscripted</sup> text.</p>
This is superscripted text.
引文格式
短引用<q>
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
WWF's goal is to: Build a future where people live in harmony with nature.
长引用<blockquote>
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>
Here is a quote from WWF's website:
For 50 years, WWF has been protecting the future of nature.The world's leading conservation organization,WWF works in 100 countries and is supported by1.2 million members in the United States andclose to 5 million globally.
缩写 <abbr>
鼠标放上去会显示全名
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
The WHO was founded in 1948.
联系信息 <address>
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
Visit us at:
Example.com
Box 564, Disneyland
USA
倒写 <bdo>
<bdo dir="rtl">我会从右往左显示</bdo>
我会从右往左显示
HTML Form 🔴
定义
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
Last name:
If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".
属性
action：
指定提交对象
method：
post/get
input类型
| Type | Description |
|---|---|
| <input type=“text”> | Defines a one-line text input field |
| <input type=“radio”> | Defines a radio button (for selecting one of many choices) |
| <input type=“submit”> | Defines a submit button (for submitting the form) |
more:
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
input属性
| Type | Describe |
|---|---|
| value | 指定input值 |
| disabled | 禁用，不上传此项内容 |
| size | 规定input尺寸 |
| maxlength | 输入字符个数 |
| autocomplete | on/off,决定是否自动补全适用于input type: text, search, url, tel, email, password, datepickers, range, and color. |
| HTML5 attributes: | |
| autocomplete | 在form中使用， 适用的input types: text, search, url, tel, email, password, datepickers, range, and color |
| novalidate | 在form中使用。form提交时不验证，用法类似readonly，标签内直接写上即可 |
| autofocus | input使用，自动聚焦 |
| form | 用于input，指定form id，可以指定一或多个，提交时不在form标签内也会提交该input |
| formaction | 用于input type="submit" and type="image"，override form的action，可以指向另一个文件或者地址 |
| formenctype | 适用于input，The formenctype attribute specifies how the form data should be encoded when submitted (only for forms with method="post"). The formenctype attribute overrides the enctype attribute of the form element. The formenctype attribute is used with type="submit" and type="image". overide form的action属性 |
| min/max | 指定input的最大最小值 |
| multiple | 允许input输入多个值，适用于email/file. |
| pattern | 用于input，指定输入模式如：`pattern="[A-Za-z]{3}"` |
| placeholder | 保留值，和value不同，这个focus时就会随着输入消失， 提交时也不会作为value提交 |
| step | 指定合法数字间隔，适用于input types: number, range, date, datetime-local, month, time and week Tip: The step attribute can be used together with the max and min attributes to create a range of legal values.. |
Note: Input restrictions are not foolproof, and JavaScript provides many ways to add illegal input. To safely restrict input, it must be checked by the receiver (the server) as well!
input’s HTML5 attributes
HTML5 added the following attributes for <input>:
下拉框 <select>
<select name="cars" size="3"> size设置显示个数
<option value="volvo">Volvo</option>
<option value="saab" selected>Saab</option> selected表示默认被选中
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<datalist>
与select不同之处在于可以手动输入也可以选择
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
文本框 <textarea>
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
<output>
result of a calculation
<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
扫一扫
9575
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
