A short summary of the front-end learning route :
- Getting started with the basics:
- HTML CSS JavaScript
- Three mainstream frameworks:
- VUE REACT Angular
- In-depth study:
- Small program Node jQuery TypeScript front-end engineering
Let's learn HTML together!
In the last article, we introduced the content of HTML lists. HTML supports three types of lists, namely ordered lists, unordered lists and definition lists. Today, we will start with the content of the HTML block and give a detailed explanation, 一起开始我们的前端之旅吧! !
上篇文章得到了推荐，希望下篇的内容也能帮助到大家！
1. HTML block
HTML <div>can <span>combine elements with and .
Most HTML elements are defined as block-level elements or inline elements.
1. HTML block element
Block-level elements usually start and end on a new line when displayed by the browser.
2. HTML inline elements
Inline elements usually do not start with a new line when displayed by the browser.
3. HTML div element
HTML <div>elements are block-level elements, which are containers used to group other HTML elements.
Example: Let one area in the document be displayed in red, and another area in bold and displayed in blue. The HTML document code is as follows.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>望庐山瀑布</h1>
<h2>唐 李白</h2>
<div style="color:red">
<p>日照香炉生紫烟，</p>
<p>遥看瀑布挂前川。</p>
</div>
<div style="font-weight:bold;color:blue">
<p>飞流直下三千尺，</p>
<p>疑是银河落九天。</p>
</div>
</body>
</html>
display effect:
<div>Tags are often used to group block-level elements so that they can be formatted with CSS.
4. HTML span element
HTML <span>elements are inline elements that can be used as containers for text.
Example: To colorize a part of the text in the document, the HTML code is as follows.
<h2><span style="color:chartreuse">唐</span> -李白</h2>
display effect:
<span>Used to group inline elements in a document.
2. HTML layout
Layouts are used to improve the appearance of the website, we can use <div>or <table>add page layouts, most websites can use the <div>or <table>element to create multiple columns. CSS is used to position elements, or to create backgrounds and colorful appearances for pages.
1. Use div elements to add web page layout
divElements are block-level elements used to group HTML elements. E.g:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小橙子前端教程!</title>
</head>
<body>
<div id="container" style="width:600px">
<div id="header" style="background-color:cornflowerblue;">
<h1 style="margin-bottom:0;">--唐诗三百首--</h1>
</div>
<!--下外边距-->
<!--float:该属性控制目标HTML元素是否浮动以及如何浮动.-->
<div id="menu" style="background-color:dimgrey;height:200px;width:200px;float:left;">
<b>菜单</b><br>
望庐山瀑布<br>
静夜思<br>
绝句<br>
琵琶行
</div>
<div id="content" style="background-color:aliceblue;height:200px;width:400px;float:left;">
望庐山瀑布<br>
翻译译文：
香炉峰在阳光的照射下生起紫色烟霞，远远望见瀑布似白色绢绸悬挂在山前。
高崖上飞腾直落的瀑布好像有几千尺，让人恍惚以为银河从天上泻落到人间。
</div>
<!--clear 属性规定元素的哪一侧不允许其他浮动元素。-->
<div id="footer" style="background-color:cadetblue;clear:both;text-align:center;">
橙子！</div>
</div>
</body>
</html>
2. Use the table element to add page layouts
We can also add web page layouts using the table tag, for example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小橙子前端教程!</title>
</head>
<body>
<table width="600" border="0">
<tr>
<td colspan="2" style="background-color:cornflowerblue">
<h1>--唐诗三百首--</h1>
</td>
</tr>
<tr>
<td style="background-color:dimgrey;width:200px;vertical-align:top;">
<b>菜单</b><br>
望庐山瀑布<br>
静夜思<br>
绝句<br>
琵琶行
</td>
<!--vertical-align 属性设置元素的垂直对齐方式。-->
<td style="background-color:aliceblue;height:200px;width:400px;vertical-align:top;">
望庐山瀑布<br>
翻译译文：
香炉峰在阳光的照射下生起紫色烟霞，远远望见瀑布似白色绢绸悬挂在山前。
高崖上飞腾直落的瀑布好像有几千尺，让人恍惚以为银河从天上泻落到人间。</td>
</tr>
<tr>
<td colspan="2" style="background-color:cadetblue;text-align:center;">
橙子！</td>
</tr>
</table>
</body>
</html>
<table>Elements are mainly used to create tables, although they can be used to add web page layouts, they are not recommended!
3. HTML form and input
HTML 表单Used to collect user input, an HTML form represents an area in a document that contains interactive controls that send the information collected by the user to a Web server.
表单是一个包含表单元素的区域, the form element is to allow the user to enter content in the form, such as: text fields (textarea), drop-down lists (select), radio-buttons (radio-buttons), checkboxes (checkbox) and so on.
We use tags to create forms, most of the time the form tags used are input tags <input>.
1. Text field
Text fields (Text Fields) <input type="text">are . When users want to type letters, numbers, etc. in the form, they will use text fields, for example:
<body>
<form>
First <input type="text" name="firstname"><br>
Last <input type="text" name="lastname">
</form>
</body>
2. Password field
Password fields <input type="password">are , for example:
<form>
Password: <input type="password" name="pwd">
</form>
Password field characters are not displayed in clear text, but are replaced by asterisks *or dots ..
3. Radio buttons
Radio Buttons <input type="radio">are defined by labels, for example:
<form action="">
<input type="radio" name="sex" value="male">男<br>
<input type="radio" name="sex" value="female">女
</form>
4. Checkbox
Checkboxes <input type="checkbox">are defined by labels, for example:
<form>
<input type="checkbox" name="vehicle" value="Bike">语文<br>
<input type="checkbox" name="vehicle" value="Car">数学<br>
<input type="checkbox" name="vehicle" value="Bike">英语<br>
<input type="checkbox" name="vehicle" value="Car">历史
</form>
5. Submit button
Submit buttons <input type="submit">are defined with labels, for example:
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
Type a few letters in the above text box, and then click the OK button, then the input data will be sent to the html_form_action.php file, and the page will display the input results.
methodAttributes are used to define how the form data is submitted and can have the following values:
post: Refers to the HTTP POST method, the form data will be included in the form body and then sent to the server for submitting sensitive data such as username and password.
get: The default value, which refers to the HTTP GET method. The form data will be appended to the URL of the action attribute, with ? as the separator, which is generally used for insensitive information, such as pagination.
4. HTML frame
Sometimes we want to display more than one page in the same browser interface, and then we use frames.
1. iframe syntax
The iframe syntax format is as follows:
<iframe src="URL"></iframe>
2. iframe set height and width
heightand widthattributes are used to define the height and width of the iframe tag, for example:
<iframe loading="lazy" src="demo_iframe.htm" width="200" height="200"></iframe>
3. iframe remove border
frameborderThe attribute is used to define whether the iframe represents whether to display the border, for example:
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
4. Use an iframe to display the target link page
iframeA page with a target link can be displayed, for example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小橙子前端教程！</title>
</head>
<body>
<iframe src="demo_iframe.htm" name="iframe_a" width="800" height="400"></iframe>
<p><a href="https://blog.csdn.net/zhangxia_?spm=1000.2115.3001.5343" target="iframe_a">橙子！的博客</a></p>
<p><b>注意：</b> 因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架，所以在点击链接时页面会显示在 iframe框架中。</p>
</body>
</html>
5. HTML Colors
HTML 颜色A mix of red, green, and blue.
HTML colors are defined by a hexadecimal notation consisting of red, green, and blue values (RGB).
The minimum value for each color is 0 (hex: #00). The maximum value is 255 (hex: #FF).
The specific color effects can be found in the table.
6. Script
1. HTML script tag
<script>Tags are used to define client-side scripts, such as JavaScript. <script>Elements can either contain script statements or point to external script files via the srcattribute , for example:
<script>
document.write("Hello World!");
</script>
2. HTML's noscript tag
The tag provides alternative content when scripting cannot be used. For example, when the browser disables scripting, the <noscript>element can contain all elements that can be found in the body element of a normal HTML page. When the browser disables scripting, the content in the tag will be displayed. E.g:
<script>
document.write("Hello World!")
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>
7. Character entities
Characters reserved in HTML and some characters not found on the keyboard must 字符实体be replaced with !
If we want to display reserved characters correctly, we must use character entities in the HTML source code.
| show result | describe | entity name | entity number |
|---|---|---|---|
| space | |
  |
|
| < | Less than sign | < |
< |
| > | greater than sign | > |
> |
| & | ampersand | & |
& |
Entity names are case sensitive, please refer to the HTML Entity Reference Manual when using actual entity names!
8. URL
URL(统一资源定位器)is a web address.
It can be accessed using a web address such as www.baidu.com or using an IP address.
Web浏览器Request a page from a web server by URL.
1. Common URL Scheme
| Scheme | access | effect |
|---|---|---|
| http | Hypertext Transfer Protocol | Normal web pages starting with http://. Not encrypted. |
| https | Secure Hypertext Transfer Protocol | Secure web pages, encrypting all information exchanges. |
| ftp | file transfer protocol | Used to download or upload files to a website. |
| file | files on your computer. |
URLs can only use the ASCII character set.
Nine. HTML summary
恭喜你！现在我们已经顺利的通过了HTML的学习。Among the front-end three Musketeers HTML, CSS and JavaScript, HTML learning is relatively simple. In the process of learning, you must pay attention to practice and learn commonly used tags. Thanks for reading, we will learn another important part together - css.
