当前位置： 移动技术网 > IT编程>网页制作>CSS > web前端篇:html基础知识

web前端篇:html基础知识

2019年06月10日  | 移动技术网IT编程  | 我要评论

目录

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.独占一行的标签有哪些？

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网