前端之HTML的基础知识

一、关于前端的几件小事

1.什么是前端？

　　任何直接能够跟用户打交道的交互界面都可以称之为前端

2.浏览器输入网址发送了几件事？

　　1.输入网址

　　2.朝服务端发送请求

　　3.服务器接收请求并查询浏览器想要的数据返回给浏览器

　　4.浏览器拿到数据展示页面

3.HTTP协议

　　超文本传输协议
　　　　客户端服务端在数据交互的时候都必须遵循这套协议

二.HTML介绍

1.HTML是什么

　　HTML叫做超文本标记语言，是一种用于创建网页的标记语言（它不是编程语言），

　　HTML使用标签来描述网页

　　网页文件的扩展名：.html或.htm

2.HTML文件结构　

　　最基础的HTML文件结构

<!DOCTYPE html>　　　　
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

<!DOCTYPE html>声明为HTML5文档。
<html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。
<head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。
<title>、</title>定义了网页标题，在浏览器标题栏显示。
<body>、</body>之间的文本是可见的网页主体内容。

注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。

3.HTML标签格式　　　　

　　HTML标签是由尖括号包围的关键字，如<html>, <div>等

　　HTML标签通常成对出现，比如：<div>和</div>，第一个标签是开始，第二个标签是结束。结束标签会有斜线。

　　　　　也有标签是单独呈现的，比如：<br/>、<hr/>、<img src="1.jpg" />等。

　　标签里面可以有若干属性，也可以不带属性。

　　　　　标签的语法：

　　　　　　　<标签名属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>

　　　　　　　<标签名属性1=“属性值1” 属性2=“属性值2”…… />

　　　　　几个很重要的属性：

　　　　　　　　id：定义标签的唯一ID，HTML文档树中唯一

　　　　　　　　class：为html元素定义一个或多个类名（classname）(CSS样式类名)

　　　　　　　　style：规定元素的行内样式（CSS样式）

4.html文件打开方式

　　　　　　　方式1：找到改文件选择浏览器打

　　　　　　　方式2：pycharm内自动打开　　

三、HTML文件结构各部分标签

1.head内常用标签

title:页面标题

tyle：写css代码

script:内部可以直接写js代码，也可以通过src属性引入外部js代码文件　　　　　　　　

link:通过href引入外部css文件　　　　　　

meta:定义网页原信息　name='keywords' content="......"

　　　　　　　　　　 name='description' content="......"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keyword" content="页游，端游，rpg">
    <meta name="description" content="贪玩蓝月 是一款巨资打造的大型...等你称霸全服!">
    <title>贪玩蓝月，是兄弟就来砍我</title>
    <style>
        h1{color:darkred;}
    </style>
    <script src="myjs.js">
        // alert('充值9.9，立刻满级999')
    </script>
    <link rel="stylesheet" href="mycss.css">
</head>
<body>
    <img src='u=4275214920,2375546888&fm=26&gp=0.jpg'>
    <h1>屠龙宝刀</h1>
    <a href='http://baidu.code.jjyx.com/htmlcode/'><h1>点击就送</h1></a>
</body>
</html>

2.body内常用标签

1.基本标签

　<b>加粗</b>　　　　<i>斜体</i>　　　　<u>下划线</u>　　　　<s>删除</s>　　　　<p>段落标签</p>

　<h1>标题1</h1>（h1~h6）　　<br>换行　　<hr>水平线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>将进酒</h1>
<p>君不见，黄河之水天上来，奔流到海不复回。</p>
<p><s>君不见，高堂明镜悲白发，朝如青丝暮成雪。</s></p>
<p><b>人生得意须尽欢，莫使金樽空对月。</b></p>
<p><u>烹羊宰牛且为乐，会须一饮三百杯。</u></p>岑夫子，丹丘生，将进酒，杯莫停。与君歌一曲，请君为我倾耳听。
<p>钟鼓馔玉不足贵，但愿长醉不复醒。 </p>
<p>古来圣贤皆寂寞，惟有饮者留其名。 </p>
<hr>陈王昔时宴平乐，斗酒十千恣欢谑。<br>主人何为言少钱，径须沽取对君酌。
<p>五花马，千金裘，呼儿将出换美酒，与尔同销万古愁</p>
</body>
</html>

2.特殊符号

内容	对应代码
空格
>	>
<	<
&	&
¥	¥
版权	©
注册	®

3.常用标签

　　div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。

　　span标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。

4.img标签

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

5.a标签

　超链接标签

　　　超链接是指从网页指向目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。

URL

<a href="http://www.oldboyedu.com" target="_blank" >点我</a>

　　　　href属性指定目标网页地址。该地址可以有几种类型：

　　　　　　　绝对URL - 指向另一个站点（比如 href="http://www.jd.com）

　　　　　　　相对URL - 指当前站点中确切的路径（href="index.htm"）

　　　　　　　锚URL - 指向页面中的锚（href="#top"）

　　　　target：

　　　　　　　_blank表示在新标签页中打开目标网页

　　　　　　　_self表示在当前标签页中打开目标网页

3.列表

1.无序列表

<ul type="disc">
  <li>第一项</li>
  <li>第二项</li>
</ul>

type属性： disc（实心圆点，默认值）　　circle（空心圆圈）　　square（实心方块）　　none（无样式）

2.有序列表

<ol type="1" start="2">
  <li>第一项</li>
  <li>第二项</li>
</ol>

type属性：1 数字列表，默认值　　A 大写字母　　a 小写字母　　Ⅰ大写罗马　　ⅰ小写罗马

3.标题列表

<dl>

  <dt>标题1</dt>
  <dd>内容1</dd>
  <dt>标题2</dt>
  <dd>内容1</dd>
  <dd>内容2</dd>
</dl>

4.表格

　　表格主要是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。
　　　

表格的基本结构：

<table>
  <thead>
  <tr>
    <th>工号</th>
    <th>姓名</th>
    <th>职位</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>1</td>
    <td>Egon</td>
    <td>总监</td>
  </tr>
  <tr>
    <td>2</td>
    <td>kevin</td>
    <td>负责人</td>
  </tr>
  </tbody>
</table>

属性:

border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）

5.form

　　功能：

　　　　表单用于向服务器传输数据，从而实现用户与Web服务器的交互

　　　　表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。

　　　　表单还可以包含textarea、select、fieldset和 label标签。

　　表单属性

属性	描述
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）。
action	规定向何处提交表单的地址（URL）（提交页面）。
autocomplete	规定浏览器应该自动完成表单（默认：开启）。
enctype	规定被提交数据的编码（默认：url-encoded）。
method	规定在提交表单时所用的 HTTP 方法（默认：GET）。
name	规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate	规定浏览器不验证表单。
target	规定 action 属性中地址的目标（默认：_self）。

　　　　表单一般用来收集用户的输入信息：
　　　　　　访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。
　　　　　　服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信

6.input

<input> 元素的 type 属性有多种形态。

type属性值	表现形式	对应代码
text	单行输入文本	<input type=text" />
password	密码输入框	<input type="password" />
date	日期输入框	<input type="date" />
checkbox	复选框	<input type="checkbox" checked="checked" />
radio	单选框	<input type="radio" />
submit	提交按钮	<input type="submit" value="提交" />
reset	重置按钮	<input type="reset" value="重置" />
button	普通按钮	<input type="button" value="普通按钮" />
hidden	隐藏输入框	<input type="hidden" />
file	文本选择框	<input type="file" />

属性说明:

name：表单提交时的“键”，注意和id的区别
value：表单提交时对应项的值
- type="button", "reset", "submit"时，为按钮上显示的文本年内容
- type="text","password","hidden"时，为输入框的初始值
- type="checkbox", "radio", "file"，为输入相关联的值
checked：radio和checkbox默认被选中的项
readonly：text和password设置只读
disabled：所有input均适用

7.select标签

<form action="" method="post">
  <select name="city" id="city">
    <option value="1">北京</option>
    <option selected="selected" value="2">上海</option>
    <option value="3">广州</option>
    <option value="4">深圳</option>
  </select>
</form>

属性说明：

multiple：布尔属性，设置后为多选，否则默认单选
disabled：禁用
selected：默认选中该项
value：定义提交时的选项值

8.label标签

定义：<label> 标签为 input 元素定义标注（标记）。
说明：

label 元素不会向用户呈现任何特殊效果。
<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

<form action="">
  <label for="username">用户名</label>
  <input type="text" id="username" name="username">
</form>

9.textarea多行文本

<textarea name="memo" id="memo" cols="30" rows="10">
  默认内容
</textarea>