web 前端 基础HTML知识点
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 colspan\rowspan="合并的列（横向）、行数">除开始的单元格、其余删除</td>
表单标签
<form method="get\post" action="表单提交的目标地址">
账号:<input name="lname"/><br />
密码:<input type="password" name="psw"/><br />
<button type="submit">登录</button>
</form>
form标签的属性
method = "get\post提交方式"
- 默认的提交方式是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="button\submit\reset" 按钮
- 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
web 前端 基础HTML知识点的更多相关文章
- web前端基础知识总结
上个寒假总结的web前端的一些知识点给大家分享一下 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1) dir: 文本的显示方向,默认是从左向右 ...
- web前端基础知识及快速入门指南
web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...
- Web前端-CSS必备知识点
Web前端-CSS必备知识点 css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位. 链接: ...
- 进击的Python【第十六章】：Web前端基础之jQuery
进击的Python[第十六章]:Web前端基础之jQuery 一.什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多&quo ...
- 进击的Python【第十五章】：Web前端基础之DOM
进击的Python[第十五章]:Web前端基础之DOM 简介:文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示 ...
- 进击的Python【第十四章】：Web前端基础之Javascript
进击的Python[第十四章]:Web前端基础之Javascript 一.javascript是什么 JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编 ...
- 进击的Python【第十三章】：Web前端基础之HTML与CSS样式
进击的Python[第十四章]:Web前端基础之HTML与CSS样式 一.web框架的本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客 ...
- 1+x 证书 Web 前端开发 MySQL 知识点梳理
官方QQ群 1+x 证书 Web 前端开发 MySQL 知识点梳理 http://blog.zh66.club/index.php/archives/199/
- Web前端基础怎么学？ JavaScript、html、css知识架构图
以前开发者只要掌握 HTML.CSS.JavaScript 三驾马车就能胜任一份前端的工作了.而现在除了普通的编码以外,还要考虑如何性能优化,如何跨端.跨平台实现功能,尤其是 AI.5G 技术的来临, ...
随机推荐
- jQuery与JavaScript与Ajax三者的区别与联系
简单总结: 1.JS是一门 前端语言. 2.Ajax是一门 技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新. 3.jQuery是一个 框架,它对JS进行 ...
- javascript生成一棵树
问题描述 输入一串父子节点对的数组,利用其构造一颗树 输入 const arr = [ {id:1,parentid:null}, {id:2,parentid:1}, {id:3,parentid: ...
- bean的自动装配，使用注解开发，使用java的方式配置Spring
bean的自动装配 自动装配是Spring满足bean依赖一种方式! Spring会在上下文中自动寻找,并自动给bean装配属性! 在Spring中有三种装配的方式 在xml中显示的配置 在java中 ...
- DOM操作标签、事件绑定、jQuery框架/类库
DOM操作标签 ''' 在起变量名的时候 如果该变量指向的是一个标签 那么建议使用 xxxEle eg:aEle\pEle\divEle\spanEle ''' # 动态创建一个a标签并添加到页面指定 ...
- 一款高速的NET版的离线免费OCR
PaddleOCR.Onnx 一款基于Paddle的OCR,项目使用ONNX模型,速度更快.本项目同时支持X64和X86的CPU上使用.本项目是一个基于PaddleOCR的C++代码修改并封装的.NE ...
- 8.0 vue cli自定义页面
1.新建a.html(public文件夹下)文件,并设定div的id="a" <!DOCTYPE html> <html lang=""> ...
- 吊炸天，Spring Security还有这种用法！
在用Spring Security项目开发中,有时候需要放通某一个接口时,我们需要在配置中把接口地址配置上,这样做有时候显得麻烦,而且不够优雅.我们能不能通过一个注解的方式,在需要放通的接口上加上该注 ...
- Python汉诺塔求解
1 def hanoi(n,a,b,c): 2 3 if(n>0): 4 5 hanoi(n-1,a,b,c) 6 7 print("Move disc no:%d from pile ...
- c++ 超大整数除法 高精度除法
c++ 超大整数除法 高精度除法 解题思路 计算a/b,其中a为大整数,b为普通整数,商为c,余数为r. 根据手算除法的规则,上一步的余数记为r,则本次计算的被除数为t=r*10+被除数的本位数值a[ ...
- 技术分享 | app自动化测试（Android）--App 控件定位
原文链接 客户端的页面通过 XML 来实现 UI 的布局,页面的 UI 布局作为一个树形结构,而树叶被定义为节点.这里的节点也就对应了要定位的元素,节点的上级节点,定义了元素的布局结构.在 XML 布 ...