web前端篇:html基础知识

程序员文章站 2022-06-19 18:26:57

[TOC] 1.web前端：什么是web? web组成？ web服务器 web浏览器 2.HTML概述 2.1HTML介绍什么是HTML？标记 2.2HTML在计算机中如何表现所有的网页文件在计算机中以.html或。htm文件存储。开发工具：运行工具： Chrome 浏览器 FireFo ......

2.html概述
- 2.1html介绍
- 2.2html在计算机中如何表现
3.html基础语法

1.web前端：

什么是web?

web 就是网页，是一种基于b/s的应用程序
b：browser浏览器
s：server服务器

web组成？

浏览器：代替用户向服务器发送请求
服务器：接收用户请求并响应
通信协议：规范数据在网络中是如何打包传送的。
http(hypertext transfer protocal)：超文本传输协议

web服务器

作用：
  接收用户请求并左幅响应
  存储web信息
  具备安全性能

web浏览器

产品：
  apache
  tomcat
  iis
  nginx

作用：
  代替用户向服务器发送请求
  做为响应数据的解释引擎，向用户呈现界面
主流浏览器产品：
  根据浏览器的内核、引擎进行划分
  1. microsoft ie
  2.google chrome
  3.mozilla firefox
  4.apple safari
  5.apple safari
浏览器引擎：
  渲染：解析html,css控制页面渲染效果
  js引擎：解释网页脚本文件
前端开发技术
  html,css,javascript

2.html概述

2.1html介绍

什么是html？

hypertext markup language
 超文本    标记    语言
作用：书写网页结构

标记

也叫标签，主要用来标记网页中的内容，以实现网页的布局和js操作

2.2html在计算机中如何表现

所有的网页文件在计算机中以.html或。htm文件存储。
开发工具：

1.记事本
2.editplus pycharm
3.sublime webstorm vscode atom...

运行工具：
- chrome 浏览器
- firefox 浏览器
调试方法：f12打开网页源码。

3.html基础语法

3.1.标签/标记

在网页中具有特殊功能的符号，html中所有的标签都以<>为标志，作用区分普通文本。
标签分类

1.双标签

成对出现，有开始有结束。

eg:<开始标签> 标签内容 </结束标签>

2.单标签

只有开始标签，没有结束标签，可以手动添加、表示结束。

eg:<标签名>
标签嵌套
- 在成对的标签中出现其他标签。
- 嵌套结构中，外层元素程为父元素，内层元素称为子元素
```
<a>
    <b>你好</b>
</a>


```
- 书写规范
  - html不区分大小写，保持适当缩进增强代码可读性

3.2 标签属性

标签的属性主要用于修饰标签的显示效果。
相关语法：
- 属性由属性名和属性值组成：属性名="属性值"
- 属性的声明必须写在开始标签中：..开始标签>
- 每个标签都可以设置多个属性，属性之间使用空格隔开：..开始标签>

3.3 html注释

注释语句：
注意：
- 注释不能卸载标签里，如<p >
- 注释不能嵌套

3.4html结构组成

文档的类型声明方式：开头第一行<!doctype html> html5声明方式
- 作用：告诉浏览器当前使用的html版本，以便浏览器能正确解析html标签和渲染样式。
- 书写位置：文档最开始位置。

文档的开始和结束

在文档类型声明之后，使用一对
标签标示文档的开始和结束

在html标签中，包含两对子元素

<html>
    <head></head>
    <body></body>
</html>

<head>标签标示网页的头部信息，包含网页的标题，选项卡的图标，网页的关键字，作者，描述等信息，还可以引入外部的资源文件
<body>标签表示网页的主体信息，网页所呈现的内容都要写在body里

<head>标签中包含的子元素
- 设置网页的标题 <title></title>
- 设置网页的字符编码<meta charset="utf-8">

3.5文本标签

3.5.1.字符实体（具有特殊意义的符号）

  表示一个空格
< 表示小于号 <
> 表示大于号 >
'&copy ;' 表示版权符号
¥ 表示人民币符号¥

3.5.2.文本样式

<i></i> 斜体显示文本
<u></u> 文本添加下划线
<b></b> 文本加粗效果
<s></s> 文本添加删除线
<sup></sup> 上标显示文本
<sub></sub> 下标显示文本
特点：这些标签可以与其他的标签或文本共行显示

3.5.3.标题标签

以不同的文字大小和加粗方式显示文本

语法：<hn></hn>n取值 1- 6，字体大小是逐级递减的

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>

特点：
- 会改变文字的大小并且具有加粗效果
- 每个标题都会具备垂直的空白距离
- 每个标题都独占一行，不与其他元素共行显示
- 每个标题都可以添加属性 align
  - 取值：left / center / right
  - 设置文本的水平对齐方式，默认居左对齐
  - <h1 align="center">一级标题<h1>

3.5.4.段落标签

作用：突出显示一段文本，每段文本都独占一行或一块，不予其他元素共行显示，并且也具备垂直的空白距离
语法：
- <p></p>
- 属性：align 设置文本的水平对齐方式
- 取值： left / center / right

3.5.5.格式标签

换行标签：<br>
水平线标签:<hr>

3.5.6.分区标签

块分区
- <div></div>
- 作用：划分页面结构，配合css实现网页布局
- 特点：独占一块显示
行分区元素
- <span></span>
- 作用：设置同一行文本的不同样式，结合css
- 特点：可以与其他元素或文本共行显示，允许在一行文本中使用多个span

3.5.7.标签分类

块级元素
- 只要在网页中独占一行，不予其他元素共行显示的元素都是块级元素。
- 作用：都网页可以做布局
- 特点：都添加align属性，设置内容水平对齐方式
- eg:h1~h6,ul,ol,li,form,table,tr,p,div
行内元素/内联元素
- 可以与其他元素共行显示。
- eg:i b strong sub sup span

3.6 列表标签

作用：按照从上到下的方式来排列数据
列表的组成：
- 有序列表<ol><ol>
  - 默认是按照数字排序
- 无序列表<ul></ul>
  - 默认以实心原点作为标识
- 列表项
  - 列表中的每一条数据都是一个列表项
  - 语法：
- 注意：列表项要嵌套在列表标签中使用

列表属性

有序列表--ol

type属性：设置项目符号

 1 ：按照数字排列显示，默认值
 a : 按照小写字母顺序排列
 a ：按照大写字母排列
 i : 按照罗马数字排列
 i : 按照罗马数字排列

start属性：设置从第几个字符开始排序
- 取值：数字

无序列表--ul

type属性：设置项目符号

disc 实心圆点（默认）
circle 空心圆点
square 实心方块
none 不显示项目符号

列表嵌套

在一个列表中出现其他列表。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
</head>
<body>
    <ul type="circle">
        <li>山东
            <ol type="i">
                <li>德州</li>
                <li>青岛</li>
                <li>济南</li>
                <li>淄博</li>
            </ol>
        </li>
        <li>吉林
            <ol type="i">
                <li>长春</li>
                <li>吉林</li>
                <li>白城</li>
                <li>敦化</li>
            </ol>
        </li>
        <li>北京
            <ol type="i">
                <li>朝阳</li>
                <li>昌平</li>
                <li>西城</li>
                <li>东城</li>
            </ol>
        </li>
    </ul>

</body>
</html>

3.7 图像与超链接标签

url
- 统一资源定位符：用来标识网络中资源的位置，俗称路径url 组成：协议域名文件目录及文件名。
- url分类：
  - 绝对路经：
    - 从根目录开始查找，常用于网络文件路经。
  - 相对路经：
    - 从当前文件所在的文件夹开始查找
  - 根相对路径（了解）：
    - 从web程序所在的根目录开始查找资源文件
    - 注意：网络url中不能出现中文，url是严格区分大小写的。
图像标签
- 在网页中插入一张图片
- 语法：
- 属性：
  - src :指定要显示的图片路径
  - width ：设置图片的宽度，以像素px为单位，也可以省略单位
  - height ：设置图片的高度
    注意 : src 为必填属性，宽高可以省略，省略宽高的话，图片将以原始尺寸显示在网页中
  - title ：用来设置图片的标题，当鼠标悬停在图片上方时出现
  - alt : 用来设置图片加载失败之后的提示文本

3.8超链接标签

什么是超链接标签
- 能够实现从当前文件跳转到其他文件的标签
语法：
- <a></a>
- 标签属性：
  - href :必填属性，指定链接地址，以路径形式给出,#表示当前页，不会发生页面刷新操作，如果属性为"",也表示当前页，但是包含了网络请求，相当于刷新页面。
  - target :可选属性，设置目标文件的打开方式。
    - _self ：默认值，表示在当前窗口打开
    - _blank:表示新建窗口打开
```
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
</head>
<body>
    <a href="https://www.baidu.com/">百度一下</a>
    <a href="">回到顶部</a>
</body>
</html>
```

锚点链接

链接到当前文件的指定位置

1. 设置锚点<a name="anchor1"></a>
2. 设置跳转<a href="#anchor1">早年经历</a>

<body>
    <a href="https://www.baidu.com/" name="ac1">百度一下</a>
    <a href="#ac1">回到顶部</a>
</body>

3.9 表格

3.9.1 标签介绍：

表格标签：<table></table>
行标签：<tr></tr>
单元格标签：<td></td>

创建顺序：

在表格标签中嵌套行标签，每一个 tr 就代表一行
在行标签中创建单元格标签，用来存放数据

    <table>
        <tr><!--代表一行-->
            <td>id</td><!--代表单元格-->
            <td>name</td>
            <td>age</td>
        </tr>
        <tr>
            <td>1</td>
            <td>xjk</td>
            <td>18</td>
        </tr>
        <tr>
            <td>2</td>
            <td>half</td>
            <td>15</td>
        </tr>
    </table>

3.9.2标签属性

table 属性
- border ：设置边框，取值以px为单位的数值（px可以省略）
- width ：设置宽度
- height ：设置高度
- align ：设置表格在其父元素中的水平对齐方式
- cellpadding : 设置单元格的内边距（内容与边框之间的距离），取值为px单位的数值
- cellspacing : 设置单元格的外边距（单元格与单元格之间的距离，或者单元格与表格边框之间的距离），取值像素为单位的数值
- bgcolor : 设置表格的背景颜色，取值可以是英文的颜色名称

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
</head>
<body>
    <a href="https://www.baidu.com/" name="ac1">百度一下</a>
    <a href="#ac1">回到顶部</a>
    <table border="1"  align="center" cellpadding="10" cellspacing="1" bgcolor="red">
        <tr>
            <td>hello</td>
            <td>html</td>
        </tr>
    </table>
</body>
</html>

tr 属性
- bgcolor : 设置当前行的背景颜色
- align ：设置当前行中内容的水平对齐方式
  取值： left / center / right
- valign :设置当前行内容的垂直对齐方式
  取值：top / middle / bottom,默认垂直居中。
td属性
- width 设置单元格的宽度
- height 设置单元格的高度
- align 单元格内容的水平对齐方式
- valign 单元格内容的垂直对齐方式
- bgcolor 单元格的背景颜色
单元格的合并
- 单元格独有的属性 colspan rowspan
- 单元格的跨列合并
  - 从当前单元格的位置开始，横向向右合并几个单元格colspan = "3" ->跨3列进行合并(包含自身)
- 单元格的跨行合并
  - 从当前的单元格开始，纵向向下合并单元格rowspan = "3" ->向下跨3行合并单元格
- 注意：一旦发生单元格合并，跨列合并，要删除当前行中多余的单元格跨行合并，要删除其后行中多余的单元格始终保持表格结构完整。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
</head>
<body>
    <table border="1" cellspacing="0" width="400" height="400">
        <tr>
            <td colspan="2" bgcolor="red"></td>
            <!--<td>2</td>-->
            <td rowspan="2" bgcolor="#00008b"></td>
        </tr>
        <tr>
            <td rowspan="2" bgcolor="#663399"></td>
            <td bgcolor="#ff1493"></td>
            <!--<td>6</td>-->
        </tr>
        <tr>
            <!--<td>7</td>-->
            <td colspan="2" bgcolor="#adff2f"></td>
            <!--<td>9</td>-->
        </tr>
    </table>
</body>
</html>

行分组

允许将表格中的一行或者是若干行划分为一组，便于管理。

语法

1. 表头行分组
<thead>
    <tr>
        <td></td>
    </tr>
</thead>
2. 表尾行分组
<tfoot>
    <tr>
        <td></td>
    </tr>
</tfoot>
3. 表主体信息
<tbody>
    <tr>
        <td></td>
    </tr>
</tbody

3.10.表单

3.10.1.用于接收用户的数据并且提交给服务器

表单2个要素
- form表单元素
- 表单控件
  - 提供了能够跟用户交互的可视化组件

3.10.2.form元素

注意：form元素本身是不可见的，却不能省略，因为数据的提交功能要由 form 元素完成
语法：<form></form>

form标签属性

action
- 指定数据提交的目的地址
method
- 数据请求方式 get /post (默认get)
- get
  - 通常用于向服务器端获取数据
  - 特点：
    - 提交的数据会以参数的形式拼接在url后面
    - 安全性较低
    - 提交数据最大2kb
- post
  - 将数据提交给服务器处理
  - 特点：
    - 隐式提交，看不到提交数据
    - 安全性较高
    - 没有数据大小限制

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
</head>
<body>
    <form action="">
        <input type="text" name="user">
        <input type="password" name="pwd">
        <input type="submit" value="提交">
    </form>
</body>
</html>
##################################################################################
file:///d:/code/day43.html

file:///d:/code/day43.html?user=alex&pwd=123

3.10.3.表单控件

作用：提供与用户交互可视化组件（这里注意只有放在表单元素中的表单控件才允许被提交）
分类：
- 文本框与密码框
  - 语法：
    - 文本框：<input type="text">
    - 密码框：<input type="password">
  - 属性：
    - name 属性定义当前控件的名称，缺少的话无法提交。
      
      name = "uname"
    - value 属性，要提交给服务器的值，同时也是默认显示在控件上的值。
    - maxlength 用来限制用户输入最大字符串。
    - placeholder 用户输入之前显示在框中的提示文本。
```
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
</head>
<body>
    <input type="text" name="user" maxlength="5" placeholder="输入至少5位数字">
    <input type="password" name="pwd" maxlength="10" placeholder="输入至少10位的密码">
</body>
</html>
```
- 单选框和复选框
  - 单选按钮<input type="radio">
  - 复选框<input type="checkbox">
  - 属性：
    - name 定义控件名称，还起到分组的作用，一组中的按钮名称必须保持一致。
    - value 属性设置当前控件的值，最终提交给服务器。
    - checked 属性设置预选中状态可以省略属性值，也可以使用"checked" 作为值。
```

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
</head>
<body>
    <input type="radio" name="sex" checked="checked">男
    <input type="radio" name="sex">女
</body>
</html>

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
</head>
<body>
    <input type="checkbox">抽烟
    <input type="checkbox">喝酒
    <input type="checkbox">烫头
</body>
</html>
```
- 隐藏域和文件选择框
  - 隐藏域
    - 作用：需要提交给服务器但是却不需要呈现给用户的数据，都可以放在隐藏域中。
    - 语法：<input type='hidden'>
    - 属性：
      - name 控件名称
      - value 控件的值
  - 文件选择框
    - 作用：选择文件上传，发送给服务器
    - 语法：<input type="file">
    - 属性：name 定义控件名称。
- 下拉选择框
  - <select name="province">
    - 属性：
      - multiple 可进行多选(ctrl+鼠标左键)
```
    <select name="pro" id="" multiple>
        <option value="hebei">河北</option>
        <option value="heilongjiang">黑龙江</option>
        <option value="hunan">湖南</option>
    </select>
```
- 文本域
  - 支持用户多行文本
  - 语法：<textarea></textarea>
  - 属性：
    - name 控件名称
    - cols 指定文本默认显示的列数，一行中能显示的英文字符量，中文减半
    - rows 指定文本域能够显示的行数
  - 注意：文本域可以由用户调整大小
```
<textarea name="wenben" id="123" cols="30" rows="10"></textarea>
```
- 按钮
  - 提交按钮
```
<input name='' id='' type="submit">
```
  - 重置按钮
```
<form action="">
    <input type="text" name="123">
  <input name='' id='' type="reset" value="重置按钮">
</form>
```
  - 普通按钮
```
<input type="button" value="点击">
```
  - 按钮显示文本
```
<button>按钮显示文本</button>
```
    - 注意：
      - 按钮标签可以在任何地方使用，不局限在form表单中使用
      - 按钮标签使用在form中，默认具有提交功能，等同于input submit
      - 可以添加属性type 取值 submit/reset/button 进行区分（非必填）
      - 在表单外做为普通按钮使用时，需要通过js，动态绑定事件
- label特殊方法
  - 使用label标签包裹表单控件要显示的文本信息，为label标签添加for属性，属性值与所要绑定的表单控件的id属性值保持一致，实现文本与控件的绑定。
```
<label for="male">男</label>
<input type="radio" name="gender" value="male" id="male">
```

4.练习题：

1.字体标签包含哪些？

2.超链接标签a标签中href属性有什么用？

3.img中标签中src和alt属性有什么？

4.如何创建一个简易的有边框的表格？

5.form 标签中的action属性和method属性的作用？

6.在form标签中表单控件input中type类型有哪些？并分别说明他们代指的含义

7.表单控件中的name属性和value属性有什么意义？

8.用socket 开启一个服务端，客户端访问服务器？

9.在一行内显示的标签有哪些？

10.独占一行的标签有哪些？

上一篇：利用JS动态生成隔行换色HTML表格的两种方法

下一篇： PHP中使用GD库创建圆形饼图的例子