HTML Basics:
About Html
--HTML (Hyper textmarkup language) Chinese translation of "HTML", mainly carried out a description of the content of the page text, pictures, sound, etc. through HTML tags.
--HTML provides a number of markers, such as paragraph tags, title tags, the hyperlink tag, image tag, etc., need to define what the content of the page, you can describe it is labeled with the corresponding HTML.
--HTML is called HTML, not only because he describes the page content by marking, but also because the text contains so-called "super link" points. By hyperlink and web sites as well as a variety of page elements link together to form a colorful Web page.
HTML standard selection
- The latest version of HTML is HTML5.
- Part domestic sites or using the XHTML standard, but HTML5 standard is the trend.
HTML structure <html>
<head></head>
<body>
<h1>my first heading</h1>
<p>my first paragraph.</p>
</body>
</html>
Features: in pairs, have opened a closure. Angle brackets enclose the tag name. The end of the tag increases the slash.
Syntax: <tag name> tag content </ tag name>.
First: the label pairs.
Second: the end of the internal label beginning with /.
Third: the tags can be nested.
HTML syntax
--HTML tag with "<" at the beginning. Followed by that tag name (no middle space).
- After the tag name if there are attributes, plus space and then the property name = ""
- If there are multiple attributes, separated by spaces between attributes, you can have multiple spaces.
- After the property can add one or more spaces.
- then the end tag ">", if it is added before the closing tag requires tag name "/", for example: </ html>.
- Single-label, slash does not make sense, dispensable.
- any intermediate can be nested label content.
HTML tags:
The basic HTML document format ---- label
- <! DOCTYPE> tag located at the top of the document, for explaining to the browser which HTML or XHTML document using the current standards. The main basis for the browser to parse the document label.
- must be used at the beginning of marks for all XHTML documents designate the XHTML version and type, the only way the browser to the page valid XHTML documents, according to the specified document type parsing <DOCTYPE!>.
- Compatible with relevant tags and browsers, delete, it is to show how the rights of the HTML page to the browser.
The basic HTML document format --- <html> tag
- mark behind a mark, also known as the root tag that tells the browser itself is an HTML document, HTML tag marks the beginning of the document, marking marks the end of an HTML document, between them is the head of the document and the body content.
<html>
- All tags must be written between two closed tabs.
</html>
Basic HTML document format - <head> tag
- <head> tag defines the header information of the HTML document, also known as marker head, immediately after the <html> tag.
Content --head label definitions are only available to browsers. Not for user presentation.
- mainly used to package other markup documents located in the head, for example, <title>, <meta>, <link> and <style> and the like, is used to describe the relationship between the document title, author, and other documents and the like.
- an HTML document only contains one pair <head> tag, the data file header contains the vast majority are not really as content displayed on the page.
The basic HTML document format - <meta> tag
-- <metacharset=”UTF-8”>
--utf-8 is the most common character set encoding, commonly used character set and encoding as well as gbk gb2312.
--gb2312 Simplified Chinese.
--GBK contains all the traditional Chinese characters.
--BIG5 Traditional Chinese.
--UTF-8 character contains all the world's countries need to use.
- Speaking from the binary, text notation, the pattern is encoded representation, similar to the telegram.
Link Label
- the introduction of pre-DNS parse
--dns pre-analytical (understand)
http://mimg.127.net”>
- the introduction of website icon icon:
http://www.126.com/favicon.ico” />
- the introduction of CSS style
<link rel=”stylesheet”href=”css/bg.css”>
Picture tags
<Img src = "" title = "Image title" alt = "When the picture is not displayed, it will display the text" alt attribute>
--Src: website picture.
--Alt: when the picture does not display the alt attribute text is displayed.
--Title: I have a great impact on seo site when the mouse is moved up when the picture shows the tip prompt text.
Title Tag: h1-h6
- <h1> is the title of my page content <h1>
- the title as the title of the content of the page, be sure to comply with the semantics of the title 1-6 heading style number is not defined size, but the right to define the title page of the entire weight.
- Title tags can only be nested inside the tag line. <H1> defines the maximum title, <h6> minimal custom title.
Paragraph tag, the tag line
- structured text should be displayed on the page, the paragraph mark can not be separated, just as we normally write articles, the entire page can be divided into several paragraphs, and marks a paragraph is <p>,
- <p> text paragraph <p>
- <p> HTML document is the most common mark, by default, text in a paragraph wrap automatically based on the size of the browser window.
- paragraph tag in the tag can only be nested rows.
Horizontal line marks
- page often see some horizontal lines separating between paragraphs and paragraphs, so that the structure of the document clear, structured. These horizontal lines can be achieved by inserting pictures, can simply be done by marking, <hr /> tag is to create a horizontal line across the page, the basic syntax is as follows: <hr /> tag is a single input on a web page < hr />, the default style will add a horizontal line.
Common HTML tags :
- horizontal tags: <hr>
- Break tag: <br>, common spaces and line breaks will be merged.
- Text section tag: span, inline label.
<Em> definition is focused text.
<I> defined in italics (not recommended).
<Strong> defined with emphasis.
<Sub> subscript word definition.
<Sup> superscript defined words.
<Del> deleted the definition of the word.
Advanced HTML tags:
Create a list:
a, unordered list
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
b, ordered list
<body>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</body>
Create Table
- HTML page, you want to create a table, you need to use forms and related tags. Create a table of basic syntax is as follows:
<table>
<tr>
<Td> text within the cell <td>
...
<tr>
<table>
Forms
- In HTML, a form is typically a complete form controls (also known as form elements), suggesting that three parts constituting the information and form fields, as shown below, that is a simple HTML form and configuration interface.
Form summary
--Form package label, action: #
--Input text boxes, radio buttons, checkboxes type: checkbox, submit button, the button to reset the press.
--<input type=”text”>
--Typeradio radio
--<input type=”submit”value=”提交”>
- <input type = value = "normal button" "button">
--Checked attributes: Identifies the radio or whether the radio button is selected, a single property.
--Lable label, for property points to the tag ID value to the services provided.
--Lable immediate package label, you can achieve text Click the tab, so that the form tag wrapped focus.
--Select the drop-down list, the list multiple: single attribute.
--Option setting options of our list.
--Textarea text field labels: When input a lot of text requires the use of a text field labels.
--Cols set how many columns you can enter text fields.
--Rows provided text field lines can be entered.
Other Additional Labeling
--Meta Tags: website SEO keywords and descriptions
<Meta name = "keywords" content = "recruitment java, php, Android, ios, c / c ++, web design lecturer">
<Meta name = "description" content = "IT training leader, the annual salary of 300,000-500,000 jobs JAVA, PHP, Android, IOS">
- Link Tags: introduction of CSS
--Script Tags: introducing js
--target property supplement: _blank _parent _self _top framename
--Base label: a label can make all of the current page have the same properties
Special characters mark
--HTML prepared a special alternative code for these special characters
Semantic HTML of
-- Web语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解.
--标签与语义相结合,尽量不要使用没有语义的标签比如:div,span,尽量使用p,ul,ol,table等标签.
--充分利用标签默认的含义
--标题标签的选择
h1-h6、th、td、ul、ol、dl、dd、dt、p、em、strong
HTML5的标签语义化更彻底。
标签的类型(显示模式)
--HTML标记一般分为块级和行内标记两种类型,它们也称为块元素和行内元素.具体如下:
--块元素:
每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，,常用于网页布局和网页结构的搭建
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标记是最典型的块元素。
一个人学习会有迷茫，动力不足。这里推荐一下我的前端开发裙：四八四，七五七，七六零，里面都是学习前端的，如果你想制作酷炫的网页，想学习编程。自己整理了一份2019最全面前端学习资料，从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴，有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入学习。