HTML标签的应用(新手)

HTML5音视频
video元素支持三种视频格式:ogg,MPEG4,WEBM
audio元素支持三种音频格式:ogg vorbis,wav

CSS
1.块级元素:可以独占一行,可以设置宽高,可以嵌套行内元素和块级元素,内容大小不影响宽高,4个方向都会变化display black
2.行内元素:并不能独占一行,不可以设置宽高,内容大小影响宽高,inline

重点英语单词
article 文章
aside 侧边栏
footer 页脚
header 页眉
nav 导航
section节,区段
css层叠样式表(cascading style sheets)

<div style="border:1px soild red">XX</div> 内联(内嵌)
------------------------------------------------------------------------
<stule type=" text/css">
dic{ 内联
color:green
}
------------------------------------------------------------------------
<link rel="stylesheet" href="../x/.css"> 外部样式表
------------------------------------------------------------------------
@inport"x.css"
选择器
元素选择器
div{
color:red
}
-------------------------------
类元素选择器
.class:"x"{
color:red
}
--------------------------------
ID选择器
#ID:"X"{
color:red
}
---------------------------------
包含选择去=器
h1 span{
color:red
}
<h1><span>【红色】</h1></span>
------------------------------------
子元素选择器
h1>storong{
color;red
}
<h1>this is<strong>【very】</strong><strong>【very】</strong>biggest
-----------------------------------
相邻兄弟选择器
li+li{
color:red
}
<ul>
<li>红<li>
<li>【红】<li>
<li>【红】<li>
<li>【红】<li>
</ul>
-----------------------------------------
通配符选择器
*{
border:soild red
margin:0px
padding:0px
}
重置默认样式(解决兼容性)

盒模型:
padding:1px 四个方向
padding:1px 1px 上下 左右
padding:1px 1px 1px 上 左右 下
padding:1px 1px 1px 1px 上 右 下 左
水平居中块元素:margin:0 auto
CSS:一切皆为框(盒模型,div)
块级:block
行内:inline
display:none 不显示
block 块级显示
inline 行内
inline-block行内块
table-cell作为单元格来显示
CSS定位机制
1.普通流
2.浮动流
3.绝对流

-------------------------------------------------
position:static 元素框正常显示 静态
relative 偏移向某个距离 相对
absolute 文档流完全删除 绝对 脱离文档流
fixed 固定 脱离外部流

相对定位:原来的位置不被占用
绝对定位;1.原来的位置被占据
2.相对最初的包含块来定位(最近的祖先元素)
3.定位后生成块级框
float:(left right )从左/右排
----------------------------------------------------
水平对齐:text-align margin:0 auto 脱离文档流用不了
>都可用定位对齐
垂直方向:line-height vartical-align
数字(正负)
Z-index< >将两块元素覆盖的部分显现
配合(定位)
浮动完后清除浮动可强制带后面元素换行

时间: 2024-08-25 19:26:01

HTML标签的应用(新手)的相关文章

关于网页导航栏制作的几种方法与常见问题解决(新人向)

无序列表是html页面排版经常用到的非常实用的标签,但是新手在使用无序列表时,经常会在横向排版上出现问题,笔者在这里提供了笔者在使用无序列表制作网页导航栏时的几种方法与常见问题的解决问题.(以css内部样式为例) [注:有同学之前问过我怎么制作一张网页,但只会html,本文用到均为css.故说明:若急需制作导航,无css技术基础的,在<head>标签中加<style rel="stylesheet" type="text/css"><s

Destoon标签大全,新手必备

核心提示:Destoon标签大全,新手必备 1.全局标签 网站名称:{$DT[sITename]}网站地址:{DT_PATH}网站LOGO: {if $MODULE[$moduleid][logo]}{DT_SKIN}image/logo_{$moduleid}.gif{elseif $DT[logo]}{$DT[logo]}{else}{DT_SKIN}image/logo.gif{/if}版权信息:{$DT[copyright]}风格路径:{DT_PATH}客服电话:{$DT[telepho

新手seo须知:tag标签的SEO优化

tag标签,网站很简单又常见的功能,特别是在资讯站上面使用的更多,但是对于新手SEO来说常常会忽视掉这个标签在SEO的作用,SEO注重的是细节,往往像这样的细节可以给SEO带来不一样的效果,接下来带您看看tag标签带来的神奇作用吧! 首先,我们看看网站为什么要用tag标签? 在我们更新某一篇文章时,给这篇文章增加一个标签,这个标签代表着这篇文章讲到的内容要点(或者这篇文章的关键词),当其它文章更新时,也同样设置了同一个标签,那么这个标签会就产生新的一个列表页,列表页内容都是跟这个标签有关的文章.

H5新标签(适合新手入门)

H5新标签 文档类型设定 document HTML: sublime 输入 html:4s XHTML: sublime 输入 html:xt HTML5 sublime 输入 html:5 <!DOCTYPE html> 字符设定 <meta http-equiv="charset" content="utf-8">:HTML与XHTML中建议这样去写 <meta charset="utf-8">:HTML

【python小随笔】python 解析xml数据的新手大坑&gt;&gt;抓取多重标签,遍历各标签的数据

xml文档: <GetMatchingProductResult ASIN="B071LF9R6G" status="Success">...</GetMatchingProductResult> <GetMatchingProductResult ASIN="B0714BP3H4" status="Success">...</GetMatchingProductResult>

Gulp新手入门教程

Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭建web服务器 文件保存时自动重载浏览器 使用预处理器如Sass.LESS 优化资源,比如压缩CSS.JavaScript.压缩图片 当然Gulp能做的远不止这些.如果你够疯狂,你甚至可以使用它搭建一个静态页面生成器.Gulp真的足够强大,但你必须学会驾驭它. 这是这篇文章的主要目的.帮助你了解Gulp的基础用法,助你早日完成一统天下的大业. 在我们深入了解之前,我们先来说说为什么是Gulp. 为什么是Gulp? 类似Gulp的

给大家分享web开发新手修改hosts文件实现本地域名访问的正确方法

1.如何正确修改hosts文件: 一般打开hosts文件里面都会有个示例,按照其格式修改即可 比如以下内容: # For example: # # 102.54.94.97 rhino.acme.com # source server # 38.25.63.10 x.acme.com # x client host 即代表打开rhino.acme.com这个网址将解析到102.54.94.97,ip地址与网址间至少有一空格,当然建议通过按Table键来编辑,即美观又不容易编写失误;这也就是通过解

鑫鹏SEO告诉你网站代码优化H1、H2、H3标签的作用

网站优化不仅仅是包括:网站的标题,关键词,描述的优化:首页布局.网站导航,网站底部,头部,幻灯片,第一屏的内容布局优化,其实还包括代码优化,网站速度的优化,文章的优化,栏目.页面的优化,URL优化等等.今天鑫鹏SEO为大家讲解在代码优化里面最重要的优化是网站标签的优化,通常标签包括网站的H1.H2.H3,其实很多新手SEO并不知道这些标签有什么作用,究竟怎么设置. 一.网站代码优化H1.H2.H3标签的需要程序员写好程序的调用 说到代码的优化,肯定是少不了程序员的配合,所以在做网站的时候,在做网

OpenGL教程之新手上路

Jeff Molofee(NeHe)的OpenGL教程- 新手上路 译者的话:NeHe的教程一共同拥有30多课,内容翔实,而且不断更新 .国内的站点实在应该向他们学习.令人吃惊的是,NeHe提供的例程源代码差点儿都有跨平台的不同编译版本号,涉及从Visual C++.Borland C++.Visual Basic.MacOS X/GLUT.Linux/GLX.Code Warrior.Delphi.C++ Builder.MASM.ASM.MingW32&Allegro以及Python等等的不