1 Know what is a plain text file txt
- Windows comes with a software called Notepad. The file format saved in Notepad is txt format, which is the abbreviation of English text. The terminology calls this file a "plain text file".
- The txt file can only save the text content and cannot record the text style. (Compared to doc files, doc files can store the content and style of text, so doc and txt store the same content, doc is larger than txt)
- The plain text file has the following characteristics: 1. Only text, no style; 2. Readable with a plain text editor such as Notepad, not garbled.
- html, css, js are all plain text files.
2 HTML is the language responsible for describing the semantics of documents
- HTML is the abbreviation of English HyperText Markup Language, that is, hypertext markup language. .html is the format of the web page.
- Plain text txt files cannot describe the semantics of the document. For example, in the document, it is unknown who is the main title, who is the subtitle, and who is the paragraph. So html came into being. That is, through the html tag pair, to add semantics to the text.
- The current industry standard, web page technology is strictly separated in three layers: HTML is responsible for describing the semantics of the page; CSS is responsible for describing the style of the page; js is responsible for describing the dynamic effects of the page.
- Therefore, HTML cannot center the text, and cannot change the font size, font, and color of the text. Because these belong to the category of css style; HTML cannot make the box move, these attributes belong to the category of js behavior.
3 In html, there is nothing but semantics
- HTML is a plain text file (which can be derived from the txt file with the suffix changed). Some tags are used to describe the semantics of the text. These tags are invisible in the browser page, so it is called "hypertext".
- HTML can only do one thing, which is to add semantics to text through tag pairs. This is the only thing html can do.
4 sublime
- Any plain text editor can edit html, such as notepad, editplus, notepad++.
- The more famous tools dedicated to making web pages are:
1. DreamWeaver (Adobe's product, this thing is outdated); 2. Sublime (high-efficiency programming tool); 3. WebStorm (a more advanced project-level programming tool). - Sublime means "gorgeous" in Chinese. It is a popular code compiler since 2011. It can edit java, c, php and other languages. The support for html, css, js is very good, the interface is also very beautiful, the installation is simple, compact, and there are many plug-ins.
- Sublime3 has integrated common plug-in network disk download: https://pan.baidu.com/s/1sugysbl7Wpm1mTpcE6JzJg
- Commonly used shortcut keys in sublime:
- ctrl+wheel: zoom in and out text; ctrl+shift+d: copy the current line; ctrl+shift+k: delete the current line; ctrl+shift+↑: move the current line up; ctrl+shift+↓: move the current line down;
- 1. Type u followed by tab key to generate <u></u> tag;
- 2. Type html:xt, then press ctrl+E, then press enter, sublime can generate a standard version of the skeleton in html format.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title></title></head><body></body></html>
- 3. Hold down the ctrl key and click on multiple lines to be edited to edit at the same time.
- 4. li*10, then press the tab key to generate multi-line li tags. (It should be noted that you need to save the page first when editing the page)
5 html skeleton
5.1 Document declaration header
- For any standard HTML page, the first line must be a statement beginning with <!DOCTYPE ......>. This line is the document declaration header, DocType Declaration. This tag tells the browser what kind of HTML or XHTML specification the document uses.
- The html skeleton generated by sublime's shortcut key html:xt is the version of HTML4.01, which is compatible with IE6. And HTML5 is compatible with IE9. But browsers like IE6/7/8 cannot be eliminated prematurely, so web pages should still be made using HTML4.01 in recent years. For mobile and mobile web development, HTML5 can be used.
- There are two major specifications in HTML4.01, each of which has three minor specifications, so there are a total of 6 specifications. (Why define the two major specifications? The reason is that HTML feels that some regulations are not rigorous enough, such as whether tags can use capital letters, etc. Therefore, HTML has formulated a XHTML1.0. Letters in XHTML X means "strict".
| Big norm | Minor specifications |
|---|---|
| HTML4.01 | 1. Strict: Strict, which is reflected in that some tags cannot be used, such as u; 2. Transitional: ordinary; 3. Frameset: pages with frames |
| XHTML1.0 (It is strictly embodied in lowercase tags, closures, and quotation marks) | 1. Strict: Strict, which is reflected in some tags that cannot be used, such as u; 2. Transitional (html skeleton generated by sublime shortcut html:xt, x means xhtml, t means transitional); 3. Frameset: with Framed page |
- Strict means "strict", and this strictness is reflected in some tags that cannot be used. For example, the u tag can make a text underlined, but this conflicts with the essence of HTML, that is, HTML can only be responsible for semantics, not styles, and the underline of u is the style, so it cannot be used in strict u tag.
- Some tags like u are occasionally used in general pages (used as css hooks), so the transitional version in XHTML1.0 is most suitable.
5.2 Character set
- The character set is defined by the meta tag, meta means "meta configuration", which means basic configuration items. Charset is the meaning of charactor set "character set".
- There are two character sets that can be used in Chinese:
- 第一种：UTF-8，即<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">；
- The second type: gb2312, which is <meta http-equiv="Content-Type" content="text/html;charset=gb2312">, the second type can also be written as gbk, which is <meta http-equiv="Content-Type "content="text/html;charset=gbk">.
- UTF-8 is an international universal font library, which covers all human languages on the earth, such as Arabic, Chinese, Korean, etc.; and gb2312 is a national standard, a Chinese font library, which only covers Chinese characters and some common foreign languages, and Some commonly used symbols.
- In terms of font size, since UTF-8 stores all human languages in the world, it requires more codes to describe a Chinese character. That is, UTF-8 stores 3 bytes of a Chinese character, and gb2312 stores 2 Chinese characters. byte. Save size: UTF-8 (more bloated, slower to load)> gb2312 (smaller, faster to load).
- It should be noted that the browser uses the meta configuration to see what character set the web page belongs to. For example, the meta configuration when you save is inconsistent with the encoding format when you save, then the browser will appear garbled.
5.3 Keywords and page description
- In addition to setting the character set, meta can also set keywords and page descriptions.
- Setting page description:
<meta name="Description" content="NetEase is a leading Internet technology company in China, providing users with free email, games, search engine services, opening more than 30 content channels such as news, entertainment, and sports, as well as blogs, videos, and forums Wait for interactive exchanges, the power of the network to gather people." />
- As long as the Description page configuration is set, these sentences can be displayed in Baidu search results. This technique is called SEO, or search engine optimization.
- Define keywords:
<meta name="Keywords" content="Netease, mailbox, games, news, sports, entertainment, women, Asian Games, forums, SMS" />
- These keywords tell search engines what the web page does and can improve search hit rates.
6 Basic syntax features of HTML
6.1 HTML is not sensitive to line breaks and not to tabs
- HTML only cares about the nesting structure of the tags, the nesting relationship, that is, who is nested by whom, who is nested by whom, and has nothing to do with line breaks and tabs. Changing lines or tabs does not affect the structure of the page.
- HTML does not rely on indentation to indicate nesting, or the wrapping relationship between tags, but with good indentation, the code is easier to read.
- Spaces, tabs, and line breaks all occupy bytes. Baidu pursues the ultimate display speed, so there is no line break or indentation in HTML tags. HTML has nothing to do with line breaks. The level of tags is still clear, but programmers are not readable. That's it.
6.2 Blank folding phenomenon
- Between all the text in HTML, if there is a space, line break or tab, it will be folded into a space and displayed.
- That is, the following code:
<p>Enthusiastically love love</p>
- The display is folded after:
6.3 The label must be strictly sealed
- The unclosed label is a disastrous result:
<title>Welcome<title>
7 Instructions on the html tag
7.1 html tag level classification
- HTML tags are hierarchical. HTML divides all tags into two types: container level and text level.
- As the name implies, container-level labels can theoretically put anything in them (for example, h is a container-level label. In theory, p and ul can be placed in them, and grammatically allowed, semantically, do not write this.);
- In text-level tags, only text, pictures, form elements, etc. can be placed. (For example, p tag is a text-level tag, p can only place text, pictures, form elements, etc.)
- Correct writing:
```
<h3>Personal signature</h3>
<p>
Where not to wander, the hometown is the hometown
</p> - Wrong wording:
<p><h3>Personal signature</h3>Where not to wander, the hometown is home</p>
- Use Chrome's F12 to review the wrong way of writing, and you will find that the browser has blocked p and won't be allowed to wrap h1.
- Additional note: Chrome browser is the best browser in the world that supports HTML5. It provides very good development tools and is very suitable for developers. (The shortcut key for the review element function is F12)
7.2 img tag
- It is not possible to insert pictures directly into the HTML page, but to insert the reference address of the picture, so the picture must also be uploaded to the server. The inserting method is: <img src="baby.jpg" alt="cute little baby" />, src is the abbreviation of English source "resource".
- Alt is the meaning of "alternate" in English, which means that no matter what happens, when the picture cannot be displayed, the alternate text (some browsers do not support).
- Regarding the relative path of the src attribute value, ../ indicates that it can be the upper level folder, and ../../ indicates the upper level folder. (The following situation will not occur in the relative path: aaa/../bbb/1.jpg. That is, ../ is either not written or written at the beginning.)
- Interview question: There is a file hierarchy chart as follows. The sentence that can insert picture 1.png in the index.html page is: <img src="../../photo/1.png" />.
- Explanation: document is the top-level folder, and there are two folders work and photo inside. There is another folder in work called myweb. There is index.html in the myweb folder. So index.html is in the myweb folder, the upper level is the work folder, and the upper two levels are the document folder. Use the document folder as a transfer station, enter the photo folder, and you can find 1.png.
7.3 Basic syntax of hyperlink
- A website is composed of many html web pages, and html web pages can jump to each other through hyperlinks to form a "web". The syntax is: <a href="1.html" title="hover text" target="_blank">content of the link</a>.
- a means "anchor" in English, and it is a text-level label;
- The href attribute is the abbreviation of the English hypertext reference hypertext address; the target attribute indicates whether to open in a new window, blank means "blank", which means to create a new blank window; the title attribute means the hovering text.
7.4 Anchor points in the page
- There can be an anchor point in the page. The so-called anchor point is a small mark. This small mark is invisible to the user, and the user does not know that there is a mark.
- The anchor is set with the name attribute. If an a tag has a name attribute (or an id attribute), it means it is an anchor in the page.
<a name="wdzp">My work</a> or <a id="wdzp">My work</a>
- Then write #wdzp on the page address bar to display this anchor at the top of the page.
- You can also use a hyperlink here to point to an anchor point on the page, then: <a href="#wdzp">click me to view my work</a>. (You can also use the a tag from one page to link to an anchor point marked in another page)
7.5 Unordered List
- An unordered list is used to represent the semantics of a list, and there is no priority between each item and each item.
- Ul means unordered list in English, "unordered list"; li means list item in English, "list item".
- An unordered list is a "group label", that is, either do not write or just write a group. (In other words, li cannot exist alone, it must be wrapped in ul; the other way round, the direct subtag of ul cannot be anything else, only li)
<ul> <li>北京</li> <li>上海</li> <li>广州</li></ul>
The following is wrong, li must be wrapped with ul:
<li>Beijing</li> <li>Shanghai</li> <li>Guangzhou</li>
- The following is also wrong. The direct subtags in ul can only have li tags, but not others: (but li is a container-level tag, and everything in li can be placed, even li tags can contain ul tags)
<ul> <h3>Major cities in China</h3> <li>Beijing</li> <li>Shanghai</li> <li>Guangzhou</li></ul>
- The browser will add a dotted "leader symbol" to the default unordered list item. It is emphasized here that the role of ul is not to add dots to the text, but to add the "semantics" of the unordered list.
7.6 Ordered List
- order list, an ordered list, represented by ol.
<ol> <li>Decent</li> <li>Next second</li> <li>She said</li></ol>
- ol and ul are only semantically different, and how they are used is the same. (Ol is not used much, if you want to express the order, usually use ul)
7.7 Definition list
- The definition list is also a group tag, but it is more complicated. Three tags appear:
1. dl stands for definition list, definition list; 2. dt stands for definition title, definition title; 3. dd stands for definition description, which stands for definition description word. - dt and dd can only be in dl; and the direct subtags of dl can only have dt and dd.
<dl> <dt>Guangzhou</dt> <dd>The southern gate of China, with the Pearl River and Xiaoyao</dd> <dt>Shanghai</dt> <dd>Magic City, with the Bund, Oriental Pearl Tower, Huangpu River </dd></dl>
- The expression semantics has two levels: 1. It is a list that lists three items of Beijing, Shanghai, and Guangzhou; 2. Each word has its own description item. (That is, dd is used to describe dt)
- The usage of the definition list can be very flexible. One dt can be equipped with multiple dds:
<dl> <dt>Guangzhou</dt> <dd>The southern gate of China, with the Pearl River and a small waist</dd> <dd>There are so many people</dd> <dt>Shanghai</dt> <dd>Magic Metropolis, the Bund, Oriental Pearl Tower, Huangpu River</dd></dl>
- You can also split it so that there is only one dt and dd in each dl, which will make it clearer:
<dl> <dt>Guangzhou</dt> <dd>The southern gate of China, with the Pearl River and a small waist</dd> <dd>There are so many people</dd></dl><dl> <dt>Shanghai< /dt> <dd>Magic capital, with the Bund, Oriental Pearl Tower, Huangpu River</dd></dl>
- In addition, dt and dd are both container-level labels, so you can put anything you want. (When editing a page, the label to use is not determined by appearance, but by semantics.)
7.8 div and span
Div and span are very important tags. The semantics of div is division "segmentation"; and the semantics of span is span "range, span". When designing CSS styles, these two tags are the most important "boxes".
<div> <h3>Main cities in China</h3> <ul> <li>Beijing</li> <li>Shanghai</li> <li>Guangzhou</li> </ul></div><div > <h3>Major cities in the United States</h3> <ul> <li>New York</li> <li>Los Angeles</li> <li>Seattle</li> </ul></div>
- In the browser, the div will not add any effect changes by default, but the semantics has changed, and all the elements in the div are a small area. A div is a container-level label, and everything can be placed inside, even the div itself can be placed.
- Span also means "small area, small span", but it is a text-level label. In other words, span can only place text, pictures, and form elements. (That is, small elements are placed in the span, and big things are placed in the div.)
- The div tag is also called the layout tag, as follows:
<div class="header"> <div class="logo"></div> <div class="nav"></div> </div> <div class="content"> <div class="guanggao"></div> <div class="dongxi"></div> </div> <div class="footer"></div>
- We call this model "div+css". The div tag is responsible for layout, structure, and block, while css is responsible for style.
7.8 Form elements: text frame, password box, radio button, check box
- The form is to collect user information. It is for users to fill in and choose.
<div> <h3>Welcome to register on this website</h3> <form> All form content must be written in the form tag </form></div>
- Form is the meaning of English form. There are action attributes and method attributes in the form tag. The action attribute indicates where the form is submitted. The method attribute indicates which HTTP method is used for submission, and there are two methods: get and post.
- Text box: <input type="text" value="default value" />; input means "input", refers to an "input widget", "type" attribute indicates the type to be selected, and text value indicates Type is an input widget for a text box.
- The value attribute represents "value". The filling of value indicates the default value.
- Password box: <input type="password" />
- Radio button: It is also an input tag, and the type is radio; only one of the radio buttons with the same name attribute value can be selected.
<input type="radio" name="gender" /> 男 <input type="radio" name="gender" /> 女
- If it is selected by default, it should write checked=”checked”.
- Checkbox: It is also an input tag, and the type is checkbox. (The name attribute value is the same)
<p>Please choose your hobby: <input type="checkbox" name="hobby"/> sleep <input type="checkbox" name="hobby"/> eat <input type="checkbox" name="hobby "/> Football <input type="checkbox" name="hobby"/> Basketball</p>
7.9 Drop-down list and text field
- select is "select" and option is "option".
- The select tag, like ul, ol, and dl, is a group tag:
<select><option>北京</option><option>河北</option><option>河南</option></select>
- Multi-line text box (text field): <textarea cols="30" rows="10">