HTML5基础知识学习笔记
1.Html5基础讲解
1.1HTML5基础标签:
head:头标签,一般会将一些网页的基本配置和文件引用在head中设置;
body:内容标签,里面是整个网页要展示内容部分;
1.2HTML5标题:
h1…h6等,后面跟的数字越大,对应的标题的字体大小就越小;
1.3HTML5段落
p标签表示段落,在p标签中可以编写文字段落;
1.4HTML5连接
a标签表示连接,可以在里面设置点击之后跳转到其他url;
1.5HTML5图像
img标签表示图像标签,可以通过其设置图片展示;
1.6HTML5换行标签
br标签表示换行,使用它时最后带上“/”,因为这样更规范。
2.HTML5元素简介
元素:从开始标签到结束标签的所有代码,元素是可以进行嵌套的,正是这个属性可以是网页可以形成百变的组合效果。
3.HTML属性
可以通过设置属性为元素提供更多的属性,属性以键值对的形式存在
eg:href=“xxxxx”
常用的标签属性:
h1标题标签: align:设置对齐方式
body标签: bgcolor:设置整个body背景颜色
a标签: target:指定在何处打开连接
通用属性:
-class:规定元素的类名
-id:规定元素的唯一id
-style:规定元素的样式
-title:规定元素的额外信息
4.HTML格式化
常用格式化标签:
-b标签: 定义粗体字
-big标签:定义大号字
-em标签:定义着重文字
-i标签:定义斜体文字
-small标签:定义小号字
-strong标签:定义加重语气
-sub标签:定义下标字
-sup标签:定义上标字
-ins标签:定义插入字
-del标签:定义删除字
5.HTML样式
三种样式表插入方式:
-外部样式表:
<link rel =”stylesheet” type=”text/css” href=”mystyle.css”>
-内部样式表:
<style type=”text/css”>
body{background-color ;red}
p{margin-left:20px}
</style>
-内联样式表:
<p sytle =”color:red”>
6.HTML链接
href属性:指向另一个文档的链接,页面外的跳转
name属性:创建文档内的链接,页面内的跳转
eg:
<a name=”tips” > 待跳转的位置</a>
<a href=”#tips”>开始跳转的位置</a>
7.HTML表格
标签
<table> : 定义表格
<caption> : 定义表格标题
<th> : 定义表格的表头
<tr>: 定义表格的行
<td>: 定义表格的单元
<thread> : 定义表格的页眉
<tbody> : 定义表格的主体
<tfoot> : 定义表格的页脚
<col> : 定义表格的列属性
几种表格
最简单的表格:
<table border=”1”>
<tr>
<td>表格1</td>
<td>表格2</td>
<td>表格3</td>
</tr>
<tr>
<td>表格1</td>
<td>表格2</td>
<td>表格3</td>
</tr>
</table>
带表头的表格:
<table border=”1”>
<tr>
<th>单元</th>
<th>单元</th>
<th>单元</th>
</tr>
<tr>
<td>表格1</td>
<td>表格2</td>
<td>表格3</td>
</tr>
<tr>
<td>表格1</td>
<td>表格2</td>
<td>表格3</td>
</tr>
</table>
带标题的表格:
<table border=”1”>
<caption>重要表格</caption>
<tr>
<th>单元</th>
<th>单元</th>
<th>单元</th>
</tr>
<tr>
<td>表格1</td>
<td>表格2</td>
<td>表格3</td>
</tr>
<tr>
<td>表格1</td>
<td>表格2</td>
<td>表格3</td>
</tr>
</table>
表格内的标签:
<table border=”1”>
<caption>重要表格</caption>
<tr>
<th>单元</th>
<th>单元</th>
</tr>
<tr>
<td>表格1</td>
<td>表格2</td>
</tr>
<tr>
<td>
<ul>
<li>菠萝</li>
<li>菠萝</li>
<li>菠萝</li>
</ul>
</td>
<td>我想吃了</td>
</tr>
</table>
单元格间距设置表格: <table border=”1” cellspacing=”10”>
单元格边距设置表格:<table border=”1” cellpadding=”10”>
表格背景色,表格背景图片设置:
背景图片: <table border=”1” background=”images/Desert.jpg”>
背景颜色: <table border=”1” bgcolor=”aqua”>
8.HTML列表的使用
列表标签:
-<ol>: 有序列表
-<ul>: 无序列表
-<li>: 列表项
-<dl>:列表
-<dt>:列表项
-<dd>:描述
常用列表示例:
无序列表:
<ul type=”square”>
<li>第1个</li>
<li>第2个</li>
<li>第3个</li>
<li>第4个</li>
</ul>
使用标签:<ul>,<li>
属性: disc,circle,square 代表了列表前的符号样式
有序列表:
<ol start=”10”>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
使用标签:<ol>,<li>
属性 :A,a,l,i,start 表示有序列表前面的数字样式
嵌套列表:
<ul>
<li>动物</li>
<ul>
<li>小狗</li>
<li>小猫</li>
</ul>
<li>植物</li>
<ul>
<li>小草</li>
<li>小花</li>
</ul>
<li>人类</li>
</ul>
使用标签:<ul>,<ol>,<li>
自定义列表:
<dl>
<dt>ahah</dt>
<dd>sssssssss</dd>
<dt>ahah</dt>
<dd>sssssssss</dd>
<dt>ahah</dt>
<dd>sssssssss</dd>
</dl>
使用标签:<dl>,<dt>,<dd>
9.HTML块的使用
HTML块元素:块元素显示时,通常会以新行开始
一般有:<h1>、<p>、<ul>
HTML内联元素:内联元素通常不会以新行开始
一般有:<b> 、<a> 、<img>
HTML<div>元素: div元素也被称为块元素,其主要是组合HTML元素的容器
HTML<span>元素: span是内联元素,可作为文本的容器
10.HTML5的布局
一般可以使用div进行布局,也可以使用table进行布局,使用这两个标签可以搭出一个网页的大体框架,然后往其中提充具体的细节元素;
11.HTML5的表单
表单常用标签:
<form>:表单
<input>:输入框
<textarea>:文本框
<label>:控制标签
<fieldset>:定义域
<legend>:域的标题
<select>:选择列表
<optground>:选项组
<option>:下拉列表中的选项
<button>:按钮
常用的表单:
复选框表单:
eg: 请选择你喜欢吃的水果:
苹果<input type=”checkbox”>
香蕉<input type=”checkbox”>
水蜜桃<input type=”checkbox”>
单选按钮:
eg: 请选择你的性别:
男<input type=”radio” name=”sex”>
女<input type=”radio” name=”sex”>
下拉框:
eg:<select>
<option>上海</option>
<option>南京</option>
<option>北京</option>
</select>
文本域:
eg:<textarea cols=”30” rows=”10”>please input your message here…</textarea>
按钮:
eg:<input type=”submit” value=”提交”>
<input type=”button” value=”提交”>
表单提交数据到服务器:
eg:<form action=”http://localhost/MyServer/server1.php” method=”get”>
<table>
<tr>
<th colspan=”2”>登录</th>
</tr>
<tr>
<td>用户名:</td>
<td><input type=”text” name=”name”></td>
</tr>
<tr>
<td>密码:</td>
<td><input type=”password” name=”password”></td>
</tr>
<tr>
<td colspan=”2”><input type=”submit” value=”提交”></td>
</tr>
</table>
</form>
12.HTML5的框架
frame:框架标签
框架对于页面设计有着很大的作用
frameset:框架集标签
框架集标签定义如何将窗口分割为框架
每个frameset定义了一系列行或列
rows、cols的值规定了每行或每列占据屏幕的面积
常用标签: norsize固定框架大小,cols列,rows行
内联框架: iframe ,现在推荐使用的框架
HTML5基础知识学习笔记相关推荐
- Python 基础知识学习笔记——NumPy
Python基础知识学习笔记--NumPy 与 matlab 优秀的矩阵运算类似,python 提供了 numpy 库,这对熟悉 matlab 的用户来说非常友好.向量.矩阵和多维数组是数值计算中必不 ...
- Python 基础知识学习笔记——OpenCV(1)
Python 基础知识学习笔记--OpenCV(1) OpenCV是一个开源的跨平台计算机视觉和机器学习软件库,它轻量而且高效,被广泛的使用. 整理一下OpenCV学习笔记,以防忘记. 文章目录 Py ...
- Python基础知识学习笔记——Matplotlib绘图
Python基础知识学习笔记--Matplotlib绘图 整理python笔记,以防忘记 文章目录 Python基础知识学习笔记--Matplotlib绘图 一.绘图和可视化 1.导入模块 2.一个简 ...
- python基础知识学习笔记(2)
python基础知识学习笔记(2) 整理一下python基础知识,以防忘记 文章目录 python基础知识学习笔记(2) python简洁的一行代码 python简洁的一行代码 1.交换两个变量 # ...
- python基础知识学习笔记(1)
python 基础知识学习笔记(1) 总结一下Python基础知识,以防忘记. 文章目录 python 基础知识学习笔记(1) 一.起步 1.python安装与编译环境 二.变量和简单数据类型 三.列 ...
- oracle数据库基础知识总结,oracle数据库基础知识学习笔记
oracle数据库基础知识学习笔记 一.oracle数据库类型: Char: 字符型(最大长度2000,定长.不足时以空格补充) Varchar2:字符型 最大长度 4000,变长,实际长度由存储的 ...
- Python基础知识学习笔记(一)
Python基础知识学习笔记(一) 文章目录 Python基础知识学习笔记(一) (一) 认识python 1.注释 2.变量及类型 3.关键字(标识符) (1)什么是关键字? (2)查看关键字 (3 ...
- opencv-python基础知识学习笔记
opencv-python基础知识学习笔记 原博地址:https://www.cnblogs.com/silence-cho/p/10926248.html 目录: opencv-python基础知识 ...
- 图像基础知识学习笔记
图像基础知识学习笔记 文章目录 图像基础知识学习笔记 前言 一.图像基础知识相关笔记 1.光学系统影响图像的结构主要包括什么? 2.常见噪声都有什么,其分类,及特点? 3.光圈,快门,景深? 4. I ...
最新文章
- vue中显示和隐藏如何做动画_vue-State Transitions(状态转换)
- 【Eclipse】推荐UML插件Green UML、AmaterasUML
- 强化学习(六)---基于无模型强化学习方法
- 深度学习框架TensorFlow(4.Fetch and Feed)
- mybatis select语句会默认带排序吗_10月阿里最新38道Java面试题解析(MyBatis+消息队列+Redis)...
- java.sql.SQLException: Io 异常: The Network Adapter could not establish the connection 解决
- 【论文写作】SSM超市管理系统如何写可行性分析
- STM32CubeMX 配置STM32F407 实现HAL库延时微妙方案
- 2d unity 多物体 射线_[蛮牛驿馆] Unity2D:用射线检测物体的点击
- 中国IT实验室--Visual C++编程电子书专题下载
- 怎样改变计算机桌面的特效主题,教你如何更改电脑主题,桌面,图标,系统主题 - 飞机城社区论坛 - 阎良论坛 飞机城论坛,......
- android gps测速代码,【GPS测速仪】GPS测速仪 GPS speedometer 1.6.0下载_安卓(android)软件下载-魅族溜...
- 一款基于VUE3.0的开源卡密发卡系统
- LeetCode知识点总结 - 884
- python文件处理基础_第六篇:python基础之文件处理
- HSSFSheet设置Excel打印区 横向打印
- Bootstrap 网格系统
- 深入浅出ES6(四):模板字符串
- FileCounter文件统计小工具
- 精美响应式列表商城卡密自动发卡系统源码