02_ basic principles of the Internet and HTML entry

The lesson of knowledge reviews

Internet principle: servers, browsers, HTTP. Know page document is a true physical presence, with HTTP request this document.

To know the meaning of the URL:http://www.iqianduan.cn/aaa

Which file requests?

The request is iqianduan.cn on the server aaa folder index.html file. Expand it, the server can be configured default page, such as configured default.html or default.php and so on. But the default is index.html.

HTML pages are actually transmitted to the inside of your computer rendering, and save these files in the folder, the temporary folder.

Plain Text: Only words, no style. txt, html, java, php, css, js and so on. Use Notepad to open, and after opening is not garbled, is a plain text file.
HTML is responsible for describing semantics: <h1>我是一个主标题</h1>function is to increase text "Main Title" semantics, rather than the larger and crude.

The p function is to increase the semantic "paragraph" in.

Sublime use: any plain text editor can edit web page html file. To learn programming, rather than some kind of software.
skeleton:

    <!DTD>
    <html>
       <head>
       </head>
       <body>

       </body>
    </html>

DTD: HTML4.01 3 Zhong, XHTML1.0 3 species.

XHTML1.0 clearly defined tag names must be lowercase, all attributes are enclosed in double quotes, from a closed end with a backslash.

strict: strict version, font, b, u, i, etc. can not be used.

<b>加粗文字</b>
    
<u>下划线文字</u>
 
<i>倾斜文字</i>

Before 2007, it is to write pages with these tags. However, from 2007 to 08 was abandoned because: DIV + CSS,
we want only responsible for semantic HTML tags, and not responsible for the style. And b, u, i obvious with the "color style", so the beginning of 2008, it was abandoned. strict version, without the use of strict b, u, i. However, we have to use clever on the page look b, u, i (css hook), so we use transitional version.

Charset: utf-8 and gb2312. How much text character library included: utf-8> gb2312; file size: gb2312 <utf-8.
- gb2312 not been abandoned, it is clear qq.com use gb2312, open the pursuit of speed.
Keywords, page description

<meta name=”keywords” content=”手机,电脑” />

<meta name=”description” content=”页面描述” />

Blank folding phenomenon and HTML tags for spaces, tab, newline insensitive.
h p tags and labels

h label series, a total of six

<h1></h1>
    到
<h6></h6>

p tags, paragraph semantics.

The so-called "container class" and "text level" is not an official classification, but an experienced programmer points out category.

Some labels, what can be placed inside, very atmospheric; container level →

Some labels, which can only be placed in the text, although placing other things, the browser may not be an error, but no one to do so. → text level

Remember: HTML4.01 level grade container label, only div, li, dd, dt, td . The rest of the label, all the text level.

image

1. Basic use

In the HTML page you want to insert a picture, use the img tag.

<img src="shishi.jpg" />

img English abbreviation image, images meant
src is the source of the English abbreviation, resource resources
value of the src attribute, is the picture of the path.

img tag is a self-closing tag, also called a single label, not a pair of children.
<img />
We are self-closing tag contact on two:
<meta />and<img />

Web pages can be inserted into image formats: jpg, jpeg, png, bmp, gif. You can not insert image formats: psd

2. the width and height

Not set the width, height:
<img src="shishi.jpg" />

By setting the width of the width, height sets the height:

<img src="shishi.jpg" width="500" height="300" />

Image Width settings

Yesterday learn grammar, key-value pairs:
<img k=”v” k=”v” k=”v” />

If we just set one of the properties, the other property in proportion automatically.

<img src="shishi.jpg" width="100" />

In proportion

3. The picture is "text"

Picture img element, not an ordinary html tags, and p is not the same kind of thing, img tag is actually a text.

img tag is the text:

<body>
   <img src="shishi.jpg" alt="" />
   <img src="shishi.jpg" alt="" />
   <img src="shishi.jpg" alt="" />
</body>

Blank folding phenomenon, there are spaces

Remove the spaces:

<img src="shishi.jpg" alt="" /><img src="shishi.jpg" alt="" /><img 
src="shishi.jpg" alt="" />

Strips spaces

4. The relative and absolute paths

1. relative path

img src attribute, describing where the picture file.

From html page, find the picture. This embodiment is described path, called the relative path.

When html files and image files in the same directory, it is very simple, you can directly enter the file name<img src=”shishi.jpg” />

When the picture in deeper folder when:

Pictures in deeper folder

写法就是写上文件夹名字：
<img src="images/longlong.jpg" />可以有很多的层次：<img src="images/aaa/bbb/1.jpg" / >

如果图片在页面更浅一层的文件夹中：<img src="../jiehunzhao.jpg" />
In the inside pages

路径可能比较复杂，没有关系一层一层找就可以了：
<img src="../../images/aaa/bbb/1.jpg" />

需要注意的是： ** ../只能出现在开头**。

2.绝对路径

所有以http://开头的路径，或者以/开头的路径，我们都称为绝对路径。

<img src="http://i1.sinaimg.cn/dy/deco/2013/0329/logo/LOGO_1x.png" />

注意http:// 不能省略。

很明显，我们现在不是从html页面出发找到图片，而是描述了一个绝对的一个网址，那么称为“绝对路径”。

以/开头的路径，表示当前服务器的根目录。
<img src=”1.jpg” />不等价于：<img src=”/1.jpg” />

解释：
<img src=”1.jpg” />表示从当前页面出发，找到1.jpg。
<img src=”/1.jpg” />表示从当前服务器根目录出发，找到1.jpg

等价于绝对地址：
<img src=”http://www.shaoshanhuan.com/images/1.jpg” />

不要去考虑直接插入硬盘中的文件：
<img src=”file://d:/1.jpg” />不要学，没有用，因为服务器上没有d盘，你的路径不适用服务器的情况。并且也不方便用u盘考来考去。这是一个错误的路径。

看一道面试题，腾讯2014校园招聘笔试题：
Tencent face questions

img src=”../../photo/1.png” />

5.alt属性

<img src="sdf34.jpg" alt="这是一只考拉" />

alt是英语alternate替代的意思，就是当图片不能被显示的时候（可能因为路径错误、服务器错误），显示的替代文字：
alt English alternate alternative means

超级链接

1.基本使用

超级链接，把网页和网页之间连起来了，互联网是“网”的原因。

使用a标签来制作，a是英语anchor锚的意思。

<a href="temp.html">我是超级链接</a>

href是英语hypertext reference超文本地址的意思。

类似于img的src。

一定不要写成herf。所以你就要读做“何瑞福”，不要读作“喝er夫”。

href里面的值，就是要跳转到的页面的地址，相对路径、绝对路径都行：

<a href="../../aaa/bbb/ccc/1.html">链接</a>
<a href="/1.html">链接</a>
<a href="http://www.sina.com.cn/">链接</a>

2.常见属性

title属性，就是鼠标悬停时候的提示文本

<a href="temp.html" title="快点我，还等什么！！">我是超级链接</a>

target属性，设置是否在新窗口中打开连接，如果想在新窗口中打开链接 target=”_blank”

<a href="temp.html" target="_blank">我是新窗口打开的链接</a>

target是英语目标的意思，blank就是空白新窗口的意思。有一个下划线。

3.页面内的锚点

可以通过下面的这种特殊形式的a，在页面中放置锚点：

<a name="hysh"></a>

a里面有一个name属性，name是英语名字的意思。而没有href和链接中的文字。

这种a标签叫做锚点。

可以使用网址：

10_页面内锚点.html#hysh

来快速定位这个锚点。注意看下图的地址栏最后的部分：

Anchor

可以在页面的其他部分，制作跳转到这个锚点的超级链接：

<a href="#yysy">查看演艺生涯</a>

甚至，可以在其他页面制作这个超级链接：

<a href="10_页面内锚点.html#yysy">查看演义生涯</a>

最后说一下，如果我们想要把一个段落中所有的文字，都是超级链接：

应该p包裹a，因为我们感觉p比a大，a就是一个文字：

<p>
   <a href="">我是段落的文字</a>
</p>

而不要：

<a href="">
   <p>我是段落的文字</p>
</a>

列表

列表有三种

1.无序列表

<ul>
    <li>百度</li>
    <li>百度</li>
    <li>百度</li>
    <li>百度</li>
</ul>

ul是英语unordered list，无序列表。表达的是没有顺序关系的列表。

li是英语list item列表项的意思。

这是我们学习的第一个组合的标签：

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

ul的儿子标签，只能是li，不能是别的东西：
错误：

<ul>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</ul>

错误：

<ul>
   <h3>中国著名城市</h3>
   <li>北京</li>
   <li>上海</li>
   <li>广州</li>
</ul>

正确的：

   <h3>中国著名城市</h3>
<ul>
   <li>北京</li>
   <li>上海</li>
   <li>广州</li>
</ul>

错误的：

<ul>
    中国著名城市
   <li>上海</li>
   <li>广州</li>
</ul>

li的数量没有限制，可以有无限多个。

li是一个非常经典的容器级标签，里面可以防止任何东西，甚至，再放置一个ul（二级列表），甚至三级列表。

注意下面的正确写法（这个案例想写对，真的不容易）：

<body>
    <ul>
        <li>
            <h4>直辖市</h4>
            <ul>
                <li>北京</li>
                <li>天津</li>
                <li>上海</li>
                <li>重庆</li>
            </ul>
        </li>

        <li>
            <h4>广东省</h4>
            <ul>
                <li>广州</li>
                <li>深圳</li>
                <li>东莞</li>
                <li>珠海</li>
                <li>佛山</li>
            </ul>
        </li>
        
        <li>
            <h4>江苏省</h4>
            <ul>
                <li>南京</li>
                <li>无锡</li>
                <li>苏州</li>
                <li>常州</li>
                <li>扬州</li>
            </ul>
        </li>
    </ul>
</body>

网站上的使用：
Web site commonly used

至于小圆点，如何变化，是CSS的事情，不是HTML的事情。

2.有序列表

ol就是ordered list

<ol>
    中国著名城市
   <li>上海</li>
   <li>广州</li>
</ol>

所有的注意事项和ul一样一样的。

3.定义列表

定义列表表示定义某事的一个列表。

    <dl>
        <dt>HTML语言</dt>
        <dd>HTML语言是基本的描述文字语义的语言，负责页面的结构</dd>

        <dt>CSS语言</dt>
        <dd>CSS是负责描述页面样式的语言</dd>
        
        <dt>JavaScript语言</dt>
        <dd>JavaScript是负责描述页面交互的语言</dd>
    </dl>

dl是英语definition list定义列表的意思；
dt是英语definition title定义标题的意思；
dd是英语definition description定义描述的意思；

dl中，交替出现dt和dd。dd是dt的解释说明，dd负责解释、描述、定义dt。

dd responsible for the interpretation

也可以单独成为一个dt和dd组，大部分前端工程师更喜欢这样的：

    <h4>中国著名女演员</h4>
    <ul>
        <li>
            <dl>
                <dt>杨幂</dt>
                <dd>出生在北京，老公是刘恺威</dd>
                <dd>出演过仙剑奇侠传3</dd>
            </dl>
        </li>
        <li>
            <dl>    
                <dt>刘诗诗</dt>
                <dd>老公是吴奇隆</dd>
                <dd>出演过步步惊心</dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>angelababy</dt>
                <dd>老公是黄晓明</dd>
            </dl>
        </li>
    </ul>

这样的好处，就是样式更好管理一些（学CSS之后你就懂了）。
网页中的应用：
Web application

dd和dt都是非常经典的容器级标签，里面什么都能放。

dd and dt are container level

放什么标签，和长得样子没有关系，一切看语义！！

表单

表单中的所有元素，都要放在一个form标签中：

<form>
</form>

form就是英语表格的意思。这个标签是一个功能型的标签，不是一个结构型的标签。form标签是后台哥哥来进行配置的。Ajax课程的第一天，我们讲解PHP语言，将介绍更多的表单提交的原理。那时候你就知道了form表单的两个属性method、action，现在先不说。

1.单行文本框

<input type="text" />

text

input是英语输入的意思，表示这是一个输入控件，所谓的控件就是用户能点的、能填的东西。

type是英语类型的意思，text是文本的意思。

这又是一个自封闭标签，不是一个标签对儿。因为它并不需要给别的文字添加语义。

至此，我们已经学习了3个自封闭标签：

<meta name=”keywords” content=”手机,电脑” />

<img src=”1.jpg” />
<input type=”text” />

value属性表示默认有的值：

<input type="text" value="haha"/>

text

2.单选按钮

<input type="radio" name="sex"/> 男
<input type="radio" name="sex"/> 女

single button

你会发现，当行文本框和单选按钮，非常像

<input type=”text” />
<input type=”radio” />

radio是收音机的意思，按其中的一个键，其他键就弹起来，所以我们的计算机就沿用了这个名字。

单选按钮，必须是互斥的，不能同时选中多个，所以它们必须有相同的name属性。至于是什么name无所谓，但是必须相同。

说道一个提升用户体验的东西，叫做label标签。点字的时候，小圆点就能被选择上。

<input type="radio" name="sex" id="nan"/> 
<label for="nan">男</label>

label就是标签的意思，id就是id的意思。

现在，这个for属性和id的值是一样的，产生了绑定关系。这是我们学习的第一个有绑定关系的标签，后面还要学习一个。就把某一个label和input产生了绑定关系。

3.复选框

<input type="checkbox" name="hobby" /> 篮球
<input type="checkbox" name="hobby" /> 足球
<input type="checkbox" name="hobby" /> 羽毛球

checkbox就是复选框的意思，name属性虽然现在感觉没有啥用，但是还是应该设置为相同的。

Check box

4.密码框

<input type=”password” />

[图片上传失败...(image-bed414-1550760431599)]

5.三种按钮

<input type="button" value="我是一个普通按钮哈哈" />
<input type="submit" value="提交按钮哈哈" />
<input type="reset" value="复位重置按钮哈哈" />

button普通按钮
submit提交按钮
reset重置按钮

HTML4.01层面就是上面这些input系列：



<input type="text" />

<input type="radio" />

<input type="checkbox" />

<input type="password" />

<input type="button" />

<input type="submit" />

<input type="reset" />

6.下拉列表

<select>
   <option>1950</option>

   <option>1951</option>
   <option>1952</option>

   <option>1953</option>
   <option>1954</option>

</select>

Drop-down box

select表示选择的意思，option是选项的意思。

这是一个组合使用的标签组，和ul、li的关系是一样的。

7.文本域

You can wrap text input controls:

<textarea cols="40" rows="20">这家伙很懒，什么都没留下</textarea>

Text fields

text text, area area. cols number of columns, rows number line, we usually use css to control.

This is a pair of children label, which is the default text content.

HTML4.01 level (XHTML1.0 level), that's all, forms of things, we will expand HTML5.

form

1. Basic table

form

table is a table, the table;

tr table row table row is meant;

td table is the table dock small cell mean.

Each line is a tr in each row of little princess is td

    <table border="1">
        <tr>
            <th>品牌</th>
            <th>价格</th>
            <th>类别</th>
        </tr>
        <tr>
            <td>宝马</td>
            <td>30w</td>
            <td>高级轿车</td>
        </tr>
        <tr>
            <td>奔驰</td>
            <td>50w</td>
            <td>高级轿车</td>
        </tr>
        <tr>
            <td>现代</td>
            <td>20w</td>
            <td>中级轿车</td>
        </tr>
        <tr>
            <td>QQ</td>
            <td>2w</td>
            <td>低级轿车</td>
        </tr>
    </table>

This set of three nested labels. Td number is about the same. Having a small header semantics princess, td used to replace th.

form

        <tr>
            <th>品牌</th>
            <th>价格</th>
            <th>类别</th>
        </tr>
        <tr>
            <td>宝马</td>
            <td>30w</td>
            <td>高级轿车</td>
        </tr>

Essentially, th and td are small princess, but the princess th there is a small header semantics;

2. The cells were combined

Merged cell

rowspan stride

colspan Column span

Small exercises, as the following table:

Small exercises

<!--题目一-->
<table border="1">
    <tr>
        <td>1</td>
        <td rowspan="2">2</td>
    </tr>
    <tr>
        <td>3</td>
    </tr>
</table>

<!--题目二-->
<table border="1">
    <tr>
        <td colspan="2">1</td>
        
    </tr>
    <tr>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

<!--题目三-->
<table border="1">
    <tr>
        <td rowspan="2">1</td>
        <td>2</td>
        
    </tr>
    <tr>
        <td>3</td>
    </tr>
</table>

HTML knowledge still remaining:
the remaining components such as table tbody, thead
div, span tags
HTML comments, the escape character
discarded label introduced

and many more

operation

Ideas: first output table, and then consider the line spans (rowspan) and column span issues (colspan).

<tr>    
            <th>万公顷</th>    
            <th>万亩</th> 
            <th>万公顷</th>    
            <th>万亩</th> 
        </tr>       

        <tr>
            <td>北京</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>

        <tr>
            <td>北京</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>

        <tr>
            <td>北京</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>

        <tr>
            <td>北京</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>                       
    </table>