Home > Developer > Web Develop
Recently doing iOS development process, found to involve JS and native OC (Swift) interaction, as a developer, in line with the principle of overcoming all problems, began to learn HTML, here to record their own study notes, convenient for later review, and Novice beginner's reference.
HTML differs from the various object-oriented languages that have been learned in the past, functional languages, which do not have a clear contextual logical relationship like other languages. So it's not like any other language needs to have a specific foundation, I hope this sentence will keep you away from the shadow of learning other languages.
The relationship between HTML and CSS and JavaScript
1. HTML is the carrier of Web content. Content is the page creator placed on the screen want to let users browse information, can contain text, pictures, videos and so on.
2. CSS style is performance. Just like a web coat. For example, the title font, color changes, or for the title to add background pictures, borders and so on. All these things that change the appearance of the content are called performance.
3. JavaScript is used to achieve effects on the Web page, such as: Mouse over the popup drop-down menu. or the mouse slide over the background color of the table changes. There is also the rotation of the Focus news (news pictures). It can be understood that there are animations and interactions that are generally done with JavaScript.
1, semanticTouch HTML, or beginner HTML, I would like to contact the first professional vocabulary is not the label is semantic, the meaning of the semantic popular point is to understand the purpose of each label (different tags, under what circumstances, how to use, these are the semantics of things to consider), such as the title of the article on the page, Want to reflect on the page chart, column name, paragraph, etc., are the label can be achieved, through the basic tag with CSS, you can write some very beautiful pages.
The benefits of semantics:
1, more easily indexed by search engines.
2, it is easier for screen readers to read the page content.
2, explain the HTML from the simplest programAs a programmer, everyone should know "Hello, world", whether it is C, Java, OC, etc. I think everyone writes the first should be a printing function, but HTML is no function, HTML is mainly a text display, similar to a text editor, By adding the appropriate tags, the text is arranged in the way we want it to look, so there is no printing function (future JavaScript will have it).
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8">5 <title>My first page</title>6 </Head>7 <Body>8 <H1>Hello World</H1>9 </Body>Ten </HTML>
The above is the HTML Hello World.
A simple introduction to this piece of code
First of all, we can see from the code that most of the labels are paired, so there is a start tag and an end tag, and the end tag will be more "/" than the start tag, such as the
Then, we can see that the tags in the code can be nested, but not cross,
<title></title> tags, the text content between <title> and </title> tags is the title information of the page, which appears in the browser's title bar. The title tag of the Web page is used to tell readers and search engines what the main content of this page is, and search engines can quickly determine the main body of the Web page through the page tags. The content of each page is different, each page should have a unique title.
<body> tags, as the name implies, body is the bodies, the main body, that is, the page above the interface displayed above the content, he is also a container of content tags, the common content tag has a hierarchical title tag
3, Other labels<p></p> paragraph tags, in the article, we need a clear paragraph, this time we need the paragraph tag, the default style <p></p> before and after the blank, but not our normal use of the first line indentation, It doesn't usually make us happy, so we need to use CSS styles (<style> tags) to delete or change it.
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8">5 <title><p> tags</title>6 </Head>7 <Body>8 <P>My first paragraph.</P>9 <P>My second paragraph.</P>Ten <style> One P{ A Color:#940; - } - </style> the </Body> - </HTML>
<strong> and <em> emphasis labels, which are used to emphasize specific words or paragraphs of text in a Web page, but there are differences in tone, <strong> more pseudo-strong, the expression is bold, and <em> will be italic.
<span> tags, <span> tags do not have any semantics, you may think, it does what it does, but it is because there is no semantics, it embodies its strong, that is, custom, The text in the tag with the CSS or JS can be highly specific to the customization of the text, which in future learning can be called one of the most important tags.
<q> Short Reference text label, this label is less popular, when you quote a famous quote, and so on, you will use the tag, the browser will quote you the text automatically add double quotes, so you do not need to add double quotation marks.
<blockquote> long refers to the text label, this and the above label using the same, but for long paragraph reference, in the actual effect will be indented, the individual paragraph reference effect, and does not increase the double quotation marks.
<address> address tags, you can define an address, either a mailbox, a signature, or a document's author identity. The text in the label is styled in italics on the browser, and can be customized using CSS style sheets.
<code> code tags, in some technical sites, such as our blog forum site, need to show a line of code, you will use the tag. But it's not possible to have multiple lines of code.
<pre> Code snippet label, when you need to insert a large segment of the code, you need to use the <pre> tag, it can be in our code, such as carriage return, indentation, etc., to avoid the HTML does not recognize multiple spaces and enter the problem.
Empty label (single label, no start end tag)
<br/> Label, in the HTML is not recognized multiple spaces (can recognize a single space as a text form) and line-wrapping, all the text will be continuous, so there is a paragraph label <p>, Space <br/> In HTML is also equivalent to "\ n" in ASCII.
Beginner HTML Common Tags
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
