Front-end--1, HTML basics

Source: Internet
Author: User
Tags element groups tag name

Web Services

The HTTP protocol in the application layer is responsible for data transfer and parsing.
In the upper socket, when transmitting HTTP data with the socket, it is necessary to declare at the beginning of the message that the HTTP protocol/corresponding HTTP version status code status code means \r\n\r\n The real string content.

What is HTML

Hypertext Markup Language, is a markup language that marks sections of a Web page to be displayed. A set of browser-aware rules.
The browser renders the page code file sequentially, interpreting and displaying the content based on the marker. There may be differences in the label interpretations for different browsers.

Static Web page File extension:. html. htm. js ...
Use tag tags to set the display of the Web page as

Structure of the HTML code file

<! DOCTYPE html> #让浏览器知道用哪种HTML来解析它. #开头标记, there is a corresponding marker at the end. Tells the browser that it is an HTML document.?

HTML tag format
    • Keywords are bracketed <> wrapped.
    • Usually in pairs appear, such as start tag , end tag. Some simple labels can be called self-closing and tags,
    • Case insensitive
    • You can have several properties, or no attributes.
    • Tags can be nested inside labels, but not cross-nested.
Syntax for Tags:

< Tag Name Property 1 = "Property value 1" Property 2 = "Property value 2" ......> content section </tag name >
< Tag Name property = "Property value 1" Property 2 = "Property value 2" .../>

Common label <! Doctype>

Write with the document before the front,Role: Declares the type of resolution of the document. Avoid the spooky mode of the browser.

Resolving types
    • Backcompat weird mode, browser parsing rendering in its own way
    • Css1compat Standard mode. Browser uses the standard to parse rendering

If not written, the default is Backcompat

Provides meta-information about the page, descriptions and keywords for search engine and update frequency.
is located at the head of the document and does not contain any content.
The information provided is not visible to the user

Properties of the META tag

    • The Http-equiv property is equivalent to the HTTP file header, and you want the browser to return some information to help correct the display of the page content, with the corresponding property value as content. Example:
<meta http-equiv="Refresh" content="2;URL=https://www.oldboy.com"> //(注意后面的引号,分别在秒数的前面和网址的后面) <meta http-equiv="content-Type" charset=UTF8"> <meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" /> 
    • The name attribute describes the Web page, and the corresponding property value is content (to facilitate search engines to find and classify information)
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> <meta name="description" content="培训机构是由一群很人创建的">
<title>

Web page Label Signature

<link>

Link some pictures to tags, etc.

<script>

???

<body>

The difference between a block-level element and an in-line element is that the so-called block element is the element that begins to render on another line, and the inline element does not need another row. If you insert these two elements separately in a Web page, you will not have any effect on the page.
These two elements are specifically designed to define a CSS style.

Block-level labels
    • Paragraph label, with a space between the top and bottom of the line after wrapping


    • Line break
    • Horizon
Inline label
      • Text Bold
    • <strike> add a middle line to the text
    • Lower corner, top corner mark
Special characters
&lt; &gt;&quot;&copy;&reg;
<div>

Block-level elements, and there is no practical meaning. It is mainly given a different performance by CSS styles.

<span>

inline rows (inline elements) have no practical meaning, and are mainly given different performances by CSS styles.

Picture label

src: 要显示图片的路径.alt: 图片没有加载成功时的提示.title: 鼠标悬浮时的提示信息.width: 图片的宽height:图片的高 (宽高两个属性只用一个会自动等比缩放.)
<a> </a>

Hyperlink label
A link from a Web page to a target, which can be another page, a different location on the same page, a picture, an e-mail address, a file, or even an application

Note: The URL address is made up of 4 parts
The 1th part: for agreement: HTTP//, ftp://, etc.
Part 2nd: For the site address: can be a domain name or IP address
Part 3rd: Directories for pages in the site: Stu
Part 4: For page names, such as index.html
Each part is separated by a "/" symbol.

<a href="" target="_blank" >click</a>href属性指定目标网页地址。该地址可以有几种类型:  绝对 URL - 指向另一个站点(比如 href="http://www.jd.com) 相对 URL - 指当前站点中确切的路径(href="index.htm") 锚 URL - 指向页面中的锚(href="#top")
List label
<ul>: 无序列表 [type属性:disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)]<ol>: 有序列表 <li>:列表中的每一项.<dl> 定义列表 <dt> 列表标题 <dd> 列表项
<table>

A table is a two-dimensional data space, a table consists of several rows, a row and a number of cells, cells can contain text, lists, patterns, forms, digital symbols, preset text and other tables and other content.
The most important purpose of the table is to display the table class data. Tabular data refers to data that best fits into a tabular format, which is organized by rows and columns.

Basic structure
<table> <tr> <th> title <th> # first column, Th<th> title <th> </tr> <tr> <td>< Span class= "Zh-hans" > content </td> <td>  content </td> </tr></TABLE>            
<tr>: table row<th>: table head cell<td>: table data cell属性: border: 表格边框. cellpadding: 内边距 cellspacing: 外边距. width: 像素 百分比.(最好通过css来设置长宽) rowspan: 单元格竖跨多少行 colspan: 单元格横跨多少列(即合并单元格)
Form Labels <from>

Used to transfer data to the server, enabling users to interact with the Web server

Can include input series tags, such as text fields, checkboxes, radio boxes, submit buttons, and so on.

You can also include labels such as textarea, select, FieldSet, and label.

Form Properties
    • Action: Which address the form submits to, the program should have the corresponding receive form data and processing mechanism,
    • Method: How the form is submitted post/get default value is get
Form elements

HTML forms are a more complex part of HTML elements, and forms are often combined with features such as scripting, dynamic pages, and data processing, so it's important to make dynamic Web sites.

Forms are generally used to collect user input information.
How a form works: When a visitor browses a page with a form, they can fill in the necessary information and then press a button to submit it. This information is transmitted over the Internet to the server.
This data is processed by a specialized program on the server and returns an error message if there is an error and requires that the error be corrected. When the data is complete and correct, the server feeds back an input completion information

<input> tags

Type

type:text  text input box  Pass Word  password input box radio  radio box checkbox  Multi marquee submit  submit button button  button ( need to cooperate with js use.) button submission: Form form needs to add attribute Enctype= upload files Note two: 1  request must be post 2 enctype= "Multipart/form-data"      

Property

 NameThe key of the form submission item.           Note and IDThe difference between attributes: Nameproperty is the name used when communicating with the server;and the IDproperty is the name used by the browser side, which is primarily designed to facilitate client programming, while the CSSand JavaScriptValue used in:The value of the form submission item.For different input types, the valueThe use of attributes is also different:type="button", "reset", "submit"- defines the displayed text on the button type="text", "password", "hidden" - define the initial value of the input field type="checkbox", "Radio", "image"- defines the value associated with the input Checked:radio and checkbox readonly is selected by default: read-only. Text and passworddisabled: works well for the input used .      
Select Label
<select> 下拉选标签属性          name:表单提交项的键.          size:选项个数 multiple:multiple <optgroup>为每一项加上分组 <option> 下拉选中的每一项 属性: value:表单提交项的值.  selected: selected下拉选默认被选中
<textarea> Multi-line text box
<form id= "Form1" name= "Form1" method= "post" action= <textarea cols= "width" rows=  "height" name=< Span class= "Zh-hans" > "name" >  default content </ Textarea></FORM>       
<label> tags

Define the:<label> label to define the callout (tag) for the INPUT element.
Description: The 1 Label element does not present any special effects to the user. 2 The For property value of the <label> tag should be the same as the id attribute value of the related element.

<FormMethod="POST"action="" ><label for= " Username "> user name </ label> <input type= "Text" name= "Username" id= "Username" size= "20"/></FORM>          
<fieldset> tags

The FIELDSET element groups related elements within a form.

<fieldset> tags Package a portion of the form's content to generate a field for a set of related forms.  

When a set of form elements is placed inside the <fieldset> tag, the browser displays them in a special way, they may have special boundaries, 3D effects, or even create a sub-form to process the elements.

The <fieldset> tag does not have a required or unique attribute. The <legend> tag defines the caption for the fieldset element.

All of the global properties contained
    • Disabled HTML5 If you set this bool Value property, it will also inherit this property after it represents a single control element, with the exception of its first optional legend element, for example, to disallow editing. The element and its child elements will not accept any browser events, such as clicks or focus events, and the browser will generally display such elements in gray.
    • Form HTML5 Specifies the form that the fieldset belongs to. The value of this property is the same as the ID of the form to which it belongs. The default value is the most recent form.
    • Name HTML5 control element grouping names
<fieldset> << Span class= "Hljs-name" >legend> login bar </ legend>  Enter login information, Bora Bora ... <input type=  "text" ></FIELDSET> 

Span style= "font-size:18px" > front-end learning site
< Span class= "Hljs-name" > < Span class= "Hljs-tag" > recommended :https://developer.mozilla.org/en-US/

Front-end--1, HTML basics

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.