web前端篇: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>
      <!--a标签是超链接标签-->
      <!--b标签是文本加粗标签-->
    • 书写规范

      • 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.字符实体(具有特殊意义的符号)
  • &nbsp; 表示一个空格
  • &lt; 表示小于号 <
  • &gt; 表示大于号 >
  • '&copy ;' 表示版权符号
  • &yen; 表示人民币符号¥
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.独占一行的标签有哪些?

posted @ 2019-06-09 09:42 是阿凯啊 阅读(...) 评论(...) 编辑 收藏