Home > Developer > Web Develop
Hypertext Markup Language, a language, is also the main language that constitutes a Web document. Defines the basic tags and elements, the browser can identify the label, and reasonable display, HTML is responsible for the structure of the page.
One point: Structure, markup, element, link, pathBasic structure: Non-strict HTML
- As can be seen from the above, there are the following features:
html, head, title, body, h1, p，a, img, hr, em, strongAll are basic tokens, which are symbolizing by these tags and the browser.- element = start Tag + content + END tag, the main function of HTML is to define these elements to communicate with the browser.
- A single space, multiple spaces, and line breaks between text content, which becomes a single space when displayed
Two structures: structure, tag, element, link, path
Basic content:
a.内联元素，q(quote引用"")的使用b.块元素，blockquote的使用注意：结合`<p>...</p>`才能将引用块独立起来！！！c.空元素独个换行，与`</p>...<p>`的区别。
Introduce the concept: inline elements--belong to the element, the position is generally in the middle of the text, with the flow, there is a, IMG, q, Strong, code, BR, HR, etc. block elements-except inline elements, the others are block elements.
HTML list: Ordered, unordered, and custom lists:
a.有序列表： <ol> <li>...</li> ... </ol>b.无序列表：ol改为ulc.自定义列表：
Elements
1.<style> style elements, <style type= ' text/css ' >...</style> #type属性2. <a>,<a href= ' xxx.html ' > The context would be a linking</a> #href属性, hyper reference hyperlink 3. #img元素的src属性 display alt message as reminder 4.<q> when the picture cannot be displayed, double quotation marks for reference, <q>to is or not to be</q>5.< Blockquote>, a reference to a large paragraph is,<blockquote>......</blockquote> #说明, blockquote is a block element, it automatically has a line break before and after it, and q is an inline element (online). Flowing in the text. #块元素特立独行, inline elements Drift 6.<br>, independent of a line of action 7.</code>,</em>,</address>,</strong>,
- Strict HTML 4.01 of the basic specifications, from the element perspective, the block elements of each separate, divided the more open the better, as follows:
- HTML, head, body most basic mark must be few;
- Title,style label roll in head;
- The body is filled with p,blockquote,h1 elements with content;
- Block elements must never be in P.
- Only block elements in a blcokquote
- Inline elements nest with each other be careful!
- XHTML 1.0 probably has some additional modifications on the basis of HTML4.01, such as:
- Change the doctype to strict XHTML1.0;
- Add xmlns, lang attributes to the element;
- All empty tags end with
/>
, not >
, such as
- Description, here only as an introduction. Now ignore it.
CssCascading style sheet, cascading style sheets, cascading means that an element is appended to a number of styles, for an element, if a property in the style sheet has overlapping parts, such as the P element, the previous style sheet color=‘red‘ , and later the style sheet is also defined color=‘maroon‘ , Then the previous style will be overwritten later. Style sheet, is one of our. css files, which integrates all of our styles.
For example, HTML is responsible for the structure of the Web page, like a house, where head is the roof, body is the room, CSS is responsible for decoration, we take out a room to decorate, or simply a curtain element
to color=‘marron‘ decorate the property.
In the most basic usage, adding a STYLE element to the head, and putting all the styles in it, has obvious drawbacks:
<!DOCTYPE html>
The shortcomings are obvious, 1.css interspersed into the HTML, not conducive to the division of work; 2. Complex CSS style added, affecting the reading of HTML, 3.CSS style is not high, the best way is independent, linked to HTML, easy to unify style and management changes.
- The Inheritance property, which is similar to the Cascade meaning, is that an element can inherit the property assignment of the parent class.
- The custom element class . HTML defines a subset of the element classes, but also does not meet all our requirements, this time, the evolution version of XHTML came out, you can customize the element class, see below.
A Web page, different p elements need different attributes, this time, the advantages of the custom class comes out.
index.html 文件
Common Properties:
1.background-color :元素背景颜色；2.background-image：url(photo/background.gif);2.color： 文本元素颜色；3.font-family: 文本字体样式；4.font-size: 文本字体大小 170%，1.6em;5.font-weight: 文字粗细；6.line-height: 文字行间距；7.letter-spacing： 字母之间 的 距 离；8.border：元素周围边框 1px solid black;9.margin: 元素周边的空白；10.padding： 补白；
- Detailed description of font style, color, etc.
- font-family: Font, font style, such as Arial;
body {font-family: Verdana, Arial, sans-serif;}
- Font-size: Font size; The browser defaults to 16px size. Generally have em,%, px, keyword (small,medium) three kinds of expression. Expand it.
h1-200%,h2-150%, h3-120%
- Font-weight: Font weight;
有lighter， normal， bold, bolder
- Text-decoration: Other styles;
有none, underline, overline, line-through, blink
- Font-style: Font style;
如 italic, oblique,
- Line-height:1.6em;
- Font Color:
- Color name to define, 16 colors.
如 blue，red...
- Expressed in RGB scale,
color: rgb(80%,20%,50%); or background-color: rgb(250,200,0); so on.
- The hexadecimal code defines the color,
如#cc6600;分别是红绿蓝，每种颜色两个代码。
Box modeThe box model, in the view of CSS, sees every single element as a box. A box has a content area, a filler, a border, and a border of four main areas. The function of the box is to change the default layout of the browser! There is also a background image setting. This is basically the five of the content.
. Guarantee {/* border */border-color:black; border-width:1px; border-style:dashed; Border-right-width:thick; Background-color: #a7cece; /* Filler default order is upper right bottom left */padding:25px; padding-left:80px; /* Border margin*/margin:20px; margin-right:35px; /* Background picture */Background-image:url (photo/1.gif); Background-repeat:repeat; Background-position:center; }
- The focus is on understanding the concept of box patterns, and ultimately on the setting of specific properties.
- With the id attribute in this chapter, remember
<a id=‘python‘> Book:python </a> to add a target anchor? Now another way to upgrade is to use it like a class <p id=‘footer‘>A example</p> , so that we can manipulate it in a style sheet with p#footer {...}或者 #footer{...} subtle differences from the normal class. Think about when the id attribute and class attribute are used better? (The id attribute is added to the P element, the effect is the same as the class, the difference is that the ID of the general object is a single, more specific from the ID can be seen from the use of the value, and class, the scope is large, we can define a class= ' example ' class in multiple places, So I can manipulate its properties together. ）
- Question, how is the width of the element calculated???
Div and SpanFor XHTML, <div> <span> The role of elements is very powerful. The former acts on the Block element, which acts on the inline element.
-
<div> is a container, simply put, can be loaded with a lot of block elements, such a <div> element is a large greatly greatly The block element of the , which is the logical part, we can define the div attribute to get the effect we want. Common properties are
HTML files: <div id= ' example ' > <p> ...
Note: Here, the id attribute appears again!!! Contact the front <p id= ' Example> and <p class= ' example '; distinguish.
The element div is ultimately a block element that comes with some certainty-to avoid the drawbacks of block elements (including wrapping lines and so on), a span element appears and is used for inline elements.
HTML文件：<ul> <li><span class="book">web开发 </span>, <span class="author">张三</li> <li><span class="book">大数据 </span>, <span class="author">李四</span></li> <li><span class="book">爬虫 </span>, <span class="author">老王</span></li></ul>#css文件：/*span元素使用*/ .book { font-style: italic; } .author { font-weight: bolder; }
Note: From span to div we can see that the function of the two is to set the properties of most objects and to change the properties in bulk
- Div and span comparisons:
- The former uses the id attribute, followed by the class attribute;
- The former is very powerful, the latter how to feel and inline elements em, strong similar;--mainly for batch processing.
Pseudo class, this book with a connection, before the click, is clicked, after the link color is not the same, the browser has its own set of default specifications, for the moment do not change it.
Typography and layout
- Stream , the browser uses a stream to decorate the XHTML elements on the page, and the browser starts at the beginning of the XHTML file and follows the flow of elements from beginning to end, and every element that it encounters, such as a block element, has a newline (there must be a newline between the two elements). Until the end. This is the flow.
- Drift, in the flow, our elements can drift. Float Property!!!
- Layout-Columns:
- Detailed procedures do not need to be listed, the author gave an example, is the column, left and right two columns. Try, fail, compare books and know the root of the problem-the author divides the BODY element into two div elements here.
- Here, the body content is divided into two div elements: Sidebar and Main, as seen from the page, the relative relationship of the two elements. Very different from before, now in CSS style sheet, the body's property value has a great change-the attribute type is reduced a lot. More is the attribute option is given to the two elements, which is also in line with its thinking: a long time must be divided, the time will be combined. It's a bit of a rip. In retrospect, in the beginning, we greedily put the body as a benchmark, which gives the majority of attributes. H1,p and other elements in the back overlay. What now??? In order to achieve the two-column effect we need, and split the body into two div elements, and the previous theory is inconsistent. In general, in order to achieve the goal, choose the most appropriate way!
- Clear attribute, keep it again, time is not enough!
- Auto gels, flow and freeze designs, float and absolute,
- Tables table, simple features caption,td, th, more complex merge cell styles.
Interactive work
- Form: A form is a page with a piece of input information area. When a form is submitted, the information in the form is packets to the Web server, which is processed by the Web application.
- Work with Forms: loading Web pages containing forms in a browser-input data-submit a Submit form-server response.
Several types of forms:
<form action= ' next operation, common is a processing method or a URL ' method= ' POST ' ><p> email: <input type= "text" name= "email"/> < ;br> Password: <input type= "password" name= "password" > <br> <input type= "Submit" value= "Confirm" ></p> <p> is it an email? <br> <input type= "Radio" name= "itrable" value= "yes" checked= ""/> Package mail <br> <input type= "Radio" Nam E= "itrable" value= "no" > Non-mailed <br> <input type= "Submit" value= "OK."/> </p><p> seasoning selection (optional Species):<br> <input type= "checkbox" name= "Flavor" value= "one" checked= ""/> Chili <br> <input type= "checkb Ox "name=" flavor "value="/> Garlic <br> <input type= "checkbox" name= "Flavor" value= "$"/> Onion <br> <input type= "Submit" value= "OK." ></p><p> Giveaway (Choose a giveaway):<br> <select name= "gift" > <option value= "one" > Socks </optio n> <option value= "> Tissue </option> <option value=" "> Gift bag </option> </select></p><p> Write your suggestions, we will serve you wholeheartedly: <br><textarea name= "Doc" rows= "ten" cols= ">...</textarea></p>"
Note the points:
- The Name property can be assigned to each form element, representing the variable name. However, for submit, name does not need to be added.
- The Value property is to be aware that the essence represents the values of the above variables. The normal single text box does not have the Value property added, and it is available for radio, multiple, and select.
- In single-selection, multiple-select, and select, name represents a variable name that is consistent, and name is a variable, instead of a committed value packet. 3/1/2018 11:41:03 AM Increasing
- On top of that, name is the same as the variable name, and the goal is to reduce the number of variables by implementing an interactive public premise.
- Change the form's method to get, click the Submit button to see the information entered by the user in the URL of the address bar-clear text transmission.
12/5/2017 1:37:27 PM
<label for=‘ ‘>Labels are labeled with their associated input elements, and their for property and INPUT element's ID attribute should be the same. itself does not render the display, and when you click on the text within the label element, the browser will focus on the corresponding form control. Here, it is the INPUT element. 3/1/2018 2:11:34 PM
#上例代码<form><label for="male">Male</label><input type="radio" name="sex" id="male" /><br /><label for="female">Female</label><input type="radio" name="sex" id="female" /></form>
"Head first Html,css and XHTML" _ Continuous Update
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
