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 ,现在推荐使用的框架

时间: 2024-10-12 17:43:23

HTML5基础知识学习笔记的相关文章

ARM基础知识学习笔记

/*****************数电知识*******************/ PN结(Positive-Negative) 三极管:BJT(双极结型三极管Bipolar Junction Transistor)               FET(场效应管Field Effect Transistor)          (单极结型) 1.MOSFET (金属氧化物半导体Metal Oxide Semiconductor FET)               2.JFET(结型Junct

C++基础知识学习笔记

基本语法 C面向过程思想:程序=(数据结构)+(算法) 数据结构与算法分离,以算法(函数)为主. C++面向对象思想:程序=(数据结构+算法) 数据结构(属性)与算法(操作)绑成一个类,定义一个个对象对象=(数据结构+算法)  ,程序=(对象+对象+对象+--) 面向对象程序设计的程序员有两类:1.面向对象应用程序设计2.类库的设计 头文件:类的声明            ---类的外部接口       (成员函数在类声明中实现时,一般很简短,默认为内联函数)源文件:类的成员函数定义     -

〖前端开发〗HTML/CSS基础知识学习笔记

经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> <body>...</body> </html> html是根标签 head定义文档头部,包含: title, script, style, link, meta body是网页主要内容,包含:h1,h2-h6, p, a, img 2. 认识head标签: <head

linux基础知识学习笔记

1.Linux介绍 Linux版本: 内核版本:最基本的核心程序,只要用于企业和个人在此基础自行开发所需功能. 发行版本:在内核基础上增加了一些常用软件,满足企业和用户直接使用的基本需求. Linux应用领域: 个人桌面:图形桌面开发 服务器领域:整个系统就像dos命令行一样,全部命令操作. 嵌入式领域(智能硬件):在Linux基础上开发自己所需的功能然后将程序烧到硬盘中去执行. 后两个实用最广泛: 2.Linux目录和文件操作 Linux目录: Linux的四种文件类型: 1.可分享的 可以分

Go语言基础知识学习笔记1

安装教程我就不写了,推荐大家下载msc的安装包,因为他会自动帮你配置一些环境变量,但是GOPATH这个工作目录的环境变量需要自己配置 右键我的电脑->属性->高级系统设置->环境变量->新建系统变量 变量名称大写 GOPATH 路径就你的工作目录,如我的是D:/go 如果有多个工作目录就使用";"分号分割 根据约定,GOPATH下需要建立3个目录: bin (存放编译后生成的可执行文件)pkg (存放编译后生成的包文件)src (存放项目源码) 查看环境变量与工

html5基础知识学习

HTML5腾讯课堂--html5前端开发视频 https://ke.qq.com/course/89671 html5_video http://www.myexception.cn/jquery/2016557.html https://www.douban.com/note/158621500/ http://www.jianshu.com/p/404d01b8e713 http://ask.dcloud.net.cn/docs/

java基础知识学习笔记(四)

类与对象 java是一种面向对象的开发语言.java程序是由类与对象组成的.类与对象之间有什么关系呢? 类是构造对象的蓝图或模板.由类构造对象的过程,称之为创建类的实例.可知对象就是类的一种实例或具体实现.为什么为选用java语言做开发,这种面向对象的语言对开发有什么好处? 首先,从设计上,对一个问题,你可以暂且不管它的具体实现是什么,先把它抽象成一个对象,问题中涉及到的数据,变成对象中的实例域,求解问题的方法,变成对象中的方法,这样做可以分清要对哪些数据进行操作,逻辑上比较清晰. 其次,当问题

【Cactus仙人掌图】仙人掌基础知识学习笔记

首先膜一下vfk领先全球的动态仙人掌栽培技术- 然后谢谢Time-Machine学长在暑假集训时候讲了仙人掌DP. 然后感觉听得并不是很懂-所以再来对着论文学一遍顺便写一写例题代码 这一篇主要先学仙人掌的基础(定义和性质什么的) ------------线 割 分 是 我 >w<---------------– 什么是仙人掌? 仙人掌是不含自环的,一条边最多属于一个简单环的无向连通图. 从定义不难看出树其实也是仙人掌的一种,也就是说这几个概念的关系大概是: 树是一种特殊的仙人掌,仙人掌是一类特

股票基础知识学习笔记1

股票按业绩分类:分为绩优股,蓝筹股,ST股 按上市地方分类:A股,H股,N股(纳斯达克),S股(新加坡) 蓝筹股:资本雄厚,信誉优良的挂牌公司发行的股票,比如说中石油,中石化. 绩优股:业绩优良的公司发行的股票.指标是:每股税后利润和净资产收益率,在全体上市公司中处于中上地位. ST股:Special Treatment,连续两年亏损或每股净资产低于股票面值.限制涨跌幅5%,是为了提示投资者市场风险. A股:普通股票.在中国大陆注册,上市的普通股票.无纸化电子几张.实行T+1交割制度(今天买,明