Web前端开发（一）-- HTML

2017-10-18 本文已影响0人 404er

1.基础概念

1.B/S与C/S系统架构：

Browser/Server(浏览器/服务器)

Client/Server(客户端/服务器)

2.WEB开发：

属于B/S系统架构，包括前端开发和后台开发

前端：HTML+CSS+JavaScript

后台：Java,C#,Python

2.HTML（Hyper Text Markup Language）

1.什么是HTML？

是一种超文本标记语言，不属于编程语言，由大量成对的标签组成(浏览器打开xxx.html 或 xxx.htm文件)

2.HTML与W3C

W3C（万维网联盟）制定了HTML标准、http协议等

3.四大主流浏览器内核

Trident/IE内核
Gecko/Firefox内核：Netscape6开始采用的内核
WebKit内核：Safari内核，Chrome内核原型，开源
Presto内核：Opera浏览器使用的内核

4.HTML基本标签

1.标签概念

单标签：<起始标签/>

双标签：<起始标签>标签内容</结束标签>

在元素的起始标签中，还可以包含“属性”来设置元素的其他属性。一个标签可以有个多个属性，每个属性之间用空格隔开。
每一对双标签之间可以嵌套，但不能交叉

2.一个简单的HTML页面

<!--这是HTML的注释-->
<!--以下html标签是网页的根标记-->
<html>
  <!--头标记-->
  <head>
    <!--标题，会显示在浏览器的标题栏上-->
    <title>一个简单的HTML页面</title>
  </head>
  <!--体标记-->
  <body>
    <!--这部分内容会显示到网页当中-->
    A simple HTML page!
  </body>
</html>

3.标签

段落标签：

<p></p>
标题字：

<h1></h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5>

<h6></h6>
换行

<br/> 独目标签
align属性（设置对齐方式）

<h1 align="center"></h1>
- 还有left,right等取值
- 字符串可以使用双引号，也可以使用单引号
水平线

<hr color="red" width="100px" />
HTML不区分大小写
<center>这里写的内容会居中</center>
常用实体符号

HTML常用实体符号.png
表格
```
<table border="" align="center" width="" height="">
  <tr>
    <td></td>
  </tr>
</table>
```
- <th></th>
- <thead></thead> <tbody></tbody> <tfoot></tfoot>
- 单元格合并：colspan,rowspan
图片

超链接

1.<a href=""></a>

2.target属性：规定在何处打开链接文档
  <a href="pref.html" target="view_window">Preface</a>
属性值：
    _blank：开启一个新窗口
    _self：默认值，在当前窗口显示
    _parent：表示在当前窗口的直接父窗口显示
    _top：在最顶层窗口显示，跳过框架

3.锚点：<div id="test" name="test"></div>
        <a href="#test"></a>

4.图片超链接：<a href=""><img src=""></a>

列表

<!--无序列表-->
<ul type="circle|square|disc">
  <li></li>
</ul>

<!--有序列表-->
<ol type="1|A|a|i">
  <li></li>
</ol>

框架
- 一个HTML页面正常情况下只能显示一个页面，可以使用框架能在一个页面中显示出多个窗口
- frameset不能与body一起使用！
```
<frameset cols="15%,*">
  <frame name="left" src="" />
  <frame name="right" src="" />
</frameset>
```
表单
- 作用：主要负责数据采集功能，是网站管理者与浏览者之间沟通的桥梁
- 浏览器向服务器发送请求包括哪几种常见方式：
  - 在浏览器地址栏上直接输入URL
  - 点击超链接
  - 提交表单
- 一个页面中可以有多个表单，每一个表单使用form标签括起来。
- form标签的action属性和超链接中的href属性相同
- input标签的type属性：
  - text、textarea、password
  - radio（单选按钮，用name分组）、checkbox
  - hidden（隐藏的输入字段）、file（输入字段和浏览按钮，供文件上传）、button、
  - submit、reset（重置按钮，清除表单中的所有数据）
- radio、checkbox默认选中使用checked
  
  下拉列表项目默认选中某项使用selected
- method：定义表单提交的方法，有两种方法：Post方法和Get方法
  - post方法：表单数据不会出现在URL中，所以用这种方式提交的表单数据是安全的
  - get方法：如果表单中的数据没什么隐私数据，建议使用get方法，它的效率较高
div和span
- div：div是网页当中一个独立的块，我们可以称之为图层，每一个div都会独自占用一行。
- span： span也可以称之为图层，span元素不会独自占用一行。