I used to be inspired to keep track of what I learned every day, but after a few days, I felt I couldn't keep up. . . . In the past few days, I thought about it carefully and felt that if I could n’t persist, I had to persist, because I was responsible for myself, so I had to learn to force myself to do it, and only then could I do one thing to the end. . . . . . Summarize what you have learned today.
theory:
HTML (Hyper Text Markup Language)
HTML documents = web pages HTML tags (not case sensitive) (some capitalization is automatically generated) Pages include "format tags" and "page content" Web page file format: .html or .htm HTML is a universal language (as long as there is Browser and Notepad) • Tools used: Notepad, NotePad ++, EditPlus, ... Three Musketeers (DreamWeaver, FireWorks, Flash) FrontPage HTML basic tags:? HTML basic structure <html> </ html>? Paragraph tags > </ p>? Space tags & nbsp? Title tags <h #>: # = 1 ~ 6? Picture tags <img src = “…” />? Comment tags <!-->? Title tags <h # > </ h #> HTML horizontal lines <hr />? HTML line breaks <br />? Special symbols in HTML> (& gt), <(& lt), & (& amp), white space (& nbsp)
HTML element
? HTML basic block? HTML element? HTML elements have beginnings and ends? HTML can be nested? HTML uses lowercase HTML attributes? Express the characteristics of each tag src in <img> is an attribute? The attributes are in the form of "attribute name = value" The value of the attribute is recommended to be enclosed in quotation marks. The attribute is recommended to be enclosed in the form of key-value pairs. A tag can have multiple attributes, separated by spaces. * Attributes of HTML images Picture content) border property (width of the outer frame of the picture, default pixels) width property height property * ruler line common properties <hr /> size, width, align (left, right, center), noshade, color * HTML font ——Client font attribute? The size attribute of <font> is 1 ~ 7 * HTML font—Physical font attribute? <B> Define bold text? <I> Define Italian italics? <Tt> Define typewriter text (Same width)? <U> Define underlined text? <Sup>, <sub> Define superscript and subscript? <S> Define strikethrough text * HTML font-logical font attributes?? <Em> Define emphasized text? < strong> Define emphasized text? <code> Define computer code This? <Samp> Define computer code samples? <Kbd> Define keyboard text? <Var> Define variable parts of text? <Dfn> Define definition items? <Cite> Define citation? <Small> Define small text? <big> Define large text. Pre-formatted text? Pre-formatted text: <pre> </ pre> Spaces and line breaks are usually reserved. The text is rendered in a monospaced font. A common application is to use computer code with <code> To get more precise semantics? Tab (default 4 spaces, some default 8 spaces) is not recommended (compatibility issues) Example: marquee tag (used to show the movement of elements) direction property, set the direction left, right, down, up? behavior attributes, set the mode of scroll, alter, and slide HTML links? HTML uses hyperlinks to connect to another document? a tag? Syntax <a href="URL"> ... </a> (URL can be seen as Address) For example: <a href="http://www.baidu.com"> 百度 </a> <br />? The link can be a word, a word or a sentence, or a picture? There are two ways to link to another document <a href = "MyFirst HTML.htm "> Jump to a specified web page </a> Jump to a specified place
<a name="above" href="#below"> skip below </a>
<a name="below" href="#above"> jump to the top </a> HTML background? text attribute (the color of the text) link attribute (the color of the connection)? alink attribute (the color of the connection when the active click) ? vlink attribute (visited color after clicking)? bgcolor attribute (background color)? background attribute (background image, tile) HTML list? Unordered list unorder (dot) (<ul> <li> First </ li> <li> Second </ li> </ ul>)? square (circle) circle (small circle) disk (small dot)? ordered list (number) (<ol> <li> first Each </ li> <li> second </ li> </ ol>)? Change by the type attribute? Custom list? <Dl> item number, explain <dt> c # </ dt> <dd> very Basic content </ dd> </ dl> HTML table usage and related attributes In HTML documents, tables are widely used to store text and images on web pages for layout syntax:
<table border = “1”>
<tr>
<td> Cell content </ td>
</ tr>
<tr>
...
</ table>
Tables that span columns (merge columns), use the colspan attribute to achieve
Cross-row (merge rows) tables, using the rowspan attribute to achieve
Attributes:
bgcolor table background color
border border width, default 0
bordercolor border color
bordercolorlight color of the bright part of the border
bordercolordark The color of the dim part of the border
cellspacing
cellpadding The amount of space between the cell border and the content
width width pixels or percentage
height height pixels or percentage
HTML form
HTML forms are used to collect user input
HTML forms are expanded in a pair of form tags
Common attributes of <form>
action indicates the target server of the submission
method get, post
get (default, submit as url, that is, submit as address bar)
post (submit by message)
Basic elements of the form
Form's basic tags
Text box tag <input type = "text" />
? Password box tag <input type = "password" value = "" maxlength = "" /> maxlength character length
Text field tag <textarea> content </ textarea> attributes rows and cols
? Submit button tag <input type = "submit" name = "btn" value = "Submit" />? Reset button tag <input type = “reset” /> (Reset, you can add value) Button tag <input type = "button" value = "button" onclick = "alert ('Don't mess with pressing')" />? image tag <input type = “image” />
Checkbox label (to be submitted with name) <input type = “checkbox” name = ”ch1” value = ”chone” checked = ”checked” /> text
? Radio button check <input type = “radio” /> input type = ”radio” name = “ra1” value = “raOne” checked = “checked” /> male (default checked = “checked”)? File selection Tag <input type = “file” />? List tag
<select> (name must be added here to submit)
<option> </ option> (Items)
</ select>
Section label: <div> </ div> or <span> </ span> (how long the character is, it takes up as much as possible)
Frame group: cannot have <body> </ body>
CSS styles (cascading style sheets)
Including: inline style, inline style, class style, id style, create .css style file
Practical operation: (Simply give a few examples)
1. Use of marquee tags
effect:
2. Use of image tags
3. Use of forms Effect: 4. Use of forms
<body>
<form>
<h1> Guimei Website Member Login </ h1> <br /> <br />
<label> Email of Guimei website: </ label> <input type = "email" name = "email" /> <br /> <br />
<label> Input password: </ label> <input type = "password" name = "pwd" maxlength = "6" /> <br /> <br />
<label> Enter the password again: </ label> <input type = "password" name = "apwd" maxlength = "6" /> <br /> <br />
<input type = "radio" name = "release" checked /> Deluxe version <input type = "radio" name = "release" /> Concise version <br /> <br /> <!-checked means that it is currently selected ->
<input type = "checkbox" name = "login" /> Auto login <input type = "checkbox" name = "login" /> Secure login <br /> <br />
<input type = "reset" value = "Reset" name = "no" /> <input type = "submit" value = "Login" name = "ok" /> <br /> <br />
<input type = "submit" style = "background-color: orange; font-size: x-large; color: white" value = "Register now" name = "register" />
</ form>
</ body>
running result:
Use of the framework group:
running result:
Use of CSS styles
Style sheet:
Create a new style sheet,
Alright, let's write here today. I hope I can continue tomorrow. Come on!
Simple use of HTML markup language and CSS styles (Nineteenth Day)
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
