html5基础

最新推荐文章于 2024-07-05 20:20:47 发布

baicaiweimin

最新推荐文章于 2024-07-05 20:20:47 发布

阅读量308

点赞数 1

分类专栏： python Flask库 html5 文章标签： html

本文链接：https://blog.csdn.net/baicaiweimin/article/details/115804681

版权

python Flask库同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

html5

2 篇文章 0 订阅

订阅专栏

第一项：hend头部标记
第二项：页面主题标记body
第三项内容区域标签
第四项列表
第五项超级链接
第六项图片使用
第七项表格的应用
第八项层div
第九项表单
第十项多媒体页面

html5基本结构

<html>
<head>
    
</head>
<body
 
</body>
</html>
<hr width="800px" height="4px" color="red" >

第一项:hend头部标记

标记	描述
base	当前文档的url全称
title:	设定显示在浏览器左上方的标题
meta:	有关文档的元信息
link:	设定外部链接
script:	页面程序的脚本
basefont:	设定基准的文字字体
style:	css层叠样式表
isindex:	表明该文档是一个用于检索的网关脚本，由服务器自动建立

1.title:<title>Title</title> :标记内容为标题的内容

2.meta:元信息标记：

设置页面关键字：<meta name="keyname" content="具体的关键字">
设置页面描述：<meta name="description" content="对页面的描述语言">
设置编辑工具：<meta name="generator" content="编辑软件的名字">
设定作者信息：<meta name="author" content="作者信息">
设定搜索方式：<meta name="robots" content="搜素方式">

content的值	描述
All	表示能搜索当前网页及其链接的网页
Index	表示能搜索当前网页
Nofollow	表示不能搜素当前网页链接的网页
Noindex	表示不能搜素当前页面
None	表示不能搜素当前网页及其链接的网页

设置网页文字及其语言：
方式1：<meta http-equiv="Content-Type" content="text/html;charset=字符集类型">
charset:BIG5,GB2312,shift-Jis,Euc,Koi8
方式2：<meta http-equiv="Content-Language" content="语言">
语言：zh_cn中文
方式三：<meta charset="utf-8">
html5中使用
设定网页的跳转时间：<meta http-equiv="refresh" content="跳转时间;url=链接地址">
设定有效期限：<meta http-equiv="expiress" content="到期的时间"
到期时间必须用GMT格式
设定禁止从缓存中调用：
方式一：<meta http-equiv="cache-control" content="nocache">
方式二：<meta http-equiv="pragma" content="nocache">
删除过期的cookie:<meta http-equiv="set-cookie" content="到期的时间">
时间格式为gmt格式
强制打开新窗口：强制网页在挡前窗口中以独立的页面显示，可以防止自己的网页被别人当作一个frame调用：<meta http-equiv="windows-target" content="_top">
设定网站的建立日期：<meta name="build" content="网站的建立日期">
设定网页版权信息：<meta name="copyright" content="网页版权信息">
设定联系人邮箱：<meta name="reply-to" content="邮箱地址">

3.base:基低网址标记：
在头部定义基底网址：<base href="http://www.denbgpao.com">
在页面主题中设定某一个相对网址：<a href="/panlonagn"></a>
链接会变成绝对地址http://www.denbgpao.com/panlongan
语法： <base href="链接" target="新窗口打开方式">

属性值	打开方式
_parent	在上一级窗口打开，一般常用在分帧的框架页中
_blank	在新窗口打开
_self	同一窗口打开，可以省略
_top	在浏览器的整个窗口打开，忽略任何框架

第二项:页面主题标记body

属性	描述	使用
text	设定页面文字的颜色	`<body text="颜色代码"`>
bgcolor	设定页面背景的颜色	`<body bgcolor="颜色代码">`
background	设定页面背景图像	`<body background="文件链接地址" 【bgproperties="背景图片固定属性】">`说明：bgproperties一般默认省略当bgproperties=“fixed”背景图片会固定在页面上
bgproperties	设定页面的背景图像固定，不随页面的滚动而滚动	同上
link	设定页面默认的链接颜色	`<body link="颜色代码">`
alink	设定鼠标正在单击时的链接颜色	`<body alink="颜色代码">`
vlink	设定访问过后的链接颜色	`<body vlink="颜色代码">`
topmargin	设定页面的上边距	`<body topmargin="颜色代码">`
leftmargin	设定页面的左边距	`<body leftmargin="颜色代码">`

第三项：内容区域标签

标签	作用	属性
`<h1>...</h1>.......<h6>..</h6>`	内容标题左作用	对齐方式align=left,center,right
`<font face="字体1，2，3">应用了改字体的文字</font>`	设置文字字体
`<font size="字号大小">应用了该字号的文字</font>`	设置字号	size的值从1到7
`<font color="文字颜色">应用了颜色的文字的文字</font>`	设置字体颜色
`<strong>粗体文字</strong>`
`<em>斜体字</em>`
`<u>带下划线的文字</u>`
`<sup>上标</sup>`
`<sub>下标</sub>`
`<s>删除线</s>`
`<code>等宽文字标记</code>`
`空格 `
`"`	"
`<`	<
`>`	>
`×`	×
`§`	§
`©`	©
`®`	®
`™`	™
段落样式
`<p>`	段落表填
`<br>`	换行
`<per></per>`	保留原始排版方式标记
`<center></center>`	文字居中对齐
`<blockquote></blockquote>`	向右缩进标记
`<hr>`	添加水平线	width水平线宽度，height水平线高度，color水平线颜色,align水平线对齐方式，noshade去掉水平线阴影无值
`<ruby>你好我好<rt>lk</rt></ruby>`	你好我好lk	文字标注标记
`<var>文字斜体</var>`	`文字斜体`
`<plaintext>或者<xmp>`	让html标签失去作用
`<address>文字</address>`	标记的作用也就是斜体

第四项：列表

无序列表：

<ul type=符号类型>   disc:实心原点；circle:空心原点；square 方块
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>

有序列表：

<ol type=序号类型 start=起始位置> 1,A,a,i,I start的数值只能为数字
 	 <li>1</li>
     <li>2</li>
      <li>3</li>
</ol>

4.定义列表标记：主要用于名词解释，第一层次需要解释的名词，第二层次具体的解释，dd层可以有多个

<dl>
   <dt>名词一</dt><dd>解释一</dd>
   <dt>名词二</dt><dd>解释二</dd>
   <dt>名词三</dt><dd>解释三</dd>
</dl>

菜单列表标记-menu 显示跟无序列尔表一样

<menu>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
</menu>

<dir>
            <li>1</li>
            <li>2</li>
            <li>3</li>
 </dir>

列表文字颜色设置：<li><font color="aqua" size="7">1</font></li>

第五项：超级链接

路径

同一级目录：直接输入目录名
下一级目录：本目录名/下一级
上一级目录：…/
超链接标记语法：链接元素可以是图片文字

<a href="文件名">链接元素</a>
<a href="url">链接元素</a>

设置超链接的目标窗口

target的值：_parent:在上一级窗口,_blank：新建一个窗口打开,_self：当前窗口,_top：浏览器整个窗口打开，将会忽略所有框架结构

 <a href="文件名" target="">链接元素</a>

书签链接：
第一步：<a name="书签名称"></a>
第二步链接到同一页：<a href="#书签的名字"></a>
第二步链接到不同页：<a href="链接文件地址#书签的名字"></a>
外部链接

格式	表示的含义	用法
http://	采用www服务进入万维网	`<a href="链接"></a>`
ftp://	通过FTP访问文件传输服务器	`<a href="ftp://221.8.65.74"></a>`
telnet://	启动telnet
mailto://	直接启动邮件系统E-mail

邮件发送说明：

1：参数CC发送抄件人：<A href="mailto:电子邮件地址? CC=电子邮件地址">链接文字<A>
2：Subject 电子邮件主题：,<A href="mailto:电子邮件地址? Subject=主题文字" >链接文字</A>
3：BCC暗送收件人：<A href="mailto:电子邮件地址？BCC=电子邮件地址">链接文字</A>
4：Body电子邮件内容：<A href="mailto:电子邮件地址？Body=邮件内容"></A>

第六项：图片使用
1：基本语法

<img src="图像地址" height="图像高度" width="图像宽度" border="图像边框" hspace="水平间距" vspace="垂直边距" align="相对文字对齐方式" title="图像提示文字” alt="图像替代文字">

补充：align参数详解：

align取值	对齐方式
top	把图像的顶部和同行的最高部分对齐(可能是文本的顶部,也可能是图像的顶部)
middle	把图像的中部和同行的中部对齐(通常是文本行的基线,并不是实际的行的中部)
bottom	把图像的底部和同行文本的底部对齐
texttop	把图像的顶部和同行中最高的文本的顶部对齐
absmiddie	把图像的中部和同行中最大项的中部对齐
baseline	把图像的底部和文本的基线对齐
absbottom	把图像的底部和同行中最低项的底部对齐
left	变图像和左边界对齐(文本环绕图像)
right	使图像和右边界对齐(文本环绕图像)

2：设置图像的超链接：

<a href=""><img src=""></a>

3:设置热区图像

<img src="图像地址" alt="" usemap="映射图像名称">
<map name="映射图像名称">
     <area shape="热区形状" coords="热区坐标" href="链接">
</map>

补充：

1：shape参数：rect(矩形形状)，circle(原形形状)，poly（多边形形状）
2：对于矩形区域rect：coords包含四个参数:coords=“left,top,right,bottom” 可以看做对角坐标
对于圆形区域circle:coords=“center-x,center-y,tadius” 圆心坐标和半径
对于多边形区域poly：coords 参数可以是顺或者逆时针的各个点坐标

第七项：表格的应用
1：基本结构

<table width="60%" height="400" align="对齐方式" border="边框宽度" bordercolor="边框颜色" cellspacing="内框宽度" cellpadding="文字与边距的宽度" bgcolor="表格背景颜色" background="表格背景图像">
            <caption align="对齐方式">表格的标题</caption>
            <tr height="行高" bordercolor="边框颜色" bgcolor="背景颜色" background="背景图片" align="行内文字对齐方式" valign="行内文字垂直对齐方式">
                <th >表格的表头</th>
            </tr>
            <tr>
                <td width="单元格宽度" height="单元格高度" colspan="单元格在复杂的表格中水平合并表格个数" rowspan="单元格在复杂的表格中垂直合并表格行数" align="单元格对齐方式" valign="垂直对齐方式" bgcolor="单元格背景颜色" bordercolor="单元格边框颜色"   bordercolorlight="单元格向光的部分颜色 " bordercolordark="单元格背光的部分颜色" background="背景图像">具体内容</td>
            </tr>
   </table>

表格的结构：

<table>
            <caption></caption>
            <thead bgcolor="" align="" valign=""> #表首标记
                <tr>
                    <th></th>
                </tr>
            </thead>
            <tbody bgcolor="" align="" valign="">#主题标记
                <tr>
                    <td></td>
                </tr>
            </tbody>
            <tfoot bgcolor="" align="" valign="">#表尾标记
                <tr>
                    <td></td>
                </tr>
            </tfoot>
 </table>

3：补充：

align的参数：left,right,center
valign的参数：top,bottom,maddle
表格可以嵌套

第八项：div标签

属性	属性说明
accesskey	设置或检索对象的快捷键
align	设置或检索对象相对于显示或表格的排列方式
atomicselection	指定元素及其内容是否可以以不可见形式统一选择
begin	设置或检索时间线在该元素上播放前的延迟时间
class	设置或检索对象的类
contenteditable	设置或检索表明用户是否可编辑对象内容的字符串
datafld	设置或检索由datasrc属性指定的绑定到指定对象的给定数据源的字段
dataformatas	设置或检索如何渲染提供给对象的数据
datasrc	设置或检索用于数据绑定的数据源
dir	设置或检索对象的阅读顺序
disabled	设置或检索控件的状态
end	设置或检索表明元素结束时间的值,或者元素设置为重复的简单持续终止时间
hidefocus	設置或检索表明对象是否显示表明焦点的值
id	检索标记对象的字符串
lang	设置或检索要使用的语言
language	设置或检索当前脚本编写用的语言
nowrap	设置或检索浏览器是否自动执行换行
style	为该元素设置内嵌样式
syncmaster	设置或检索时间容器是否必须在此元素上同步回放
systembitrate	检索系统中大约可用带宽的bps
systemcaption	表明是否要显示文本来代替演示的音频部分
systemlanguage	表明是否在用户计算机上的选项设置中选中了给定语言
systemoverduborsubtitle	指定针对那些正在观看演示但对被播放的音频所使用的语言并不熟悉的用户来说是否要渲染配音或字幕
tabindex	设置或检索定义对象的tab顺序的索引
timecontainer	设置或检索与元素关联的时间线类型
title	设置或检索对象的咨询信息(工具提示)
unselectable	指定该元素不可被选中

补充：

align:left center right
id属性和class属性区别：id属性是先找到结构和内容，再给它定义样式，class属性是先定义好一种形式，在套给多个结构和内容

style属性的常用参数说明表：

参数值	说明
overflow	"溢出控制; visible (默认、可见) , auto (自动) , scroll (显示滚动条),hidden:隐藏
width	宽度；数值
height	高度数值
color	字体颜色，色彩代码
font-size	字体大小：数值
line-heignt	行高：数值
border	边框:宽度、类型和颜色,其中,类型主要支持none, dotted, dashed, solid, doublegroove, ridge, inset, window-inset, outset
font-weight	字体粗细：normal,bold,bolder,lighter
font-family	字体类型: Arial. Tahoma, Verdana、仿宋_GB2312、黑体、楷体GB2312、隶书、宋体、幼圆
background	背景颜色：色彩代码
scrollbar-base-color	滚动条各部分的颜色：色彩代码
Filter:chroma	chroma过滤器:色彩代码,该颜色将对象转换成透明效果
word-break	断字: normal (默认,正常断字) 、keep-all (严格不断字) 、break-all (严格断字) :
direction	文字方向; Itr (默认,从左问右）rtl (从右向左)
position	设定定位方式取值absolute,relative
display	设定元素的浮动特征

补充：

postion属性：position:static|absolute|relative
static:无特殊定位,对象遵循HTML定位规则。
absolute:.将对象从文档流中拖出,使用left. right, top, bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框。
relative:对象不可层叠,但将依据left. right, top, bottom等属性在正常文档流中偏移位置。

参数	说明
left	相对于窗口左边的位置,单位为像素(pixels)
top	相对于窗口上边的位置,单位为像素(pixels)
width	div标签的宽度。所有在标签里的文字或HTML元素都包含在里面
height	div标签的高度,该属性很少使用,除非想要对层进行分割
clip	给出层的可见部分。该属性能够使得di’v标签显示为一个定义得很准确的方块区域，其参数是rect（top,right,bottom,left）
visibility	隐藏或显示div标签中的元素,其值为visible, hidden和inherit
z-index	div标签的立体位置,值越大,标签的位置越高
background-color	div标签的背景颜色
laver-background-color	Netscape的div标签的背景颜色
background-image	div标签的背景图像
layer-background-image	Netscape的div标签的背景图像

display属性：
style属性的另一个常用功能是控制
标签的display属性,用于设置元素的浮动特征,当display被设置为block (块)时,容器中所有元素都将会被当做一个单独的块放入到页面中;将display设置为inline,将使其行为和元素inline一样,即使它是普通的块元素,它也将会被组合成像那样的输出流输出到页面上;将display设置为none,则该元素实际上就从页面中被移走,它下面的所有元素都会被自动跟上填充。
属性值：

属性值	说明
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符
inline	默认。此元素会被显示为内联元素，元素前后没有换行符
inline-block	行内块元素。（CSS2.1 新增的值）

<iframe>标签：<iframe>标签可以构成一种特殊的框架结构,被称为浮动框架,它是在浏览的窗口中嵌套另外的网页文件。

在这里插入图片描述
第九项：表单
1：表单的的属性：

<form action="表单的处理程序" name="表单名“ method="传送方式" enctype="编码方式 target="目标显示方式"">
</form>

补充：

enctype:

取值	含义
text/plain	以纯文本的形式发送
application/x-www-form-urlencoded	默认的编码形式
multipart/from-data	MIMR编码，上传文件的表单必须选择该项

target：返回的信息显示窗口：_blank,_parent,_self._top

2：添加控件

控件	作用	案例
text	文字字段	`<input type="text" size="显示长度字符为单位" maxlength="最多输入的字符数"`
password	密码域	`<input type="password" size="显示长度" maxlength="最多输入的字符数" value="默认值">`
radio	单选按钮	`<input type="radio" value="单选按钮的取值" name="单选按钮的名称"checked="checked">`checked默认被选中
checkbox	复选框	`<input type="checkbox" value="单选按钮的取值" name="单选按钮的名称"checked="checked">`
button	普通按钮	`<input type="button" value="按钮的取值" name="按钮的名字" onclick="处理程序">`
submit	提交按钮
reset	重置按钮
image	图形提交按钮	`<input type="image" src="" name="">`
hidden	隐藏域	`<input type="hidden" value="提交的`值">
file	文件域	`<input type="file" name="safs">`

3:列表菜单控制：

<select name="下拉菜单名称" id="pan">
        <option value="" selected="selected">选项显示内容</option>
        <option value="pan">选项显示内容</option>
    </select>

菜单和列表标记属性	描述
name	菜单和列表的名称
Size	显示的选项数目
Mulptiple	列表中的项目多选
Value	选项值
Selected	默认选项

4:文本域标记-textarea:

<textarea name="文本域名称" value="默认值" rows="行数"cols="列数"></textarea>

第十项：多媒体页面
1：设置滚动页面：

<marquee behavior="滚动属性" direction="滚动方向" scrollamount="滚动速度"
scrolldelay="时间间隔" loop="循环属性" width="滚动范围" height="滚动范围"
 bgcolor="滚动背景颜色" hspace="水平范围" vspace="垂直范围"></marquee>

补充：

direction:up,down,left,right
behacior:scroll：循环滚动默认效果，slide：只滚动一次就停止，alternate：来回交替进行滚动
scrollamount:设置故不能动文字每次移动的长度，单位px
scrolldelay:设置滚动文字滚动的时间间隔
loop:循环次数
width,height:可以调整其水平和垂直的范围
bgcolor：背景颜色
hspace,vspace:设置水平空间和垂直空间
2：多媒体文件：
第一种：embed

<embed src="文件地址" type="" width="播放界面的宽度" height="播放界面的高度" bautostart="是否自动运行" loop="循环播放" hidden="隐藏图像保留声音" >

第二种：object:
object元素用于向页面添加多媒体对象,包括Flash、音频、视频等。它规定了对象的数据和参数,以及可用来显示和操作数据的代码。object元素中一般会包含标签, 标签可用来定义播放参数。标签里的classid属性是告诉浏览器插件的类型; codebase属性可选,未安装Flash插件的用户在浏览网页时,会自动连接到codebase属性指定的Shockwave的下载网页, 自动下载并安装相关插件。和标签里quality =high的作用是使浏览器以高质量浏览动画。

<object data="" type="">
    <param name="" value="flash文件地址">
    <embed src="" type="">
</object>

baicaiweimin

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
html5基础

1:基本结构<html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="banmian.css"></head><body </body></html>
复制链接

扫一扫