HTML front-end learning

A: HTML Introduction:

HTML (English: HyperText Markup Language, referred to as: HTML) is a standard for creating a web page markup language, it is not a programming language.

HTML uses tags to describe web pages. Unlike the python programming languages, logical or something, this markup language is illogical.

Web page file name extension: .html or .htm

Two: HTML document structure

When you create an initial html file, it will have the following contents:

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

</body>

</html>

The following explanation of the above structure:

1. <! DOCTYPE HTML> declared as HTML5 document.

2. <HTML>, </ HTML> is the start tag and end tag of the document.

Is the root element HTML pages, among them the head of the document (head) and body (body).

3. <head>, </ head> defines the beginning of the HTML document. Where lang = "en" that is, the entire contents of your document based mainly in English, if the entire contents can be changed with the Chinese-based: lang = "zh-CN" .

Content between them does not appear in the document window browser.

Contains documents yuan (meta) data, configuration information, etc., is to look at the browser, you see the label inside the body wrote.

4. <title>, </ title> defines the page title is displayed in the browser title bar.

(Modify the content title, and then look at the browser, you will find what is the title)

5. The <body>, </ body> text is visible between the body of the page content.

Note: For Chinese web pages need to use <meta charset = "utf-8"> statement, otherwise it will be garbled. Some browsers set as the default encoding GBK, then you need to set <meta charset = "gbk">.

Three: Common tags Introduction

Tags Categories:

Ditag (bis closed)

<h1>dfdsfsdf</h1>

Single-label (single closed)

<img>

1. <-! Footnotes ->

# Find a single line ctrl + / will be able to comment, the content of the comment will not be displayed on the page,

This tag does not affect web content, play a role in the comment.

2.head label in the label and the head (the site configuration information)

It defines the beginning of the HTML document. (In the second for more details)

The following labels are available in the head section:

<Link>: define the relationship between a document and an external resource.

<Meta>: provide basic information about the page.

<Script>: both can contain script statements, you can also point to an external script file through the src attribute.

<Style>: define styles for HTML documents for information.

<Title>: Defines the title of the document.

Here are the relevant label introduced within the head tag:

3.body tags and labels used in the body

<Body>, the text between the </ body> is visible page body content.

<Body> element contains all the content of the document (such as text, hyperlinks, images, tables and lists, and so on.)

(1) h series (***)

<Hr> # is a single one horizontal line

h1 ----- h6

Code examples:

<h1> My first website </ h1>
<h2> My first website </ h2>
<h3> My first website </ h3>
<h4> My first website </ h4>
<H5> my first website </ H5>
<H6> my first website </ h6>

Renderings:

(2) b bold tag

Code examples:

No bold font
<b> bold font of </ B>
<strong> bolded font </ strong>

Renderings:

(3) u underline tag; underlined del and S

<U> tag to define underlined text.

<S> tags define the strikethrough text definition.

Code examples:

<-! u underline tag ->
<U> underline below Font </ U>
<br>
<-! S and underlined del ->
<S> Font underlined below </ s>
<br>
<del> Font underlined below </ del>

Renderings:

(4) superscript <sup> and the subscript <sub>

<Sup> tags define the superscript text.

<Sub> tag defined subscript text.

Code examples:

4<sup>2</sup>
5<sub>3</sub>

effect:

(5) p tag (***)

<P> tag defines paragraphs.

Paragraph: is the abbreviation of the English paragraph.

HTML tags are hierarchical. All HTML tags will be divided into two types:

Text level tag: p, span, a, b, i, u, em. Text tag can only put text, images, form elements.

Container-level tag: div, h series, li, dt, dd. Container-level tag you can put anything.

Please remember tightly: the p-tag is a text-level tagging, p which can only put text, images, form elements. Other one is allowed to discharge.

Only put text / picture / form element.

Properties: align = 'attribute value': alignment. Attribute value comprises: left, center, right

Code examples:

</div>
</p>

(6) div tag (***)

Block-level tags, a separate line. When a page layout, as containers

<Div> define partition or section of a document

(7) span tag (***)

Inline tags, use as an alert message

<Span> tag is used to combine the rows of elements in the document.

<Span> and <div> The only difference is: <span> is not a line feed, and <div> is a line feed.

If a separate insert these two elements in a web page, will not have any impact on the page. These two elements are defined specifically for the CSS style born. Or, DIV + CSS to achieve a variety of styles.

Code Example 1:

<div>
first div
</ div>
<div>
second div
</ div>
<span> first span </ span>
<span> span second power </ span>

Renderings:

(8) pre tag

Defined preformatted text

It is the original format output

<pre>
望庐山瀑布
Author: Li Bai
sunshine incense Health Zi Yan, very thick waterfall hanging Maekawa.
Waterfalls three thousand feet, suspected Galaxy nine days.
</ pre>

effect:

(9) a label (***) level text labels

Hyperlink tags, hyperlinks refers to the so-called point to a goal from a web connection relationship, this goal can be another Web page, it can be a different location on the same page, you can also be a picture, an email address, a files, or even an application.

Jump to the specified address

Jump to anchor (name and id, note)

Jump to the top (#)

Static pages are written, it is recommended to add a <a href = "javascript: void (0);"

javascript: pseudo-protocol is, url indicates the content by performing javascript. void (0) does not indicate any operation, this will prevent the links to jump to other pages. Often they do so in order to preserve the style of the link, but not to link to perform the actual operation.

Example 1:

<h1>我的第一个网页</h1>
<h3 id="title-h3">我的第一个网页</h3>
<p id="aaa">字体没有加粗</p>
<a href="one.html">跳到one.html网页</a>

<a href="http://www.baidu.com">百度一下</a>

<a href="#title-h3">跳至h3</a>
<a href="#">跳至顶部</a>

<a href="#aaa">跳至aaa</a>

例子2:
<a href="javascript:alert('hsz');" title="弹出框">不跳转,显示hsz</a>
<a href="javascript:void(0);">点击2</a>
<a href="javascript:;">点击3</a>

(10)img标签(***)

src 图片的地址(url,绝对路径,相对路径)

宽和高,只设置一个时,会按照图片的原始比例,进行缩放.

title 鼠标悬浮时,显示的提示性的文本.

alt 图片加载失败时,提示信息.提高用户的体验度.

a标签可以包裹img,点击img时,进行跳转.

高矮不齐，底边对齐

例子:

前三个只要将鼠标移动到图片位置就会显示"妖精的尾巴",第四个是没有这个图标,会返回alt的内容"走丢了"

(11)ul标签(***)无序列表

li标签,不能单独使用.容器级标签.

一般会结合css,进行页面排版.

type属性：

disc（实心圆点，默认值）

circle（空心圆圈）

square（实心方块）

none（无样式）

例1:(注意不同属性)

</ul>

</ul>

效果图:

例2:(嵌套的ul)

<ul>

<ul>

</ul>

</li>

</ul>

<ul>

<ul>

</ul>

</li>

</ul>

效果图:

(12)ol标签有序列表

例1:(从第二项开始)
<ol type="1" start="2">
<li>第一项</li>
<li>第二项</li>
</ol>

设置type,自定制序号

type属性： start是从数字几开始

1 数字列表，默认值

A 大写字母

a 小写字母

Ⅰ大写罗马

ⅰ小写罗马

配合li标签.

(13)dl标签

定义列表
dt标签,顶头显示.
dd标签,在左侧有缩进
<dl>
<dt>第一条规则</dt>
<dd>不准睡觉</dd>
<dd>不准交头接耳</dd>

<dt>第二条规则</dt>
<dd>可以泡妞</dd>
<dd>可以找妹子</dd>
</dl>
效果:

(14)table标签

tr标签,行

td标签,列

th标签,列(td+b)

thead标签,表头

tbody标签,表内容

tfoot标签,表页脚.

合并单元格:

纵向合并rowspan

横向合并colspan

例子:

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

效果图:

(15)form表单(***)

属性:

- action 数据提交的服务器地址

- method 数据提交的方式,默认get,指定post,当你写错的时候,还是按照get

input标签

type:

- text, 默认,文本,用于输入用户名等信息(***)

- password, 用于用户密文输入密码(***)

- radio , 单选框,必须name值一致.(***)

- CheckBox, 复选框,(***)

- button, 普通按钮,配合js使用(***)

- submit, 提交按钮.(***)

- reset, 重置form表单内的内容

- file, 上传文件(***)

- hidden, 隐藏的input标签

默认选中,checked

(16)select标签(***)

name是提交过去的key,option的value属性是提交过去的值.

option标签 value属性,

默认选中,selected

textarea标签

多行文本输入框

(17)label标签(***)

提高用户的体验度

for属性,必须制定的对方的id值.

如果以get 的方式,比较不安全,因为输入的信息在提交过程中都显示跳转的网址上了,以下有个例子是为了方便查看提交的信息所有先用get,一般用post,post方式提交的信息在请求体,相对安全

例子:

<p>性别：

<input type="radio" name="sex" value="male" checked> 男

<input type="radio" name="sex" value="female"> 女

<input type="radio" name="sex" value="secret"> 保密

</p>

<p>爱好：

<input type="checkbox" name="hobby" value="la"> 拉二胡

<input type="checkbox" name="hobby" value="tan"> 弹吉他

<input type="checkbox" name="hobby" value="chang"> 唱京剧

</p>

<p>

学历：

</select>

</p>

<div>

<p>个性签名：

</p>

</div>

</form>

效果截图:

输入信息后截图:

提交后跳转到百度,百度网址后跟着一串的提交值,(平常一般用于将着一串值传给服务端)