木叶清风,C++,Python,Java,C#,Unity3d,Unreal4,UE4,技术日志

# HTML基础1

# Web概念

软件架构通常分为两种：

  1. C/S: Client/Server(客户端/服务器端)。在用户本地有一个客户端程序，在远程有一个服务器端程序。优点是用户体验好，缺点是开发、安装，部署，维护麻烦。
  2. B/S: Browser/Server(浏览器/服务器端)。只需要一个浏览器，用户通过不同的网址(URL)，即可访问不同的服务器端程序，它的优点是 开发、安装，部署，维护 简单。缺点是如果应用过大，用户的体验可能会受到影响。

我们所讨论的都是B/S架构，一般形式是网站形式。网站中有：

  • 静态网站：一般只展示信息，服务器接收到请求后直接把图片，声音和文字发送回客户端浏览器展示，一般博客类的网站都是这种网站。
  • 动态网站：会让用户参与，提交信息。服务器接收请求后，处理逻辑，然后再反馈给客户端，反馈过程中可能包括一些静态资源。一般信息管理系统是这种网站。

静态网站中包括：

  • HTML：用于搭建基础网页，展示页面的内容。
  • CSS：用于美化页面，布局页面。
  • JavaScript：控制页面的元素，让页面有一些动态的效果。

我们这里主要讲HTML。

# HTML

HTML是Hyper Text Markup Language，超文本标记语言：

  • 超文本：是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。
  • 标记语言：由标签构成的语言，标记语言不是编程语言。

# 基本语法

  1. html文档后缀名.html或者.htm。
  2. 标签分为
    1. 围堵标签：有开始标签和结束标签，如<html> </html>。
    2. 自闭和标签：开始标签和结束标签在一起，如 <br/>。
  3. 标签可以嵌套，但需要正确嵌套，不能你中有我，我中有你。
  4. 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来。
  5. html的标签不区分大小写，但是建议使用小写。

基本结构为：

<html>
  <head>
      <title>title</title>
  </head>
  <body>
      内容
  </body>
</html>
1
2
3
4
5
6
7
8

# HTML基本标签

# 文件标签

是构成html最基本的标签：

  • html:html文档的根标签。
  • head：头标签，用于指定html文档的一些属性，引入外部的资源。
  • title：标题标签。
  • body：体标签。
  • <!DOCTYPE html>：html5中定义该文档是html文档。

# 文本标签

和文本有关的标签：

  • 注释：<!-- 注释内容 -->

  • <h1> to <h6>：标题标签

  • h1~h6:字体大小逐渐递减

  • <p>：段落标签

  • <br>：换行标签

  • <hr>：展示一条水平线

    • 属性：
      • color：颜色
      • width：宽度
      • size：高度
      • align：对其方式
        • center：居中
        • left：左对齐
        • right：右对齐

  • <b>：字体加粗

  • <i>：字体斜体

  • <font>:字体标签

  • <center>:文本居中

    • 属性：
      • color：颜色
      • size：大小
      • face：字体

  • 通用属性规则：

    • color：
      1. 英文单词：red,green,blue
      2. rgb(值1，值2，值3)：值的范围：0~255 如rgb(0,0,255)。
      3. #值1值2值3：值的范围：00~FF之间。如：#FF00FF。
    • width：
      1. 数值：width='20' ,数值的单位，默认是 px(像素)
      2. 数值%：占比相对于父元素的比例

基本样例为：

<!DOCTYPE html>
<html lang="ch">

<head>
    <meta charset="UTF-8">
    <title>毛泽东诗词</title>
</head>

<body>

    <center>
        <h1>
            沁园春·雪
        </h1>
        <h3>作者：毛泽东</h3>
    </center>
    <hr color="#ffd700">

    <center>
        <p>北国风光，千里冰封，万里雪飘。</p>

        <p>望长城内外，惟余莽莽；大河上下，顿失滔滔。</p>

        <p>山舞银蛇，原驰蜡象，欲与天公试比高。</p>

        <p>须晴日，看红装素裹，分外妖娆。</p>

        <p>江山如此多娇，引无数英雄竞折腰。</p>

        <p>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</p>

        <p>一代天骄，成吉思汗，只识弯弓射大雕。</p>

        <p>俱往矣，数风流人物，还看今朝。</p>
    </center>


    <hr color="#ffd700">

    <font color="gray" size="2">
        <center>
            某某某有限公司<br>
            版权所有Copyright 20018-2020&copy;, All Rights Reserved 津ICP备1008611
        </center>
    </font>

</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

# 图片标签

该标签用来展示图片：

<img src="image/ceshi1.jpg" align="right" alt="测试图片" width="500" height="500"/>
1

# 列表标签

  • 有序列表：

    <ol>
<li>apple</li>
<li>banana</li>
</ol>
    1
    2
    3
    4

  • 无序列表：

    <ul>
<li>apple</li>
<li>banana</li>
</ul>
    1
    2
    3
    4

  • 自定义列表

    <dl>
<dt>music</dt>
<dd>you can hear it</dd>
<dt>drawing</dt>
<dd>you can see it</dd>
</dl>
    1
    2
    3
    4
    5
    6

# 链接标签

a标签会定义一个超链接。它常用属性有：

  • href：指定访问资源的URL(统一资源定位符)
  • target：指定打开资源的方式
    • _self:这个目标的值对所有没有指定目标的是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题<base>标签中的 target 属性一起使用。
    • _blank:浏览器总在一个新打开、未命名的窗口中载入目标文档。
    • _parent:这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标_self等效。
    • _top:这个目标使得文档载入包含这个超链接的窗口，用_top目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。
<a href="http://www.baidu.cn" target="_self">百度</a>
<br>
<a href="http://www.baidu.cn" target="_blank">百度</a>
<br>
<a href="mailto:xsmyqf@qq.com">联系我们</a>
<br>
<a href="http://www.baidu.cn"><img src="path to image" alt="百度链接的图片"></a>
1
2
3
4
5
6
7

# 块级标签和行内标签

  • 块级标签：独占一行，对高度、宽度、行高以及顶和底边距等属性可设置，如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽。
    • 常见的标签有：p,div,ul,ol,li,dl,dt,dd,h1~h6。
  • 行内标签：可以多个标签存在一行，不能直接设置行内标签的高度、宽度、行高以及顶和底边距，完全靠内容撑开宽高。
    • 常见的标签有：a,span,em,strong,img,var。
  • 行内块标签：结合的行内和块级的特点，不仅可以对宽高属性值生效，还可以多个标签存在一行显示。

# 标签转换

  1. 块级标签转换为行内标签：display:inline;
  2. 行内标签转换为块级标签：display:block;
  3. 转换为行内块标签：display:inline-block;

# 语义化标签

html5中为了提高程序的可读性，提供了一些标签，它们只是在语义上有一些含义：

<header>
    <h1>整个页面的头部</h1>
</header>
<article>
    <header>
        <h2>article的头部</h2>
    </header>
    <section>
        <header>
            <h3>section的头部</h3>
        </header>
        <p>section的内容部分</p>
        <footer>
            <h3>section的尾部</h3>
        </footer>
    </section>
    <footer>
        <h2>article的尾部</h2>
    </footer>
</article>
<footer>
    <h1>整个页面的尾部</h1>
</footer>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 表格标签

  • table：定义表格
    • width：宽度
    • border：边框
    • cellpadding：定义内容和单元格的距离
    • cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
    • bgcolor：背景色
    • align：对齐方式
  • tr：定义行
    • bgcolor：背景色
    • align：对齐方式
  • td：定义单元格
    • colspan：合并列
    • rowspan：合并行
  • th：定义表头单元格
  • <caption>：表格标题
  • <thead>：表示表格的头部分
  • <tbody>：表示表格的体部分
  • <tfoot>：表示表格的脚部分
<table width="300" height="300" align="content" border="5" bordercolor="#FFD700" cellspacing="3" bgcolor="#F5F5F5">
    <caption>动物世界</caption>
    <thead>
        <tr>
            <th>动物名称</th>
            <th>物种</th>
            <th>生活习性</th>
            <th>食性</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>最后动物</th>
            <th>最后物种</th>
            <th>习性</th>
            <th>食性</th>
        </tr>
    </tfoot>
    </tbody>
    <tr align="center">
        <td>老虎</td>
        <td>猫科动物</td>
        <td>单独活动</td>
        <td rowspan="2">肉食</td>
    </tr>
    <tr align="center">
        <td>狮子</td>
        <td>猫科动物</td>
        <td>集群</td>

    </tr>
    <tr align="center">
        <td>大象</td>
        <td>哺乳纲动物</td>
        <td>群居</td>
        <td>草食</td>
    </tr>
    </tbody>

</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

# 表单标签

表单用于采集用户输入的数据的来和服务器进行交互。

# 基本定义

使用form标签定义表单，在form标签内的表单项均可提交数据，要提交数据的表单项需要指定name属性，以便在服务器端接收时能通过该属性获取数据。

form标签有两个比较主要的属性：

  • action：指定提交数据的URL。
  • method:指定提交方式，主要有get和post两种方式。他们之间的区别如下：
    • get：
      1. 请求参数会在地址栏中显示，会封装到请求头中。
      2. 请求参数大小是有限制的。
      3. 不太安全，不能发送敏感数据，比如密码。
    • post：
      1. 请求参数不会再地址栏中显示，会封装在请求体中。
      2. 请求参数的大小没有限制。
      3. 较为安全。

# 表单项标签

  • input：可以通过type属性值，改变元素展示的样式。根据type属性分为：
    • text：文本输入框，默认值。
      • placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息。
    • password：密码输入框。
    • radio:单选框，注意：
      1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
      2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值。
      3. checked属性，可以指定默认值。
    • checkbox：复选框，注意：
      1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值。
      2. checked属性，可以指定默认值。
    • file：文件选择框。
    • hidden：隐藏域，用于提交一些信息。
    • 按钮：
      • submit：提交按钮，可以提交表单。
      • button：普通按钮。
      • image：图片提交按钮，通过src属性指定图片的路径。
  • label：指定输入项的文字描述信息，label的for属性一般会和input的id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。
  • select: 下拉列表，子元素：option，指定列表项。
  • textarea：文本域。有两个主要属性：
    • cols：指定列数，每一行有多少个字符。
    • rows：默认多少行。

代码示例：

# 表单样例

HTML基础2-CSS基础 →