Simple use of HTML markup Language and CSS styles (nineteenth day)

Source: Internet
Author: User
Tags border color define definition html form

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)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.