【html】主要是关于标签等基础
2017-11-13 23:44
344 查看
1.一些标签就直接掠过了,主要用不太上。
<!DOCTYPE html>表明是html文件
<a>锚,可用于定位,还有超链接等等
<abbr>可以在段落中做缩写的解释,当鼠标on时会显示意思
<address>可以表示文章信息,作者信息
<applet>主要是java程序
<area>主要用于<map>标签中
<audio>主要是用于声音流的放入
<base>可以用于让base中的网址href变成次页面中 默认的链接
<blockquote>定义块级引用
<br>是一个换行符,另外遇到p段落标签时候,会加上一些垂直间距
<buttom type="button"></button>用于定义一个按钮
关于canvas的一个小实验:
利用javascript画一个矩形
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>[/code]
注释:根据
HTML5 规范,在没有其他合适标签更合适时,才应该把 <b> 标签作为最后的选项。HTML5 规范声明:应该使用 <h1>
- <h6> 来表示标题,使用 <em> 标签来表示强调的文本,应该使用 <strong> 标签来表示重要文本,应该使用
<mark> 标签来表示标注的/突出显示的文本。
<p>表示段落,<b>表示加粗的字体
caption在本文中也讲到,是在表格中的标题
表格中 <col>可以为列设置对齐方式
关于details标签,里面有一个summary 还有一个p标签,点击可以展示详情
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
<div>是一个块级的标签,主要用于文档的分割等等
<embed>可以用于放置插件
<footer>作为网页的底部
<nav>主要做导航栏
2.关于link
link的标签主要用于link css等文件
<link />这个标签采用的是闭合的方式。
格式:<link rel="stylesheet" type="text/css" href=".css" > 这是固定的格式,先不需要理解。
<hr>水平线
3.表格
<table> 表
4000
格标签。用tr表示行,用td表示单元格
th是表头,会用粗体来表示
空格: ;需要有分号哦
可以有标题,用captain 当标题
cellspacing是表格里单元格之间的距离;
表格中跨行:cowspan(竖向) 跨列:colspan(横向)
还可以在表格中插入表格
表格中内边距,cellpading
有序无序
无序:
ul标签 无序li有个小图标,可以使用t在ul中使用ype=“”。square是正方形,circle是圆(),disc实心圆
有序:
ol标签 默认数字,如果是字母表示A a ,如果是罗马数字,小i,大I
ul可以嵌套多个ul
4.html的<div> <span>
大多数 HTML 元素被定义为块级元素或内联元素。
编者注:“块级元素”译为 block level element,“内联元素”译为 inline element。
块级元素在浏览器显示时,通常会以新行来开始(和结束)。
例子:<h1>, <p>, <ul>, <table>
内联元素在显示时通常不会以新行开始。
例子:<b>, <td>, <a>, <img>
div可以替代table是什么意思?表示替代table文档显示
HTML <span> 元素是内联元素,可用作文本的容器。
<span> 元素也没有特定的含义。
当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。
span可以作为内部元素
background 设置背景图片
引入框架的概念,是<frameset>标签。
<frameset cols=" "> <!--是指不同列所占的横向百分比-->
<frame src=" .html">
<frameset>
在这个标签中不能用body这些标签
还有内联框架,这种框架肯定也是有见过的,比如网页上的一些窗口小游戏,可能就是内联框架
内联框架的标签是:iframe 在这个标签中可以设置width height 设置框架的大小,边框等等
iframe中还可以打开指定的链接
例子:
<!DOCTYPE html>
<html>
<body>
<iframe name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>
<p><a href="https://www.sogou.com" target="iframe_a">baidu.com</a></p>
<p><b>注释:</b>由于链接的目标匹配 iframe 的名称,所以链接会在 iframe 中打开。</p>
</body>
</html>
点击百度会出现 搜狗的页面。这样的话整个的内联框架都实现了
关于脚本
可以在html中插入脚本语言
<script type="text/javascript">
ducument,write("<h1>sjkjdkjskd</h1>") 脚本语言中可以识别html中的标签,并且让中间的文本用标题的格式显示
</script>
html的头部元素
有:title base link meta script sttyle
title :用于设置浏览器标签的名字,主要是网页的名字
<base> 主要是为页面上的所有链接规定默认地址或默认目标
link 主要用与定义文档与外部资源之间的关系,link 最常用与样式表的链接
<link rel="stylesheet" type="text/css" href=" ">
<style>中用于写样式
<meta>是元数据,是关于数据的信息,该标签主要在head元素中,元数据可用于浏览器 页面描述,关键词,文档的作者等等
针对搜索引钱的关键词
<meta name="description" content= " ">
<meta name-"keywords" content= " ">
meta标签 必须的属性:content 定义与 http-equiv 或 name 属性相关的元信息
http-equiv 值:content-type expires refresh set-cookie 把content属性关联到http头部
name 值:author description keywords generator revised others 用于描述网页,比如网页的关键词,叙述等等
scheme 定义用于翻译content属性值的格式
name属性:
主要用于描述网页,比如网页的关键词,叙述等, name=“参数” content=“具体的描述”
keywords :主要用于搜索殷勤,你网页的关键字
<meta name="keywords" content="博客,csdn">
description :用于告诉搜索殷勤,你的主要内容
<meta name="description" content="这是我的csdn博客,希望大家多多支持">
viewport 移动端窗口 rebots 定义搜索殷勤爬虫的索引方式
http-equiv属性
1.content-Type
<meta http-equiv="content-Type" content="text/html;charset=utf-8"> //旧的HTML,不推荐
<meta charset="utf-8"> //HTML5设定网页字符集的方式,推荐使用UTF-8
2.expires 网页到期时间
3.refresh 自动刷新并只想某页面 可用于重定向 例如网址换了 等等
如 http-equiv="refresh" content="2" URL="sdsds"
意思是两秒后跳转到URL中的网址去的意思
等等常用的是这几个 ,以后用了再回来搜索。
meta 标签中,content主要用于前面参数的描述作用
CSS
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
css格式:
padding 内边距,是在content外面一层。
padding 10 5 10 5 分别表示上右下左
padding 10 5 10 上10 左右5 下10
float:可以是left ring 表示浮动的位置
clear:这个属性,主要用于清除浮动,让元素在规定属性值方向没有浮动的元素
在 HTML 中,某些字符是预留的。
在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。
URL 及其编码
HTML一些组件:
HTML表单(form):
input元素,常用的类型type:text定义常规文本输入 radio定义单选按钮输入 submit定义提交按钮,提交表单
text:
<input type="text" name="csdn">
radio:单选框,可以是多个选框,用checked 形容的选项框,表示默认选择
<form>
<imput type="radio" name="sex" value="male" checked> 男
<imput type="radio" name="sex" value="female" > 女
</form>
submit
<form action=" " > action表示提交的页面
<input type="text" name="csdn" value="sd">
<input type="submit" value="Submit"> //会出现一个submit的按钮
</form>
CSS
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本(scripts),
样式文件(CSS),及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
css格式:
padding 内边距,是在content外面一层。
padding 10 5 10 5 分别表示上右下左
padding 10 5 10 上10 左右5 下10
float:可以是left ring 表示浮动的位置
clear:这个属性,主要用于清除浮动,让元素在规定属性值方向没有浮动的元素
background-image 设置背景图片
<!DOCTYPE html>表明是html文件
<a>锚,可用于定位,还有超链接等等
<abbr>可以在段落中做缩写的解释,当鼠标on时会显示意思
<address>可以表示文章信息,作者信息
<applet>主要是java程序
<area>主要用于<map>标签中
<audio>主要是用于声音流的放入
<base>可以用于让base中的网址href变成次页面中 默认的链接
<blockquote>定义块级引用
<br>是一个换行符,另外遇到p段落标签时候,会加上一些垂直间距
<buttom type="button"></button>用于定义一个按钮
关于canvas的一个小实验:
利用javascript画一个矩形
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>[/code]
注释:根据
HTML5 规范,在没有其他合适标签更合适时,才应该把 <b> 标签作为最后的选项。HTML5 规范声明:应该使用 <h1>
- <h6> 来表示标题,使用 <em> 标签来表示强调的文本,应该使用 <strong> 标签来表示重要文本,应该使用
<mark> 标签来表示标注的/突出显示的文本。
<p>表示段落,<b>表示加粗的字体
caption在本文中也讲到,是在表格中的标题
表格中 <col>可以为列设置对齐方式
关于details标签,里面有一个summary 还有一个p标签,点击可以展示详情
<details>
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>
<div>是一个块级的标签,主要用于文档的分割等等
<embed>可以用于放置插件
<footer>作为网页的底部
<nav>主要做导航栏
2.关于link
link的标签主要用于link css等文件
<link />这个标签采用的是闭合的方式。
格式:<link rel="stylesheet" type="text/css" href=".css" > 这是固定的格式,先不需要理解。
<hr>水平线
3.表格
<table> 表
4000
格标签。用tr表示行,用td表示单元格
th是表头,会用粗体来表示
空格: ;需要有分号哦
可以有标题,用captain 当标题
cellspacing是表格里单元格之间的距离;
cellpadding是表格里单元格内的空白部分;
另外,可以让table 或者td tr 使用bgcolor或者background 来填充颜色,填充背景
table中的各个行,标题都可以运用,align来排列内容
表格中跨行:cowspan(竖向) 跨列:colspan(横向)
还可以在表格中插入表格
表格中内边距,cellpading
有序无序
无序:
ul标签 无序li有个小图标,可以使用t在ul中使用ype=“”。square是正方形,circle是圆(),disc实心圆
有序:
ol标签 默认数字,如果是字母表示A a ,如果是罗马数字,小i,大I
ul可以嵌套多个ul
4.html的<div> <span>
HTML 块元素
大多数 HTML 元素被定义为块级元素或内联元素。编者注:“块级元素”译为 block level element,“内联元素”译为 inline element。
块级元素在浏览器显示时,通常会以新行来开始(和结束)。
例子:<h1>, <p>, <ul>, <table>
HTML 内联元素
内联元素在显示时通常不会以新行开始。例子:<b>, <td>, <a>, <img>
div可以替代table是什么意思?表示替代table文档显示
HTML <span> 元素
HTML <span> 元素是内联元素,可用作文本的容器。<span> 元素也没有特定的含义。
当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。
span可以作为内部元素
background 设置背景图片
引入框架的概念,是<frameset>标签。
<frameset cols=" "> <!--是指不同列所占的横向百分比-->
<frame src=" .html">
<frameset>
在这个标签中不能用body这些标签
还有内联框架,这种框架肯定也是有见过的,比如网页上的一些窗口小游戏,可能就是内联框架
内联框架的标签是:iframe 在这个标签中可以设置width height 设置框架的大小,边框等等
iframe中还可以打开指定的链接
例子:
<!DOCTYPE html>
<html>
<body>
<iframe name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>
<p><a href="https://www.sogou.com" target="iframe_a">baidu.com</a></p>
<p><b>注释:</b>由于链接的目标匹配 iframe 的名称,所以链接会在 iframe 中打开。</p>
</body>
</html>
点击百度会出现 搜狗的页面。这样的话整个的内联框架都实现了
关于脚本
可以在html中插入脚本语言
<script type="text/javascript">
ducument,write("<h1>sjkjdkjskd</h1>") 脚本语言中可以识别html中的标签,并且让中间的文本用标题的格式显示
</script>
html的头部元素
有:title base link meta script sttyle
title :用于设置浏览器标签的名字,主要是网页的名字
<base> 主要是为页面上的所有链接规定默认地址或默认目标
link 主要用与定义文档与外部资源之间的关系,link 最常用与样式表的链接
<link rel="stylesheet" type="text/css" href=" ">
<style>中用于写样式
<meta>是元数据,是关于数据的信息,该标签主要在head元素中,元数据可用于浏览器 页面描述,关键词,文档的作者等等
针对搜索引钱的关键词
<meta name="description" content= " ">
<meta name-"keywords" content= " ">
meta标签 必须的属性:content 定义与 http-equiv 或 name 属性相关的元信息
http-equiv 值:content-type expires refresh set-cookie 把content属性关联到http头部
name 值:author description keywords generator revised others 用于描述网页,比如网页的关键词,叙述等等
scheme 定义用于翻译content属性值的格式
name属性:
主要用于描述网页,比如网页的关键词,叙述等, name=“参数” content=“具体的描述”
keywords :主要用于搜索殷勤,你网页的关键字
<meta name="keywords" content="博客,csdn">
description :用于告诉搜索殷勤,你的主要内容
<meta name="description" content="这是我的csdn博客,希望大家多多支持">
viewport 移动端窗口 rebots 定义搜索殷勤爬虫的索引方式
http-equiv属性
1.content-Type
<meta http-equiv="content-Type" content="text/html;charset=utf-8"> //旧的HTML,不推荐
<meta charset="utf-8"> //HTML5设定网页字符集的方式,推荐使用UTF-8
2.expires 网页到期时间
3.refresh 自动刷新并只想某页面 可用于重定向 例如网址换了 等等
如 http-equiv="refresh" content="2" URL="sdsds"
意思是两秒后跳转到URL中的网址去的意思
等等常用的是这几个 ,以后用了再回来搜索。
meta 标签中,content主要用于前面参数的描述作用
CSS
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
css格式:
padding 内边距,是在content外面一层。
padding 10 5 10 5 分别表示上右下左
padding 10 5 10 上10 左右5 下10
float:可以是left ring 表示浮动的位置
clear:这个属性,主要用于清除浮动,让元素在规定属性值方向没有浮动的元素
在 HTML 中,某些字符是预留的。
在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。
URL 及其编码
HTML一些组件:
HTML表单(form):
input元素,常用的类型type:text定义常规文本输入 radio定义单选按钮输入 submit定义提交按钮,提交表单
text:
<input type="text" name="csdn">
radio:单选框,可以是多个选框,用checked 形容的选项框,表示默认选择
<form>
<imput type="radio" name="sex" value="male" checked> 男
<imput type="radio" name="sex" value="female" > 女
</form>
submit
<form action=" " > action表示提交的页面
<input type="text" name="csdn" value="sd">
<input type="submit" value="Submit"> //会出现一个submit的按钮
</form>
CSS
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本(scripts),
样式文件(CSS),及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
css格式:
padding 内边距,是在content外面一层。
padding 10 5 10 5 分别表示上右下左
padding 10 5 10 上10 左右5 下10
float:可以是left ring 表示浮动的位置
clear:这个属性,主要用于清除浮动,让元素在规定属性值方向没有浮动的元素
background-image 设置背景图片
相关文章推荐
- 前端基础(3):html语法(2): <form> 标签
- 关于Android中如何过滤HTML标签
- 关于HTML的多媒体标签
- HTML基础标签
- 网页制作之html基础学习2-标签
- 关于firefox获取不到HTML标签的file控件的完整路径解决方案
- HTML基础之标签的使用- 标签的语义化使用
- 关于使用strip_tag过滤字符串中的html标签
- HTML基础 img标签alt属性 当图片加载失败的时候显示为文本
- 关于 HTML head 头标签
- HTML 基础标签实例(全面概况HTML的知识要点,这些一定要掌握)
- Html中关于多媒体的标签
- html基础 题目标签 <h1> <h2> <h3> <h4> <h5> <h6>标签 样式
- 关于HTML标签的总结
- HTML基础 table标签cellpadding属性设置单元格中的文本与单元格的距离
- 关于标签<html:link>在URI后面传参数的问题
- Html的基础知识,基础标签的应用
- 20180227:关于HTML中table标签中合并单元格时遇到的问题
- SEO基础优化必学的8大html标签
- 关于html音频以及视频标签video audio标签的实例