Before learning css, you must understand html, which is the root of the Foundation.
What is html? Hypertext Markup Language
Css is to add a style to html, that is, to wear clothes. First, you must understand how to write the html structure. Writing a webpage in html allows the browser to understand it. There are 114 html tags, so don't worry. There are only about 25 tags commonly used. This is a bit like an English word. The latest version of html is html5. A new batch of structured tags are provided. Html basics: Closed tags are non-closed tags. All texts use closed tags, such as <Tag Name> text content </Tag Name>. Of course, this is too simple. It mainly depends on attributes. The attribute determines everything, for example, <Tag Name attribute = 'Property attribute'> </Tag Name>
<H1> Reference content uses a self-closed tag, which means you can end yourself. For example,
We recommend that you close all the tags when writing code. This is a good code habit that complies with w3c standards and is the basic requirement for becoming a master. Html5 has no mandatory requirements for tag closure, because the previous websites do not have a unified standard to adapt to more websites.
Highlights of this section:
Block label: <P> paragraph Image
<Ol> ordered list <em> Italic
<Li> list items <strong> important
<Blockquote> independent reference <abbr>
<Cite> citation <q> reference in text
For the next two words, the block level means that each label will automatically take one line and wrap the line. In the line: it will keep close to the line until the content is too much than the range of the line will automatically wrap the line,
Composite Element: Creates complex User Interface Component tags such as List table forms, which are composed of multiple tags,
Li is a list item and can only appear in ol ul. This is the most important thing to understand nested labels,
<P> This method is <em> correct </em> </p>. You must first disable the tag before closing the tag,
Html document analysis:
<! DOCTYPE html> do not close it here
<Html>
<Head>
<Meta charset = "ntf-8">
<Title> This is the latest html5 Writing Method </title>
</Head>
</Html>
This method is much simpler than the previous html5 method. <! -- Note --> This is very useful. the readability of the document depends on whether your comment is written. The title tag is very useful, mainly close to seo, in the future, I will share more seo knowledge with you. Remember to share it, that is, my level is the same as yours, haha. Here is a small promotion of my Sina Blog address: http://blog.sina.com.cn/u/3753799240 all the tutorials will be published here.
Next, let's write a short code for analysis,
First of all, you must add a text below the title to a figure. You must first write the semantic structure. First, do not take it easy to understand. First, express the content, the normal practice is to write out the tags that need to be used first,
<H1>
<! 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">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> untitled document </title>
</Head>
<Body> <! -- Subject content start -->
<H1> This is a small test <P> share knowledge I am happy, hope everyone make progress together, my blog address: http://blog.sina.com.cn/u/3753799240 </p>
<! -- This is an image reference -->
</Body> <! -- Subject content ends -->
</Html>
Here we need to introduce a new word called document stream, which means that html will flow from the top of the page to the bottom of the page according to the order in which they appear in the tag. This method is very practical. css is the effect we need to make it show special results.
Display of all html elements (block-level and intra-row conversion can be implemented) is block inline. Only table labels are special and have their own display. Remember, when writing code, you must first ask whether the labels you use are block-level or intra-row. In this way, you can better combine them with css. Let's take a look at a code example.
<! 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">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> untitled document </title>
</Head>
<Body> <! -- Subject content start -->
<H1> This is a small test <P> share knowledge I am happy, hope everyone can make progress together, my blog address: <a href = "http://blog.sina.com.cn/u/3753799240"> Please click </a> </p>
<H2> This is a small test <P> share knowledge I am happy, hope everyone can make progress together, my blog address: <a href = "http://blog.sina.com.cn/u/3753799240"> Please click </a> </p>
<H3> This is a small test <P> share knowledge I am happy, hope everyone can make progress together, my blog address: <a href = "http://blog.sina.com.cn/u/3753799240"> Please click </a> </p>
<H4> This is a small test <P> share knowledge I am happy, hope everyone can make progress together, my blog address: <a href = "http://blog.sina.com.cn/u/3753799240"> Please click </a> </p>
<H5> This is a small test <P> share knowledge I am happy, hope everyone can make progress together, my blog address: <a href = "http://blog.sina.com.cn/u/3753799240"> Please click </a> </p>
</Body>
</Html>
Check if every element occupies a line, right? You can test the code in dr.
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
