web 前端 基础HTML知识点

web 文章 2022-07-20 10:03 0 全屏看文

web系统架构体系

  • B/S(Browser/Server):浏览器实现
    • 优点:
      • 规范、使用方便、本身实现成本低
      • 容易升级、便于维护
    • 缺点:
      • 没有网络,无法使用
      • 保存数据量有限,和服务器交互频率高、耗费流量
      • 安全性差一点
  • C/S(Client/Server):客户端实现
    • 优点:
      • 可以在无网络环境下使用
      • 和服务器交互相对频率低、省流量
      • 安全性高一点
    • 缺点:
      • 需要安装客户端
      • 升级麻烦,维护成本高
      • 开发成本高

什么是HTML

html是超文本标记语言(Hyper Text Markup Language),是一种使用标记标签来描述网页的语言。

超文本

用超链接的方法将各种不同空间的文字信息组织在一起的网状文本。可以用来链接图片,音频,视频,动态图片等

W3C标准

结构化标准语言(XHTML、XML)

表现标准语言(CSS)

行为标准(DOM、ECMAScript)

HTML标签

标签一般成对存在,如<html></html>

结构体标签

<!DOCTYPE html>

说明html5中文档的类型是html文档

html标签

<!--html的根标签--><html></html>

title标签

<!--设置网页标题--><title>我的网页</title>

meta标签

<!-- meta标签,charset 设置网页字符集编码--><meta charset="utf-8"><meta name="keywords" content="关键字"><meta name="description" content="描述">

body标签

<!--体标签,网页呈现的内容--><body>内容</body>

文本标签

注释

<!-- 注释的内容 -->

标题

<!-- 数字范围:1 ~ 6,数字越大,字体越小--><h数字>标题<h数字>

字体

<!-- font标签 --><!-- 属性color:文字颜色(英文单词、#+6位16进制的颜色值、rgb(,,))--><!-- 大小seize:选值1-7,默认是3 --><!-- 字体face:选择字体名称 --><font color=red>HelloWorld</font>

换行

<!-- 单标签,换行 --><br/>

水平分割线

<!-- hr标签,分割线,单标签    属性    color:颜色    width:可以使用像素(px)或者百分比    align:水平对齐方式,默认居中--><hr color="blue" width="80%" aligin=left>

加粗

<b></b>

倾斜

<i></i>

下划线

段落

<p></p>

居中

<center></center>

下标

<sub></sub>

上标

<sup></sup>

图片标签

<img src="地址" width="宽度" height="高度" align="图文混排时,对齐方式,居中:middle" alt="图片说明,当图片加载失败显示"title="鼠标悬停说明"/>

相对路径"../"代表上一层目录,同一层目录可以直接访问

绝对路径:1、网络图片,直接写图片地址;2、本机磁盘地址"盘符:/图片名"

超链接

<a href="地址或#+锚链接名" target="打开新窗口的位置">链接名或图片</a>

target = "_self":当前窗口打开

target = "_blank":新窗口打开

target = "_top":在顶层页面所在位置打开

target = "_parent":在父页面的窗口位置打开

target = "_iframeName":在iframe位置打开

使用锚链接需要给目标标签加属性id,唯一的标记

发送邮件

<a herf="mailto:邮箱地址">连接名或图片</a>

下载

<a herf="只可以是zip文件">连接名或图片</a>

表格标签

<!--table代表表格标签,tr代表行,td代表列--><table>    <tr>        <td>编号</td>        <td>名称</td>        <td>价格</td>    </tr>    <tr>        <td>001</td>        <td>苹果</td>        <td>12</td>    </tr>    <tr>        <td>002</td>        <td>香蕉</td>        <td>18</td>    </tr></table>

属性

表格的属性(table)

border = "边框线条粗细"

cellspacing = "单元格间隙的值"

align = "表格水平对齐方式"

width = "表格的宽度"

height = "表格的高度"

bgcolor = "表格的背景色"

background = "背景图片地址"

行的属性(tr)

height = "行高"

align = "水平对齐方式"

valign = "垂直对齐方式"middle、top、bottom

bgcolor = "行的背景色"

background = "行背景图片地址"

单元格的属性(td)

width = "宽度"会影响整个列

align = "水平对齐方式"

valign = "垂直对齐方式"middle、top、bottom

bgcolor = "单元格的背景色"

合并单元格

1、找到要合并单元格的开始位置

2、清除合并的是行还是列

3、合并几行或几列

4、除开始位置的单元格外,被合并的单元格进行删除

<!-- 合并开始的单元格 --><td colspanrowspan="合并的列(横向)、行数">除开始的单元格、其余删除</td>

表单标签

<form method="getpost" action="表单提交的目标地址">    账号:<input name="lname"/><br />    密码:<input type="password" name="psw"/><br />    <button type="submit">登录</button></form>

form标签的属性

method = "getpost提交方式"

  • 默认的提交方式是get,地址栏可以看到的,post方式地址栏不可见
  • get方式相对post不安全
  • get方式提交的数据量有限制的,而post理论上没有限制

action = "表单提交的目标地址"

文本框标签(<input> </input>)属性

name = "提交参数名称"

type = "input标签样式"

  • type="text" 普通文本框
    • maxlength = "最大字符个数"
  • type="password" 密码框
  • type="radio" 单选框
    • value = "值"
    • checked = "checked"默认选择
  • type="date" 日期框
  • type="email" 邮箱文本框(自带针对邮箱的校验)
  • type="file" 文件文本框(可以选择各种文件,比如说图片,文件)
  • type="checkbox" 多选框
    • value = "值"
    • checked = "checked"默认选择
  • type="hidden" 隐藏文本框
  • type="color" 颜色选择框
  • type="number" 数字选择框
  • type="buttonsubmitreset" 按钮
  • type="image" 图形化按钮,功能相当于submit

placeholde = "提示文字"

按钮标签(<button></button>)属性

type = "按钮功能"

  • type="submit" 按钮(自带提交功能)
  • type="button" 按钮(不带提交功能,就是一个最普通的按钮)
  • type="reset"按钮(重置功能)

下拉框标签

<select>    <option>下拉框列表标签</option>    <option selected="selected">默认选中</option></select>

文本域标签

<textarea></textarea>

列表标签

有序列表

<ol type="1">  <li></li>  <li></li>  <li></li></ol>

type:序号类型

  • 1:数字(默认)
  • A:大写字母
  • I:大写罗马数字
  • a:小写字母
  • i:小写罗马数字

无序列表

有符号无序列表

<ul type="circle">  <li></li>  <li></li>  <li></li></ul>

type:符号类型

  • circle:空心圆
  • discs:实心圆(默认)
  • quare:实心方形

无符号无序列表

<dl>  <dt></dt> <!-- 列表标题 -->  <dd></dd>  <dd></dd>  <dd></dd></dl>

多媒体标签:

视频

<video width="320" height="240" controls> <!--controls为视频播放控制键-->    <source src="视频地址" type="video/文件格式">    您的浏览器不支持 HTML5 video 标签。</video>

音频

<audio controls>     <source src="音频地址" type="audio/文件格式">    Your browser does not support this audio format.</audio>

iframe框架标签

<iframe src="引用页面地址"></iframe>

属性

width:宽度

height:高度

frameborder:边框粗细

scrolling:滚动条 yes、no、auto

新页面

-EOF-