Preface (learning objectives):
Before learning javase, first the structure of the page will be a little early to know, in order to lay the foundation for later learning. The initial purpose of this paper is to their own learning, puzzles and record their own learning progress.
Hope to see friends can be pointing in the wrong, if the contents of this blog you have to offer to help, please can comment.
Where I put my https://blog.csdn.net/weixin_41321790/article/details/98517529 written on paper to copy over, blog, etc. park here will improve later after html + css to modify the content is rewritten of.
Getting started html core
development tools
before learning html + css development tools we need to understand, according to a rough introduction relatively recent fire several tools.
vs code: Full stack development tool can be said to be a very convenient at the same time easy to use a tool. Free, most of the front-end developers are using with this development tool.
hbuilder: pure front-end development tools, in recent years, can see nothing to use, because of its speed, or people not very satisfactory.
sublime: vs code and the like, if the code is going to knock pure, very prompt people hope, can be used to practice grammar. Is a plain-text software.
webstorm: This is a software for a fee, but there are online tutorials. It is a java application developers favorite software. Its excellent programming environment, code hints are doing well, the key can be a direct replacement to Intellij IDEA late in java
Browser rendering the principle of
the browser is essentially a rendering engine can render the html code symbol adult classes more acceptable.
HTML
HTML (Hyper Text Markup Language), an application under the Standard Generalized Markup Language.
Label
to begin to mark the end of that label. Among the label can put text, you can also put other labels. Tags can be nested.
Element
label and its contents called elements
Properties
attribute tag in the tag present in key = value form.
<img width = "100px" height = '20px' />
Standard document structure
<! - start the browser rendering engine version ->
<!doctype html>
<html>
<-! Head tell the browser presets ->
<head>
<! - charset decoding ->
<meta charset="UTF-8">
<-! Tag title ->
<Title> Baidu, you fooled </ title
<! - Set your browser's viewport ->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<-! Seo optimization ->
<Meta name = "keywords" content = "millet, millet 9, millet cc9, Redmi K20, Redmi Note 7, MIX3 millet, millet Mall">
<Meta name = "description" content = "fever born">
<! - told IE to use the document mode Edge ->
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
</head>
<body>
I HTML
<h1 style="color:red">我是HTML</h1>
<img src="https://www.baidu.com/img/bd_logo1.png" />
</body>
</html>
html html document structure is a root node, which contains the head and body under
the relevant head configuration tag to tell the browser rendering. body is the browser to render content.
Browser viewport
<metaa name = "the viewport" Content = "width = Device-width, Initial-Scale = 1.0">
the viewport represented by the browser viewport, the viewport size device size (device-width), the initial scale for the (initial-scale = 1.0) represents not scaled
Correlation attribute value
width: the width of the viewport control, this value can be specified.
height: the height of the viewport control
initial-scale: initial scale, i.e., every time the zoom ratio of the page is loaded.
maximum-scale: maximum allowed users to zoom scaling.
minimum-scale: scale allows the user to minimize scaling.
user-scaleable: whether to allow the user to zoom, you can pass "yes" or "no"
Tips:
! + The Tab shortcut keys to quickly generate standard html5 document structure.
He stressed that, under normal circumstances, these do not need their own hands to fight, usually generated directly by the software, making the appropriate changes to use when needed.
html core tags
html tags can be divided into two types according to the layout of the label
Label block
inline tag
block tag (Block Tags)
1. own line, arranged vertically
2. The width and height can be provided
Tag (inline tags) within a line
1. arrayed side by side in a row, are arranged in the horizontal direction
2. The width and height can not be set, the contents of distraction height
There semantic tags
label has a specific meaning, such as display pictures of tag img, audio player tag audio, play tag video video.
Semantic labels can not be used for other purposes.
No semantic tags
tag no specific meaning, anything can display the label, usually as a container, it can be used for page layout. For example: div / span etc.
Block tag
div
no semantic tags block tag, the role of a container for general page layout.
<body>
<div style="height:100px;background:red;">hello world</div> test
</body>
h1-h6
semantic tag representing a title.
<-! H1-H6 ->
<h1> I was heading 1 </ h1>
<h2> I was heading 2 </ h2>
<h3> I was heading 3 </ h3>
<h4> I was heading 4 </ h4>
<H5> I was heading 5 </ H5>
<H6> I was heading 6 </ h6>
ol / ul / DL
ol an ordered list ordered list li represents a list of items, must be located in ol.
<OL>
<li> I was the first item </ li>
<li> I was the second item </ li>
<li> I is the third </ li>
</ OL>
ul represent an ordered list unordered list li represents a list of items, must be located in ul.
<ul>
<li> I is a list 1 </ li>
<li> I is a list of 2 </ li>
<li> I is a list 3 </ li>
</ ul>
dl definition list List defined
dt represents the definition of the title title defined
dd represented defined description indicates defined
wherein a plurality dt and can be of any dd
<-! DL ->
<DL>
<dt> Cock wire </ dt>
<dd> Cock silk from China mainland Chinese Internet culture. The expression means ironic; is meant other convenient metaphor expressed or inappropriate blunt lingo used for mutual Kan mutual acquaintances or demoted. At the same time it refers to the metaphor of self-deprecating. For more than a lively atmosphere with a self-deprecating, the word Cock wire transfer limit use so far has no specific populations, and more for drama McCain among friends, acquaintances. </ dd>
</ DL>
<DL>
<dt> programmers encourage teachers </ dt>
<dd> 1, looks fresh, sweet voice, often smiling, cute; </ dd>
<dd> 2, a good listener, good to poor communication important, can endure death house IT engineers can not communicate personality; </ dd>
<dd> 3, not playing bad temper is not important, for the good of each program warm man's nature, success tame; </ dd>
<dd > 4, about the Internet, understand science and technology, or chat up foggy, engineers will be more vulnerable. </ dd>
</ DL>
table
table is table rows (TR) configuration, there is a row column (TD) thereof.
<table border="1">
<tr>
<td>aaa1</td>
<td>aaa2</td>
<td>aaa3</td>
</tr>
</table>
<!-- table>tr*2>td{aaa$}*3 -->
<table border="1">
<tr>
<td>aaa1</td>
<td>aaa2</td>
<td>aaa3</td>
</tr>
<tr>
<td>aaa1</td>
<td>aaa2</td>
<td>aaa3</td>
</tr>
</table>
Merged cell
colspan: right cell over several columns
rowspan: downwardly across cell lines
<!-- table>tr*2>td{aaa$}*3 -->
<table border="1">
<tr>
<td colspan="3">aaa2</td>
</tr>
<tr>
<td>aaa1</td>
<td>aaa2</td>
<td>aaa3</td>
</tr>
</table>
<!-- rowspan -->
<table border="1">
<tr>
<td rowspan="3">bbb1</td>
<td>aaa2</td>
<td>aaa3</td>
</tr>
<tr>
<td>aaa2</td>
<td>aaa3</td>
</tr>
<tr>
<td>aaa2</td>
<td>aaa3</td>
</tr>
</table>
P / br
P refers to the paragraph tag
<br /> newline
Inline tags
span
without the semantic tag line, used as a container.
<span style="background:red;height: 1000px;">Lorem, ipsum dolor.</span>
<span style="background:red;">Lorem, ipsum dolor.</span>
A represents a link, href indicates a link address
absolute path: The path is an absolute path from the letter began.
Relative path: no drive letter, starting from the current path. Path of the file where the current operation is the current path, by Indicates.
Empty Links
<a href="###"> air links </a>
1
tip text title attribute indicates hovering over a link when
Anchor: anchor within a page called Jump.
img
img represent the picture, there are semantic tags.
src indicates the address of the picture.
After the alt image loading failure prompt text
title hover text tips
<!-- 1.img.src -->
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2599516185,3761655849&fm=58&bpow=447&bpoh=737" alt="">
<img src="./img/1.jpg">
<-! Base64 ->
.... 64-bit coded picture now with very few
img can set the width and height.
strong / EM / var
var / strong / EM are for emphasis.
<-! Var / strong / EM ->
<var> I emphasize </ var>
<strong> I emphasize </ strong>
<EM> I emphasize </ em>
The actual development process, three tags are not degraded to a semantic tag for the container.
A developer as a background, not seen if desired label => test fall within the block row label or tag.
form form
form form for submitting data to the background.
<Action form = "" Method = "the POST">
.....
</ form>
Action represents spooler.
method represents a submission get / post
<!-- form -->
<form action="###" method="POST">
<! - 1-line text input box ->
User Name: <input type = "text" name = "user" /> <br />
Password: <input type = "password" name = "pwd" /> <br />
<! - 2 multi-line text input box ->
<TextArea cols = "30" rows = "10" name = "info"> </ TextArea> <br />
<!-- 3.单选按钮 -->
<input type="radio" name="sex" checked value="男"> 男
<input type="radio" name="sex" value="女"> 女
<br />
<-! 4 multiple choice ->
Hobbies:
<the INPUT of the type = "the CheckBox" the checked name = "Hobby" value = "write code"> write code
<input type = "checkbox" name = "hobby" value = " playing game "> play games
<input type =" checkbox "name =" hobby "value =" travel "> travel
<input type =" checkbox "name =" hobby "value =" Paoniu "> because of who
<br />
<! - The drop-down list ->
ideal city:
<the SELECT name = "">
<the Option value = ""> Choose ... </ option>
<the Option value = "Guangzhou"> Guangzhou </ option >
<the Option value = "Shenzhen"> Shenzhen </ the Option>
<the Option the Selected value = "Beijing"> Beijing </ the Option>
<the Option value = "Shanghai"> Shanghai </ the Option>
</ the SELECT>
<br />
<!-- 6.隐藏域 -->
<input type="hidden" value="10">
<!-- 6.按钮 -->
<input type="button" value="普通按钮" />
<input type="reset" value="重置" />
<input type="submit" value="提交" />
</form>
Summary
[. 1] form submit the form, input from the form and other form elements can be used.
[2] form a block element, input lines are all the other elements form an element, and can set the width and height.
Debugging tools
all browsers right click -> check the element / elements see / check start devTools, shortcut keys F12.
Where the debugging tools to Google and Firefox, also known as developer tools, best to use.
---------------------
Disclaimer: This article is CSDN blogger "NotaChtholly 'original article, follow the CC 4.0 by-sa copyright agreement, reproduced, please attach the original source link and this statement.
Original link: https: //blog.csdn.net/weixin_41321790/article/details/98517529