A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

html:超文本标记语言。
  html语言中是由标签组成的。
  html中的数据都会封装在标签中。因为可以通过标签中的属性值的改变对封装内数据进行操作。
  确定html代码范围。<html> </html>
  在该范围中可以定义两部分内容,一部分是头,一部分是体。
  <html>
    <head></head>
    <body></body>
  </html>
  head:网页的一些属性信息。比如:标题。
  body:网页显示的数据
  标签特点:对于数据进行封装,那么就要开始标签和结束标签。
    但是也有一些标签只体现单一功能,所以不需要结束标签,规范中要求标签必须要结束,所以这样的标签在内部结束。
    如:<br/> <hr/> <img /> <input />
  标签格式:<标签名 属性名="属性值" >数据</标签名>
      <标签名 属性名="属性值" />
  
  ------------------------------------------------
  常见标签:
  1、字体:<font>
  <font size="7" color="#ffffoo">数据</font>
  特殊部分:如果要在页面显示一些特殊符号,需要进行转义。
  <: &lt; >:&gt; &: &amp; 空格: &nbsp
  标题: <h1> <h2> <h3>.....<h6>
  2、列表标签:<dl></dl>
    上层项目:<dt>
    下层项目:<dd>
    项目符号标签:
      <ul>
      <ol>
      这两个标签中的列表项都由<li>标签封装。
    示例:
    1、游戏名称
      a.星际
      b.红警
    2、游戏内容
      a.攻略
      b.秘籍
  3、图像标签:<img>
    <img src="" alt="图像说明文字" />
  4、表格标签:<table>
    表格由行组成,行由单元格组成。
    表格中默认都由一个tbody标签
    <table border="1" bordercolor="red" width="60%" cellpadding="10" cellingspacing="0">
      <tr>
       <th></th>
       <th></th>
      </tr>
      <tr>
       <td></td>
       <td></td>
      </tr>
    </table>
    表格式最常用的标签,用于对数据进行格式化。
  5、超链接:<a>
   <a  target="_blank">新浪网站</a>
   当被点击后,会启动引擎所对应解析程序。
   去查找指定主机。
   1、先找本地主机的hosts文件。如果没有找到该主机对应的ip地址
   2、去公网DNS服务器上找对应的ip地址。
   <a href="mailto:abc@sohu.com?subject=haha&cc=qq@163.com" >联系我们</a>
   当点击超链接时,就会出现邮件相关联的解析程序,本机默认的是outlook。
   超链接的另一个作用:
   定义标记:
   <a name="top">一个位置</a>
   <a href="#top">获取那个位置</a>
  6、表单标签:
   该标签是可以和服务端进行交互的。
   <form>
   表单标签中元素:
   <input>:该标签因为type属性的值的不同,所对应的组件也不一样。
   type属性:
    1,text:文本框,输入的文本可见。
    2,password:密码框,输入的文本不可见。
    3,radio:单选框,注意,要被选中,必须要给单选框定义一个属性name。
      当有多个单选框时,只能有一个被选中,那么这些单选框的name值必须相同。
    4,checkbox:复选框,当对多个数据进行同时选中时。
    5,file:可以进行文件选择的组件。通常用于附件或者文件上传。
    6,hidden:隐藏组件,该组件不会在页面上显示,但是其定义的name和value可以提交到服务端。
    7,buuton:按钮组件,自定义一个按钮默认是没有任何效果的,可以通过注册事件并加入自定义效果。
    8,submit:提交按钮,将组件中添加的数据提交到指定的目的地。
    10,image:图像组件,为了避免提交按钮的难看,可以通过image的src属性连接一个好看的按钮图片完成提交效果。
   下拉式菜单:<select>
    每一个下拉菜单项都由option进行封装。
    <select>
     <option></option>
    </select>
   文本区域:<textarea>
   表单组件通常都需要定义name和value属性,因为要将数据发送给服务端,
   服务端只有知道了该name的值才可以对提交的数据进行分别获取。
   form表单中的常见属性:
   action:指定数据提交的目的地。method:提交方式。两种常用值get和post。get为默认。
   get和post的区别:
   get:会将提交的数据显示在地址栏上。
   post:不会将数据显示在地址栏。
   get:提交的数据的体积受地址栏的限制。
   post:可以提交大体积数据。
   
   get:对于敏感信息不安全。
   post:对于敏感信息安全。
   get:会将提交信息封装在请求行,也就是http消息头之前
   post:会将提交信息封装在数据体中,也就是http消息头后的空行后。
   对于服务端而言。
   表单提交尽量用post,因为涉及编码问题。
   对于post提交的中文,在服务端可以直接使用setCharacterEncoding("gbk")就可以解决。
   对于get提交的中文,在服务端只能通过ISO8859-1将数据编码一次,再通过指定的编码表如GBK解码。
   使用表单的组件不一定要定义form标签。只有需要将数据进行服务端的提交的时候才会用到form标签。
css层叠样式表。
  将网页中的样式分离出来,完全由css来控制。
  增强样式的复用性以及可扩展性。
  格式:
    选择器{属性名:属性值;属性值.....}
  css和html代码相结合的四种方式:
  1,每一个html标签都有一个style属性。
  2,当页面有多个标签有相同样式时,可以进行复用。
    <style>
     css代码
    </style>
  3、当有多个页面中的标签的样式相同时,还可以将样式单独封装成一个css文件。
    通过在每个页面中定义
    <style>
      @import url("1.css");
    </style>
  4、通过html中head标签中的link标签链接一个css文件。
    <link rel="stylesheet" href="1.css"/>
  技巧:为了提高相同样式的复用性以及可扩展性,可以将多个标签样式进行单独定义,并封装成css文件。
    p.css,div.css.......
    在一个css中使用css的import将多个标签样式文件导入。
    然后在html页面上,使用link标签导入这个总的css文件即可。
    1.css
    @import url("p.css");
    @import url("div.css");
    <link rel="stylesheet" href="1.css"/>
------------------------------------------
  选择器:其实就是样式要作用的标签容器。
  当样式分离后,html作用在于用标签封装数据。然后将css加载到指定标签上。
  选择器的基本分类:
  1、标签选择器。其实就是html中的每一个标签名
  2、类选择器。其实就是每一个标签中的class属性。用.的属性表示
      只用来给css所使用,可以对不同标签进行相同样式设定。
  3、ID选择器。其实就是每一个标签中的ID属性。但是要保证ID的唯一性。用#来表示
      ID不仅可以被css所使用,还可以被javaScript所使用
  选择器的优先级:ID>class>标签
  扩展选择器:
  1、关联选择器:其实就是对标签中的标签进行样式定义。选择器
  2、组合选择器:对多个选择器进行相同样式定义。将多个选择器通过","隔开的形式。
  3、伪元素选择器:其实就是元素的一种状态。
   a:link:超链接被点前状态
   a:visited:超链接点击后状态
   a:hover:悬停在超链接上
   a:active:点击超链接时
   在定义这些状态时,有一个顺序:L V H A
   p:first-letter
   p:first-line
   :focus:很遗憾,IE6不支持。但FF支持。
  css滤镜:其实通过一些代码完成丰富了样式。
  当使用到css的更多属性时,还需要查阅css api
  网页设计的时候。div+css
  div:行级区域
  span:块级区域
  p:行级区域。p中不要嵌套div
   


评分

参与人数 1技术分 +1 收起 理由
曹睿翔 + 1 神马都是浮云

查看全部评分

1 个回复

正序浏览
您需要登录后才可以回帖 登录 | 加入黑马