【前端】HTML Manual-HTML入门手册

这篇博客是HTML入门手册,详细介绍了HTML的基础语法,包括基本结构、meta标签、段落、链接、图片、表格、按钮、列表、基础属性、样式属性等。重点讲解了如何创建链接、设置图片属性、创建表格以及使用CSS样式。同时,提到了HTML表单的定义、属性以及各种输入类型的用法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

HTML

注:参考慕课网和w3cschool(https://www.w3schools.com/html/default.asp)

GitHub:https://github.com/JinluZhang1126/Front-end-Web-Development-Tutorial

HTML基础语法

基本结构
image-20191201152905326 image-20191201161331750
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>标签代表的是段落, &nbsp; 生成空格, <br/>是转行符, <hr/>是分割线

<P align="left">HTML&nbsp;指的是超文本标记语言 (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

TagDescription
<div>Defines a section in a document (block-level)
<span>Defines a section in a document (inline)

HTML图片🔴

HTML图像使用<img>标签定义。

源文件(src),替代文本(altwidth,和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>

特点:

  1. 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.

  1. 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>
Monthly savings
FirstnameLastnameAge
JillSmith50
EveJackson94

padding

Cell padding specifies the space between the cell content and its borders.

th, td {
  padding: 15px;
}

Border Spacing

table {
  border-spacing: 15px;
}

效果:

image-20191202154734260

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>
NameTelephone
Bill Gates5557785455577855
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:

ValueDescription
discSets the list item marker to a bullet (default)
circleSets the list item marker to a circle
squareSets the list item marker to a square
noneThe list items will not be marked

有序列表Ordered HTML List

The type attribute of the ol tag, defines the type of the list item marker:

TypeDescription
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图像还具有widthheight属性,用于指定图像的宽度和高度:

<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>
Written by John Doe.
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> 
First name:

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类型

TypeDescription
<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属性

TypeDescribe
value指定input值
disabled禁用,不上传此项内容
size规定input尺寸
maxlength输入字符个数
autocompleteon/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,标签内直接写上即可
autofocusinput使用,自动聚焦
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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值