Technical point 1: HTML

Guo Shao 2020-11-08 12:54:37
technical point html


HTML page

One 、B/S The structure of software

 

 

  Two 、 Front end development process

 

 

  3、 ... and 、 Part of the web page

HTML: It's the structure of the web page ( skeleton ), It's what we can see on the page .

CSS: It's a representation of a web page , It refers to the display form of these contents on the page . for instance . Layout , Color , Size and so on .

JavaScript: It's the behavior of the web page , It refers to the response of the elements in the page to the input device .

Four 、HTML brief introduction

Hypertext markup language :Hyper Text Markup Language ( Shorthand for HTML)

HTML Tag each part of the web page to be displayed by tags . Web file itself is a text file , By adding a marker to the text file , It can tell the browser how to display the content ( Such as : How to deal with words , How to arrange the picture , How to display the picture, etc )

5、 ... and 、 establish HTML file

1. Create a web engineering

 

 

 

 

 

 

 

 

 2. Create... Under the project html page

 

 

  Select the browser to execute :

 

 

  first HTML Page example :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>first.html</title>
</head>
<body>
first HTML page
</body>
</html>

notes :HTML It doesn't need to be compiled , It is directly parsed and executed by the browser .

6、 ... and 、HTML Notes

notes :<!-- The comment -->

notes : The content of the note can be found in F12 Look at the source code and see .

 

 

  7、 ... and 、HTML Label Introduction

 

 

 1. Classification of labels

Single label :< Tag name Property name = " Property value " /> Such as :<br />

Double label :< Tag name Property name = " Property value "> Encapsulated data </ Tag name >    Such as :<div> I am a div</div>

2. Attributes of the tag

Basic attributes : You can modify simple style effects

 

 

  The effect is as follows :

 

 

  Event properties : You can directly set the code after the event response

 

 

  The effect is as follows :

 

 

 3. Tag names are case insensitive

4. The syntax of labels

① Tags cannot be cross nested ;

② Tags must be properly closed ;

③ The attribute of a tag must have a value , Attribute values must be quoted ;

④ Comments cannot be cross nested .

8、 ... and 、 Introduction to commonly used labels

1.font Font labels

demand 1: Show... On a web page I'm a font label , And change the font to Song style , The color is red .

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Font labels </title>
</head>
<body>
<!-- demand 1: Show... On a web page I'm a font label , And change the font to Song style , The color is red .-->
<font face=" Song style " color="red" size="7">
I'm a font label
</font>
</body>
</html>

The effect is as follows :

 

 

 2. Special characters

demand 1: hold <br> Line wrap label Become text Convert to character display on the page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Special characters </title>
</head>
<body>
<!-- demand 1: hold <br> Line wrap label Become text Convert to character display on the page -->
I am a &lt;br /&gt; label
</body>
</html>

The effect is as follows :

 

 

  In the future, according to business needs , You can go to w3cschool Look for :

 

 

 

3. Title Tag

clear : The title tag is just h1~h6.

Examples are as follows :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Title Tag </title>
</head>
<body>
<!--
Title Tag :h1~h6
h1 Maximum
h6 Minimum
attribute :align( You can set the alignment of the data in the title label )
Property value :
center: In the middle
left: be at the left side
right: be at the right
-->
<h1 align="center"> title 1</h1>
<h2> title 2</h2>
<h3 align="right"> title 3</h3>
<h4> title 4</h4>
<h5> title 5</h5>
<h6 align="left"> title 6</h6>
</body>
</html>

The effect is as follows :

 

 

 

4. Hyperlinks ( **** heavy spot , have to Must be palm hold *

explain : What you can jump to after clicking on a web page is a hyperlink .

demand 1: ordinary hyperlinks .

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Hyperlink label </title>
</head>
<body>
<!--
a Tags are hyperlink tags ( By default, show... In one line ).
attribute :
href: The destination address of the jump
target: How to jump
_self: Current page Jump ( The default value is )
_blank: Jump to the new page
br: Line wrap label
-->
<a href="http://www.baidu.com"> use Baidu Search </a> <br/>
<a href="http://www.baidu.com" target="_blank"> use Baidu Search _blank</a> <br/>
<a href="http://www.baidu.com" target="_self"> use Baidu Search _self</a> <br/>
</body>
</html>

The effect is as follows :

 

 5. Tabs tab

demand 1: Use unordered lists , The Northeast F4, Zhao si , Lennon , Little Shenyang , Song Xiaobao , display

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Unordered list </title>
</head>
<body>
<!-- demand 1: Use unordered lists , The Northeast F4, Zhao si , Lennon , Little Shenyang , Song Xiaobao , display -->
<!--
Unordered list use ul The label indicates ,li It's a list item .
-->
<ul>
<li> Zhao si </li>
<li> Lennon </li>
<li> Little Shenyang </li>
<li> Song Xiaobao </li>
</ul>
</body>
</html>

The effect is as follows :

 

 6.img label

img Tags can be in HTML The page shows pictures .

demand 1: Use img The tag shows a picture of a beautiful woman . And modify the width and height , And border properties

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Picture label </title>
</head>
<body>
<!--
demand 1: Use img The tag shows a picture of a beautiful woman . And modify the width and height , And border properties .
img Tags can be in HTML The page shows pictures .
attribute :
border: Set the border of the picture
width: Set the width of the picture
height: Set the height of the picture
align: Set the image alignment
src: Set the path of the picture
alt: When you can't find the image you need in a certain path , Tips for users
About the path :
stay JavaSE in :
Absolute path : Disk character :/ Catalog / file name
Relative paths : Start with the project
stay web in :
Absolute path :http://ip:port/ project name / Resource path
Relative paths :
. Indicates the directory where the current file is located
.. Represents the parent directory of the directory where the current file is located
file name Indicates the directory where the current file is located , amount to ./ file name . among ,./ It can be omitted
-->
<img border="1" width="400" height="400" align="center" src="./timg.jpg" alt=" Beauty can't find " />
</body>
</html>

The effect is as follows :

 

 7. Tabular label ( **** a key , Must master *

Let's make sure what the form label can do ?

 

  The above content uses the form label , Can make the page more neat and beautiful .

 

demand 1: Make one With a meter , Three elements , A three column table , And show the border

demand 2: Change the width of the table , Height , Alignment of tables , Cell spacing .

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Tabular label </title>
</head>
<body>
<!--
demand 1: Make one With a meter , Three elements , A three column table , And show the border
demand 2: Change the width of the table , Height , Alignment of tables , Cell spacing .
table: Tabular label
border: Set borders
width: Set the width of the table
height: Set the height of the table
align: Set table alignment
cellspacing: Set cell spacing
tr It's a line tag .
th It's the header label .( With a special style )
td It's a cell label :
align: Set the alignment of cell text
-->
<table border="1" width="300" height="300" align="center" cellspacing="0">
<tr>
<th> Student number </th>
<th> full name </th>
<th> Age </th>
</tr>
<tr>
<td>001</td>
<td align="center"> Guo Peng </td>
<td>25</td>
</tr>
<tr>
<td>002</td>
<td> Guo Xin </td>
<td>24</td>
</tr>
</table>
</body>
</html>

The effect is as follows :

 

  Cross row, cross column table (* The second point is , Must master *)

demand 1: Create a new table with five rows and five columns , The cells in the first row and first column span two columns , The cells in the first column of the second row span two rows , The cells in the fourth row and fourth column span two rows and two columns .

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Across rows and columns </title>
</head>
<body>
<!--
demand 1: Create a new table with five rows and five columns , The cells in the first row and first column span two columns ,
The cells in the first column of the second row span two rows , The cells in the fourth row and fourth column span two rows and two columns .
-->
<table border="1" width="300" height="300" cellspacing="0">
<tr>
<td colspan="2">1.1</td>
<td>1.3</td>
<td>1.4</td>
<td>1.5</td>
</tr>
<tr>
<td rowspan="2">2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
<td>2.5</td>
</tr>
<tr>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
<td>3.5</td>
</tr>
<tr>
<td>4.1</td>
<td>4.2</td>
<td>4.3</td>
<td colspan="2" rowspan="2">4.4</td>
</tr>
<tr>
<td>5.1</td>
<td>5.2</td>
<td>5.3</td>
</tr>
</table>
</body>
</html>

The effect is as follows :

 

 8.iframe Frame Tags

ifarme Label it in a html On the page , Open a small window , To load a separate page .

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe label </title>
</head>
<body>
<!--
iframe You can create a small area on the page to display a separate page .
iframe and a Tag with :
1. to iframe Set up name attribute , The attribute value is arbitrary
2.a Labeled target Property value is set to iframe Corresponding name Property value is enough
-->
A single full page <br/> <br/>
<iframe src="http://www.baidu.com" width="400px" height="400px" name="label"></iframe>
<br/>
<a href="https://www.huya.com/" target="label"> Tiger tooth live broadcast </a>
<a href="https://egame.qq.com/" target="label"> The penguin e-sports </a>
<a href="https://www.douyu.com/" target="label"> Live fish fighting </a>
</body>
</html>

The effect is as follows :

 

 

9. Form labels ( ***** a key , Must master *

What is a form ?
The form is html On the page , Collection of all elements used to collect user information . And then send that information to the server .

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form label </title>
</head>
<body>
<!-- demand 1: Create a form interface for personal information registration . Include user name , password , Confirm the password . Gender ( The radio ),
Hobby ( multi-select ), nationality ( The drop-down list ), Hidden fields , Self evaluation ( Multiline text field ). Reset , Submit .-->
<!--
form Tags are forms .
text: Text input box ,value Set the default display content .
password: Password input box ,value Set the default display content .
radio: Radio buttons ,name You can group them ( You can only choose one from a group ),checked Is the default selected state
checkbox: Checkbox ,checked It is selected by default .
select: The drop-down list
option: Drop down list items ,selected Indicates that by default
hidden: Hidden fields ( Hidden domain users are invisible )
textarea: Multiline text field
cols It's the number of columns
rows It's the number of lines
The default value for multiline text fields is textarea Text content of .
reset and submit Just pay attention to value Property is what the button displays .
-->
<form>
user name : <input type="text" value=" The default value is " /> <br/>
password : <input type="password" value="abcde" /> <br/>
Confirm the password : <input type="password" value="abcde" /> <br/>
Gender : <input type="radio" name="sex" /> male
<input type="radio" name="sex" checked="checked" /> Woman <br/>
Hobby : <input type="checkbox" name="hobby" checked="checked" />Java
<input type="checkbox" name="hobby">JS
<input type="checkbox" name="hobby">C++ <br/>
nationality : <select>
<option>-- Please choose your nationality --</option>
<option> China </option>
<option selected="selected"> The United States </option>
<option> Japan </option>
</select><br/>
<input type="hidden" name="username" value="password" /><br/>
<textarea cols="20" rows="10"> I'm the default </textarea><br/>
<input type="reset" value=" Reset " /><br/>
<input type="submit" value=" Submit " /><br/>
</form>
</body>
</html>

The effect is as follows :

 

  We found that , The above form is not standardized , The user experience was terrible . therefore , You need to format the form .

Form formatting :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form label </title>
</head>
<body>
<form>
<h1 align="center"> User registration </h1>
<table align="center">
<tr>
<td> user name : </td>
<td><input type="text" value=" The default value is " /></td>
</tr>
<tr>
<td> password : </td>
<td><input type="password" value="abcde" /></td>
</tr>
<tr>
<td> Confirm the password : </td>
<td><input type="password" value="abcde" /></td>
</tr>
<tr>
<td> Gender : </td>
<td>
<input type="radio" name="sex" /> male
<input type="radio" name="sex" checked="checked" /> Woman
</td>
</tr>
<tr>
<td> Hobby : </td>
<td>
<input type="checkbox" name="hobby" checked="checked" />Java
<input type="checkbox" name="hobby">JS
<input type="checkbox" name="hobby">C++
</td>
</tr>
<tr>
<td> nationality : </td>
<td>
<select>
<option>-- Please choose your nationality --</option>
<option> China </option>
<option selected="selected"> The United States </option>
<option> Japan </option>
</select>
</td>
</tr>
<tr>
<td><input type="hidden" name="username" value="password" /></td>
</tr>
<tr>
<td> Self evaluation : </td>
<td><textarea cols="20" rows="10"> I'm the default </textarea></td>
</tr>
<tr>
<td><input type="reset" value=" Reset " /></td>
<td><input type="submit" value=" Submit " /></td>
</tr>
</table>
</form>
</body>
</html>

The effect is as follows :

 

  Form submission details :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form label </title>
</head>
<body>
<!--
form It's a form tag .
action: Address of form submission
method: Method of submission .GET( The default value is ) or POST
When the form is submitted , The data was not sent to the server 3 Medium condition .
1. Form items don't have name Property value ;
2. The radio , check , The drop-down list needs to be set value attribute , So that it can be sent to the server ;
3. The form item is not in form In the label .
GET request :
1. The browser address bar address is :action Property value [+?+ Request parameters ]
2. Data is not secure
3. There's a limit to length
POST request :
1. The browser address bar is :action Property value
2. Security
3. In theory, there is no data length limit
-->
<form action="http://www.baidu.com" method="get">
<h1 align="center"> User registration </h1>
<table align="center">
<tr>
<td> user name : </td>
<td><input type="text" name="user" value=" The default value is " /></td>
</tr>
<tr>
<td> password : </td>
<td><input type="password" name="pwd" value="abcde" /></td>
</tr>
<tr>
<td> Confirm the password : </td>
<td><input type="password" value="abcde" /></td>
</tr>
<tr>
<td> Gender : </td>
<td>
<input type="radio" name="sex" value="boy" /> male
<input type="radio" name="sex" checked="checked" value="girl" /> Woman
</td>
</tr>
<tr>
<td> Hobby : </td>
<td>
<input type="checkbox" name="hobby" checked="checked" value="java" />Java
<input type="checkbox" name="hobby" value="javascript" />JS
<input type="checkbox" name="hobby" value="cpp">C++
</td>
</tr>
<tr>
<td> nationality : </td>
<td>
<select name="country">
<option value="none">-- Please choose your nationality --</option>
<option value="cn"> China </option>
<option value="us" selected="selected"> The United States </option>
<option value="jp"> Japan </option>
</select>
</td>
</tr>
<tr>
<td><input type="hidden" name="username" value="password" /></td>
</tr>
<tr>
<td> Self evaluation : </td>
<td><textarea name="desc" cols="20" rows="10"> I'm the default </textarea></td>
</tr>
<tr>
<td><input type="reset" value=" Reset " /></td>
<td><input type="submit" value=" Submit " /></td>
</tr>
</table>
</form>
</body>
</html>

The effect is as follows :

 

 

Nine 、 Other labels

demand 1:div、span、p The demonstration of the tag

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Other labels </title>
</head>
<body>
<!--
explain :
div: Every div Monopolize one line
span: Multiple span Show... In one line
p: There will be a line before or after
-->
<div>div label </div>
<span>span label </span>
<p> Paragraph Tags </p>
</body>
</html>

The effect is as follows :

 

版权声明
本文为[Guo Shao]所创,转载请带上原文链接,感谢

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple