WEB前端培训:HTML常用标签及其属性

日期:2020-12-04 10:29作者:北大青鸟西安华清校区

摘要:基本 html/html 定义 HTML 文档 head/head 文档的信息 meta HTML 文档的元信息 title/title 文档的标题 link 文档与外部资源的关系 style/style 文档的样式信息 body/body 可见的页面内容 !---- 注释 meta标记
关键词: 北大青鸟web前端
  基本
 
  <html>…</html>      定义 HTML 文档
 
  <head>…</head>   文档的信息
 
  <meta>                    HTML 文档的元信息
 
  <title>…</title>        文档的标题
 
  <link>                      文档与外部资源的关系
 
  <style>…</style>    文档的样式信息
 
  <body>…</body>   可见的页面内容
 
  <!--…-->                 注释
 
  <meta>标记
 
  <meta>的主要作用,是提供网页的元信息。比如:指定网页的搜索关键字。
 
  <meta>标记有两个属性:http-equid和name。
 
  1.http-equiv属性
 
  功能:模拟http协议文件头信息,当信息从服务器端传到客户端时,告诉浏览器如何正确的显示网页内容。
 
  http-equiv属性一般要与content属性配合使用。Content属性指定信息的详细参数。
 
  (1)设置网页的字符集
 
  <meta http-equiv=“Content-Type” content=“text/html;
 
  charset=utf-8” />
 
  (2)网页自动刷新
 
  <meta http-equiv=“refresh” content=“2”>   //每隔2秒钟,自动刷新网页一次
 
  <meta http-equiv=“refresh” content=“2;url=http://www.ifeng.com”>   //2秒钟后,跳转到凤凰网
 
  2.name属性
 
  name属性主要用于设置网页的搜索关键字、版权信息、作者等。
 
  (1)设置网页搜索关键字
 
  <meta name=“keywords” content=“网站建设,企业网站建设,网站制作,网上商城,网站推广,域名注册,中企动力” />
 
  (2)设置网页描述信息
 
  <meta name=“description” content=“网站建设、网站制作专家中企动力,为您提供专业的展示型网站建设、营销型网站建设、独立商城系统网站建设、并提供一体化的企业邮箱”>
 
  HTML文本修饰标记
 
  <b></b>:加粗bold。如:<b>HTML文件</b>
 
  <i></i>:斜体italic。如:<i>HTML文本</i>
 
  <u></u>:下划线underline。如:<u>HTML文本</u>
 
  <s></s>:删除线strike。如:<s>删除线</s>
 
  <sup></sup>上标。
 
  <sub></sub>下标。
 
  <font></font>字体标记
 
  属性:Size:文本大小,取值1-7。1小,7大。
 
  Color:颜色值。
 
  Face:字体,楷体、黑体、宋体…
 
  HTML排版标记
 
  1.<p></p>表示一个段落。
 
  常用属性:align:水平对齐方式,取值:left(左)、 center(居中)、 right(右)
 
  举例:<p align=“center”>水平对齐方式居中对齐</p>
 
  2.换行标记<br>
 
  3.标题标记:<h1>……<h6>
 
  功能:定义各种标题。
 
  属性:align水平对齐方式,取值:left、center、right。
 
  语法:<h1  align = “left | center | right”></h1>
 
  <div>和<span>标记
 
  <div>是没有任何意义的标记,但是,又是使用最多的标记。<div>一般要与CSS配合使用。<div>是一个块元素。
 
  <span>是没有任何意义的标记,但是,又是使用最多的标记。<span>要与CSS配合使用。<span>是行内元素。
 
  (1)块元素
 
  块元素,一般是单独占一行,不管内容多少,总是占一行。
 
  块元素有哪些?<div>、<p>、<h1>、<h2>、<pre>等
 
  (2)行内元素
 
  行内元素,不会单独占一行。
 
  行内元素的宽度,主要是根据内容决定。
 
  多个行内元素,会排在同一行。
 
  行内元素有哪些?<font>、<b>、<i>、<u>、<sub>、<sup>等
 
  结论:在标记嵌套时,一般是块元素中嵌套行内元素。
 
  HTML项目符号(无序列表)
 
  <ul>
 
  <li>内容1</li>
 
  <li>内容2</li>
 
  <li>内容3</li>
 
  </ul>
 
  <ul>或<li>的常用属性
 
  type:项目符号的类型,取值:disc(小黑点)、circle(空心圆)、square(实心方块)
 
  注意:在HTML标记中,内容应该放在最底层标记中。
 
  注意:<ul>和<li>是块元素。
 
  HTML编号列表(有序列表)
 
  <ol>
 
  <li>列表1</li>
 
  <li>列表2</li>
 
  <li>列表3</li>
 
  </ol>
 
  <ol>或<li>的常用属性
 
  type:编号类型,取值:1、a、A、i、I
 
  start:从第几个开始编号(数字)。
 
  图片标记:行内元素,单边标记
 
  语法格式:<img  属性 = “值”>
 
  常用属性:
 
  Width:图片宽度
 
  Height:图片高度
 
  Border:图片边框粗细。
 
  Src:图片的路径(相对路径)
 
  Align:图片的水平对齐方式,取值:left、center、right
 
  Hspace:图片与左右文字之间的距离(水平距离)
 
  Vspace:图片与上下文字之间的距离(垂直距离)。
 
  - 注意事项
 
  如果图片想等比例缩放,只需要指定width或height其中一个。
 
  Align属性只能让文本居中,不能让图片单独居中。
 
  Align可以实现“图文混排”效果。align = “left | right”
 
  要想让图片实现居中效果,可以给图片增加一个<div>元素
 
  表单
 
  1、表单的概念
 
  表单主要用来获取客户端用户数据(信息)的。如:注册表单、查询表单、登录表单等。
 
  2、表单的工作原理
 
  浏览有表单的网页,填写一些必要的信息,然后点击某个按钮进行提交。
 
  这些表单数据,通过互联网,传递到了服务器上。
 
  服务器上有专门的程序,对表单数据进行验证。如果验证成功,将你的数据存入数据库(MySQL),则返回一个验证成功的信息。如果验证失败,将返回一个错误信息。
 
  从上面表单的工作原来看:表单的制作分两个部分,一是前台页面的制作,二是后台PHP对表单数据的处理。
 
  3、表单的结构
 
  <form>标记属性——块元素
 
  name:给表单起个名字。这个名字主要给JavaScript来用。JS主要用来做客户端表单验证。
 
  method:表单的提交方式,取值:get或post。
 
  action:指定表单的处理程序,一般是PHP文件。
 
  如果action为空,那么表单数据发到哪里去了?
 
  结果:那么表单数据提交给了它自己来处理。
 
  enctype:指定表单数据的编码方式(解密方式)。这个属性只能用在 method = “post” 的情况下。
 
  application/x-www-form-urldecoded  //默认的加密方式
 
  multipart/form-data  //如果你上传文件,该值必须它自己。
 






转载请保留本文网址https://www.sxbdqn.cn
上一篇:WEB前端培训:CSS3 3D 转换
下一篇:没有了
北大青鸟
校区简介
青鸟品牌
就业体系
就业学生
在线报名
热门课程
BCVE视频特效课程
BCUI全链路UI设计
BCSP软件开发专业
BCNT网络工程师
JAVA工程师
青鸟问答
男生学什么技术好
女生学什么专业好
北大青鸟师资
北大青鸟就业
北大青鸟学费