Take you to get started with HTML+CSS web design, ideas for writing web code
This article mainly explains the function and meaning of these codes in detail, as well as the format and ideas of writing web page codes.
Below I paste the html code:
<!--HTML-->
<div>
<h2>这是我的第一个网页</h2>
<p>BODY标签表示网页主体元素的容器，它包含了网页所有的html标签如：文本、图片、列表等等。以后我们编写的网页标签都需要放在这里面，这里我写了一段文字，它就会在浏览器里显示出来。这些就构成了我们网页的基本格式，大家也不需要去背，知道表示什么意思就行，需要的时候直接拿来用。</p>
<p><img src="https://tpt360.com/tuimg/yan.png"></p>
</div>
It can be found from the code that all tag content is contained by a div tag. Div is a combined block-level element, which is often used to distinguish different areas or modules. It can be independent, divisible, and it has automatic line wrapping property, but you can define styles or layouts for it by using css.
h2 belongs to the title tag, which can be customized from h1 to h6. It can be used for the title of a general web page or what needs to be emphasized. The p tag indicates a paragraph or a text introduction. The img tag indicates an image on the page. You can directly import the image address , note that it is a single token.
Then knowing the meaning of these tags, we can define the css style for this html code according to our actual needs,
First of all, I want to limit a height and width to the whole area, then we should write like this:
If you want to add other styles, you can continue to define, such as: add a background color, add an inner or outer margin.
div {
width: 300px; /*这里给个300像素的宽度*/
background: #f2f2f2; /*这里给一个灰色的背景*/
padding: 20px; /*这里给一个20像素的内边距*/
margin: 20px; /*这里给一个20像素的外边距*/
}
Note: The inner margin means that an independent block or label expands the distance to the inside, and the outer margin means the distance to expand to the outside. It is easy for new students to confuse here.
Next we define the title, the title is relatively simple, for example, give it a size of 20 pixels, the title color is red, and it needs to be centered, then it should be written like this:
h2 {
font-size: 20px; /*这里给个20像素的字体大小*/
color: #ff0000; /*这里给一个红色的字体颜色*/
text-align: center; /*让它居中*/
}
The text introduction is similar to the title, but the font is smaller. Note that you need to define a line height for the paragraphs and adjust the interval between paragraphs.
p {
font-size: 14px; /*这里给个14像素的字体大小*/
color: #333; /*这里给一个黑色的字体颜色*/
line-height: 24px; /*这里给一个24像素的行高*/
}
In the end, the picture is even simpler, let it adapt to the width directly, follow the div, and set a 100%.
img {
width: 100%;
}
A simple web page code and design ideas are completed in this way. If you understand the function and meaning of these codes, then congratulations, you are basically getting started, because all web page codes are basically written according to this format and idea . The next article will continue to introduce other commonly used html+css tags and practical demonstrations, thank you for watching! ! !