HTML---web Programming (1)
Last Update:2016-05-22
Source: Internet
Author: User
<span id="Label3"></p>Objective<p><p>HTML needs and CSS and JS together, in order to withdraw the Powerful.<br>so, I learned html. Best to learn css and JS (JavaScript)</p></p>☆ static pages and dynamic pages<p><p>Site pages are divided into static pages and dynamic pages of two<br>? Static page: There is an HTML page file saved on the server, the browser to this page when the server will send this page file to the browser;<br>? Dynamic Page: The server does not have the browser to look at the page, but the server dynamically generated HTML page sent to browsers, Dynamic language server side can be written in C #, vb.net, PHP, Java, C and so On.</p></p>☆html Learning Requirements<p><p>Mastering the ability of handwritten HTML to achieve general difficulty in Web pages (such as website registration Forms) lays the groundwork for Javaweb Learning. Stick to handwritten html.<br>Do not focus on how to make the interface, formal companies have a dedicated page art, irregular companies are stealing other people's art page, whether it is stealing other people's pages, or using the Company's art developed pages, for developers to do "fill the template" work is the Same.</p></p>☆ Instructions for authoring Web pages in HTML language<p><p>Web pages can be authored in Hypertext Markup Language (HTML), which allows you to mix regular text with some of the tags used to describe text. The main features of these tags are the display appearance, layout, and body description of the text in the Web.<br>When doing web pages, experienced programmers often take two steps: first use some of the most commonly used Web authoring tools to prototype Web pages, and then modify their HTML Code. HTML code is not case-sensitive, as long as any editor that can edit the text can be used to write HTML Code.</p></p><p><p>Writing plain HTML pages is irrelevant to any background language, and can be written using the tools of dreamweaver, Expression Web (frontpage's makeover), which are used for page art, It's enough for developers to write HTML code directly with Eclipse.</p></p>HTML overview<p><p>HTML is the abbreviation for Hyper Text Markup language, which means "hypertext identity language", which is actually a programming language specifically designed to write web Pages. Most Web pages are formed on the basis of HTML Statements.</p></p>Basic structure of the ☆html document<p><p></p></p><p><p>All pages should contain at least these parts, because the browser is highly tolerant, so even if it does not include the normal display, but it is best to write completely.</p></p>☆ How to write an HTML file<p><p>The HTML file is an ascii-formatted file. It can be edited in any editor that can edit the ASCII file (if the HTML file contains Chinese characters, it is edited in an editor that supports kanji).</p></p>Debugging of ☆html Files<pre class="prettyprint"><pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">html</span>></span> <span class="hljs-tag"><<span class="hljs-title">head</span>></span> <span class="hljs-tag"><<span class="hljs-title">title</span>></span>HTML概述<span class="hljs-tag"></<span class="hljs-title">title</span>></span> <span class="hljs-tag"></<span class="hljs-title">head</span>></span> <span class="hljs-tag"><<span class="hljs-title">body</span>></span> HTML Hello Wrold!!! 湖南城市学院。 <span class="hljs-tag"></<span class="hljs-title">body</span>></span><span class="hljs-tag"></<span class="hljs-title">html</span>></span></code></pre></pre><p><p>Open directly with the browser to check the results of the operation</p></p><p><p></p></p>☆ Overview:<p><p>◇ The first part is to add some auxiliary or attribute information to the HTML page, the content of it will be loaded First. The body part is where the page data is actually stored.<br>◇ Most tags have a start tag and an end tag, which have individual labels because only a single function, or no content to be decorated, can end within the Tag.<br>◇ want to be modified by the content of the label to enrich the operation, the use of the attributes in the tag, through the change in the value of the property, added more effect choice.<br>◇ A "=" connection between the attribute and the attribute value, the attribute value can be in double quotation marks or single quotes or without quotation marks, usually with double quotation marks. or the company stipulates written Specifications.</p></p>☆ Format:<p><p>< Tag Name Property name = ' attribute value ' > data content</p></p>☆ Operation Idea:<p><p>In order to manipulate the data, it is necessary to encapsulate the data in different labels and manipulate the encapsulated data through the attributes in the Tag.<br>The label is equivalent to a container. Manipulating the data in a container is a constant change in the Container's property Values.</p></p>Markup for HTML<p><p>☆ General characteristics of the mark<br>An HTML file consists of two main types of elements:<br>(1) Mark (2) The Action object (such as text, graphics, etc.)</p></p><p><p>☆ Common Mark</p></p><pre class="prettyprint"><code class=" hljs xml">1.<span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">html</span>></span></span>And<span class="hljs-tag"><span class="hljs-tag"></<span class="hljs-title">html</span>></span></span>2.<span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">head</span>></span></span>And<span class="hljs-tag"><span class="hljs-tag"></<span class="hljs-title">head</span>></span></span>3.<span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">title</span>></span></span>And<span class="hljs-tag"><span class="hljs-tag"></<span class="hljs-title">title</span>></span></span>4.<span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">body</span>></span></span>And<span class="hljs-tag"><span class="hljs-tag"></<span class="hljs-title">body</span>></span></span>5.<span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">hn</span>></span></span>And<span class="hljs-tag"><span class="hljs-tag"></<span class="hljs-title">hn</span>></span></span>6.<span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">br</span>></span></span>7.<span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">hr</span>></span></span>8.<span class="hljs-comment"><span class="hljs-comment"><!--this is a comment</span> --</span>(will not appear on the Page)</code></pre>Text decoration<p><p>A Web page is mostly composed of the following elements: text, pictures, tables, animations, and SOUNDS. In these elements, the text is very important. Let's talk about the tags that relate to the Text.</p></p>☆ Font Size<pre class="prettyprint"><pre class="prettyprint"><code class="hljs xml">1. <span class="hljs-tag"><<span class="hljs-title">small </span>; </span> and <span class="hljs-tag"></<span class="hljs-title">small </span>; </span> 2. <span class="hljs-tag"><<span class="hljs-title">big </span>; </span> and <span class="hljs-tag"></<span class="hljs-title">big </span>; </span> 3. <span class="hljs-tag"><<span class="hljs-title">font </span> <span class="hljs-attribute">size </span> =<span class="hljs-value">n </span>; </span> 4. <span class="hljs-tag"><<span class="hljs-title">basefont </span> <span class="hljs-attribute">size </span> =< Span class= "hljs-value" >n </span>; 5. <span class="hljs-tag"><<span class="hljs-title">sub </span>; </span> and <span class="hljs-tag"></<span class="hljs-title">sub </span>; </span> 6. <span class="hljs-tag"><<span class="hljs-title">sup </span>; </span> and <span class="hljs-tag"></<span class="hljs-title">sup </span>; </span> </code> </pre></pre><p><p>You can set the text size in several ways. however, when you set the text size, the effect is affected by the options in Ie.</p></p>☆ Font Style<pre class="prettyprint"><pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">b</span>></span>和<span class="hljs-tag"></<span class="hljs-title">b</span>></span><span class="hljs-tag"><<span class="hljs-title">I</span>></span>和<span class="hljs-tag"></<span class="hljs-title">I</span>></span><span class="hljs-tag"><<span class="hljs-title">u</span>></span>和<span class="hljs-tag"></<span class="hljs-title">u</span>></span> <span class="hljs-tag"><<span class="hljs-title">strike</span>></span>和<span class="hljs-tag"></<span class="hljs-title">strike</span>></span> 加删除线显示</code></pre></pre>☆ Special Mark<p><p>What if there are some HTML keywords in the page to output?</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs perl">代码中 网页中显示&<span class="hljs-keyword">lt</span>; < &<span class="hljs-keyword">gt</span>; > & &" “ ® ? © ?™ ? 空格 </code></pre></pre>List<p><p>A list is a way of arranging information in a structured manner. It displays the content horizontally, visually and clearly. It is also different from the table, and the General list is not Complex.</p></p>☆ List tags use a common format<pre class="prettyprint"><pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">标记</span>></span><span class="hljs-tag"><<span class="hljs-title">条目标记1</span>></span>条目内容1<span class="hljs-tag"><<span class="hljs-title">条目标记2</span>></span>条目内容2<span class="hljs-tag"><<span class="hljs-title">条目标记3</span>></span>条目内容3……<span class="hljs-tag"></<span class="hljs-title">标记</span>></span></code></pre></pre><p><p>Do not add a newline tag after "entry content"<br></p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">dl</span>></span>：列表<span class="hljs-tag"><<span class="hljs-title">dt</span>></span>：上层项目<span class="hljs-tag"><<span class="hljs-title">dd</span>></span> ：下层项目</code></pre></pre><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs xml">1.<span class="hljs-tag"><<span class="hljs-title">dir</span>></span>和<span class="hljs-tag"></<span class="hljs-title">dir</span>></span>2.<span class="hljs-tag"><<span class="hljs-title">menu</span>></span>和<span class="hljs-tag"></<span class="hljs-title">menu</span>></span>3.<span class="hljs-tag"><<span class="hljs-title">ul</span>></span>和<span class="hljs-tag"></<span class="hljs-title">ul</span>></span><span class="hljs-tag"><<span class="hljs-title">ol</span>></span>与<span class="hljs-tag"></<span class="hljs-title">ol</span>></span></code></pre></pre>☆ Two complex list of attributes can be labeled UL and OL<pre class="prettyprint"><code class=" hljs xml">3.<span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">ul</span>></span></span>And<span class="hljs-tag"><span class="hljs-tag"></<span class="hljs-title">ul</span>></span></span>This tag can take a property and become<span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">f</span>></span></span>, F has the following types: F is disc: the entry is guided by the symbol "". F is circle: the entry is guided with the symbol "0". F is square: the entry is guided with the symbol "". 4.<span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">ol</span>></span></span>And<span class="hljs-tag"><span class="hljs-tag"></<span class="hljs-title">ol</span>></span></span>This tag automatically sorts and adds an ordinal to the entry, with Attributes: 1)<span class="hljs-tag"><span class="hljs-tag">< <span class="hljs-attribute">ol</span> <span class="hljs-attribute">Type</span>=<span class="hljs-value">f</span>></span></span>F is a: in uppercase alphabetical order. such as A,b,c,d and so On. F is a: Sorts in lowercase letters. such as A,b,c,d and so On. F for I: Sorted in uppercase Roman Numerals. such as I,ii,iii,iv and so On. F for I: sorted in lowercase roman numerals. such as I,ii,iii,iv and so On. F is 1: sorted by Arabic numerals. such as 1,2,3,4 and so On. 2)<span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">ol</span> <span class="hljs-attribute">Start</span>=<span class="hljs-value">n</span>></span></span>N is a number that represents the redefined starting Number.</code></pre>Table<p><p>The use of the table basic can achieve the page elements in the browser arbitrary layout positioning. Tables are often used to display a large number of classified information, with a clear and unambiguous character, and are widely used.<br>The table is generally composed of the following Parts: table name, table column and table Data.</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs lua"><<span class="hljs-built_in">table</span>></<span class="hljs-built_in">table</span>></code></pre></pre><p><p>This is a pair of tags that indicate the scope of the table, in the following format:</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs lua"><<span class="hljs-built_in">table</span>> 表格全部内容</<span class="hljs-built_in">table</span>></code></pre></pre><p><p>Border Properties:</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs xml">使用表格的这一属性可以给表格加上框线。如<span class="hljs-tag"><<span class="hljs-title">table</span> <span class="hljs-attribute">border</span>></span>表示表格是有表格线的，border的线宽默认为1。没有写border则表示表格是没有表格线的。一般用<span class="hljs-tag"><<span class="hljs-title">table</span> <span class="hljs-attribute">border</span>=<span class="hljs-value">n</span>></span>来设置“有线表格”和边框宽度。n是一个具体的数字，用来指定宽度的大小，单位是“像素”，默认为没有边框。当n为0时，也没有边框。</code></pre></pre><p><p>Width property:</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs xml">这一属性可以用来设置“有线表格”占整个页面的相对宽度，写法为<span class="hljs-tag"><<span class="hljs-title">table</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">n</span>></span>。n是一个具体的数字，可以是一个百分数（如100%），也可以是一个具体的数值，单位是像素（如80，表示表格占80个像素单位的宽度）。</code></pre></pre><p><p>Height property:</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs xml">这一属性可以用来设置“有线表格”占整个页面的相对高度。其用法与<span class="hljs-tag"><<span class="hljs-title">table</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">n</span>></span>相似。使用相对方式来设置表格大小时，浏览器窗口大小的变化会影响到表格大小的变化。</code></pre></pre><p><p>CellSpacing Properties:</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs xml">这一属性可以用来设置有线表格的单元格线的宽度，用法为<span class="hljs-tag"><<span class="hljs-title">table</span> <span class="hljs-attribute">cellspacing</span>=<span class="hljs-value">n</span>></span>。n是一个具体的数值，单位是像素。</code></pre></pre><p><p>cellpadding properties:</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs xml">这一属性可以用来设置单元格线与数据之间的距离，用法为<span class="hljs-tag"><<span class="hljs-title">table</span> <span class="hljs-attribute">cellpadding</span>=<span class="hljs-value">n</span>></span>。n为数值，单位是像素，默认值是1。</code></pre></pre><p><p>！</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">caption</span>></span>和<span class="hljs-tag"></<span class="hljs-title">caption</span>></span></code></pre></pre><p><p><strong>This is a pair of tags used to indicate the table headings, commonly used in the following format:</strong></p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">caption</span>></span> 表格标题内容 <span class="hljs-tag"></<span class="hljs-title">caption</span>></span></code></pre></pre><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">tr</span>></span>和<span class="hljs-tag"></<span class="hljs-title">tr</span>></span>这对标记用来指明表格一行的内容。这一行可以是表格的栏目，也可以是数据。</code></pre></pre><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">th</span>></span>和<span class="hljs-tag"></<span class="hljs-title">th</span>></span>这对标记用来指明表格栏目行中的一项。一行可以由多项组成，必须嵌套在<span class="hljs-tag"><<span class="hljs-title">tr</span>></span>与<span class="hljs-tag"></<span class="hljs-title">tr</span>></span>之中使用。由此标记指定的栏目，文字会突出显示。</code></pre></pre><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">td</span>></span>和<span class="hljs-tag"></<span class="hljs-title">td</span>></span>这对标记用来指明表格数据行中的一项。一行可以由多项组成，它也必须嵌套在<span class="hljs-tag"><<span class="hljs-title">tr</span>></span>与<span class="hljs-tag"></<span class="hljs-title">tr</span>></span>之中使用。</code></pre></pre><p><p>Align property</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs xml"> 可用于<span class="hljs-tag"><<span class="hljs-title">tr</span>></span>、<span class="hljs-tag"><<span class="hljs-title">th</span>></span>及<span class="hljs-tag"><<span class="hljs-title">td</span>></span> 设置水平方向的位置：align=left、align=center 或 align=right</code></pre></pre><p><p>NoWrap Property</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs xml">可用于<span class="hljs-tag"><<span class="hljs-title">th</span>></span>及<span class="hljs-tag"><<span class="hljs-title">td</span>></span></code></pre></pre><p><p>Width Property</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs xml">可用于<span class="hljs-tag"><<span class="hljs-title">th</span>></span>及<span class="hljs-tag"><<span class="hljs-title">td</span>></span> 使用此属性可以指定宽度。具体用法与在<span class="hljs-tag"><<span class="hljs-title">table</span>></span></code></pre></pre><p><p>valign Property</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs xml">可用于<span class="hljs-tag"><<span class="hljs-title">th</span>></span>及<span class="hljs-tag"><<span class="hljs-title">td</span>></span> 指定垂直方向的位置<span class="hljs-tag"><<span class="hljs-title">valign=f</span>></span>，f取值：top、middle或bottom</code></pre></pre><p><p>Colspan property</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs xml">可用于<span class="hljs-tag"><<span class="hljs-title">th</span>></span>及<span class="hljs-tag"><<span class="hljs-title">td</span>></span><span class="hljs-tag"><<span class="hljs-title">colspan=n</span>></span></code></pre></pre><p><p>RowSpan Property</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs xml">可用于<span class="hljs-tag"><<span class="hljs-title">th</span>></span>及<span class="hljs-tag"><<span class="hljs-title">td</span>></span><span class="hljs-tag"><<span class="hljs-title">rowspan=n</span>></span></code></pre></pre> <p><p>HTML---web Programming (1)</p></p></span>
