Home > Developer > Web Develop
HTML tags can set properties, which are typically written in the start tag in the form of key-value pairs. Such as
<DivID= "I1">This is a div tag</Div><Pclass= ' P1P2 P3 '>This is a paragraph label</P><ahref= "Http://www.luffycity.com">This is a link</a><inputtype= ' button 'onclick= ' AddClick () '></input>Why is it possible to set properties?
In fact, you can simply understand, because eventually we will be the tags through the CSS to beautify, through JavaScript to manipulate, then these tags we can be regarded as an object, the object should have its own properties and methods. So you like the input tag above, type= ' button ' is its property, onclick= ' AddClick () ' is its method. JavaScript and CSS will be detailed later, so you don't have to worry about understanding it.
Considerations for Label Properties:2. Label classification1.HTML标签除一些特定属性外可以设置自定义属性，一个标签可以设置多个属性用空格分隔，多个属性不区分先后顺序。2.属性值要用引号包裹起来，通常使用双引号也可以单引号。3.属性和属性值不区分大小写，但是推荐使用小写。
There are three different types of tag elements in HTML: block elements, inline elements, and inline block elements.
(1) block-level element features: Display:block;
1. Each block-level element starts with a new line, and the subsequent element also begins a row. Exclusive row
2, the height of the element, width, row height, and the top and bottom margin can be set.
3, the element width is not set, is its own parent container of 100% (and the width of the parent element consistent), unless a width is set.
(2) in-line element characteristics: display:inline;
1, and other elements are on one line;
2, the height of the element, the width and the top and bottom margin is not set;
3. The width of the element is the width of the text or Picture it contains, and it cannot be changed.
(3) The characteristics of the block elements in the line: Display:inline-block;
1, and other elements are on one line;
2, the height of the element, width, row height, and the top and bottom margin can be set
AttentionWe can use the display property to convert block-level elements, inline elements, inline block elements, and prepare for the subsequent page layout.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Label classification</title></Head><Body> <Divclass= "wrapper"> <!--block-level elements: Div p H1~H6 ol ul table Form Li 1. Exclusive Line 2. You can set the width and height, if the width and height are set, the width is the current width, and if the width and height are not set, the widths are the parent box The width of the child, the height is filled according to content - <Divclass= "Left">This is the battlefield of the Luffy learning city.<Div>this is my area.<!--<div style= "width:500px;height:100px" > This is my hobby </div> - <ul> <Li> <H2>Smokes</H2> </Li> <Li> <ol> <Li>Drink</Li> <Li>Perm</Li> </ol> </Li> </ul> </Div> </Div> <Divclass= "Right"> <!--a span br i em strong label inline element: displayed on one line, cannot set width and height, width and height are filled according to content - <ahref="#"style= "width:200px;height:100px">Baidu</a> <ahref="#">Luffy</a> <spanstyle= "width:100px;height:200px">Some text</span> <span>Some text</span> </Div> <Divclass= "Inline-block"> <!--Inline block: 1. Show in one line 2. Wide height can be set - <imgsrc= "./homesmall.png"alt= "one picture"> <inputtype= "text"name= "username"style= "width:200px;height:50px"> </Div> <!--tag nested rule block elements can contain inline elements or some block elements, but inline elements cannot contain block elements, it can only contain other inline elements there are several special block-level elements that can contain only inline elements, and no longer contain block-level elements, these special tags are h1~h6 p - </Div> </Body></HTML>3. Tag Nesting rules
Block elements can contain inline elements or some block elements, but inline elements cannot contain block elements, which can contain only other inline elements, such as:
6-[html]-Tag Properties
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
