黑马程序员技术交流社区

标题: 关于html的笔记 [打印本页]

作者: Jack.李 时间: 2017-7-16 18:42
标题: 关于html的笔记
HTML是什么？
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
HTML 标签是什么？
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签，如下实例:
<标签>内容</标签>
HTML 元素
"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:
   <p>这是一个段落。</p>
HTML文档结构：

<html>和</html>标记HTML文档的开始和结束。这些标记告诉浏览器，整个文件是由HTML中。这两个标记内部，文档将被分为两部分：

<head>...</head> 元素，其中包含的信息的文件，如文件的标题，作者在此标签内的文件等信息不显示外面。

<body>...</body> 元素，其中包含的文件，在屏幕上看到的真实内容。

HTML标签和元素：

HTML语言是一种标记语言，我们使用了许多标签标记文本。在上面的例子中已经看到<html>，<body>等被称为HTML标记或HTML元素。

每个标签由标签名，有时还会置于打开和关闭括号（< 和 >）的标签属性，所有的可选列表。最简单的标签是什么比一个适当的名称括在括号中，，如<head>和<i>更多。  更复杂的标签包含一个或多个属性，这些属性的标签的指定或修改的行为。

根据标准的HTML标签和属性名称是不区分大小写。有没有效果差异之间的<head>，<HEAD>，<HEAD>，甚至<HeaD>; 它们都是等效的。但与XHTML的情况是重要的：目前所有的标准标签和属性名称以小写。
HTML是定义宽松？

所有的浏览器有一个很好的处理，他们不会给出任何错误，如果还没有把任何HTML标签或属性正确。他们会忽略该标签或属性，将仅适用于正确的标签和属性，然后显示结果。

我们不能说，HTML是宽容的，因为这仅仅是一种标记语言，并要求格式文件。

HTML基本标签与介绍
   Html介绍
   文件标签
   排版标签
   块标签
   列表单标签
   图形标签
   链接标签
   表格标签
  HTML表单标签(重点)
   form标签
   input种类
   select与option标签
   textarea标签
  HTML框架及特殊字符
   框架标签
   其它标签与特殊字符
   一 HTML基本标签与介绍
      1.html是什么？
         超文本标记语言
         超文本：比普通的文本强大。可以添加一些特殊的效果
         标记：标签<html>
         语言：交流的工具。
         注意：html的标签是预定好的。
      2.作用
         展示信息
      3.书写规范
         1.文本编辑器创建，后缀名必须为html或者htm
         2.<> .一般成对出现。</html>.绝大多数标签都具有属性书写的时候属性值用引号引起来。书写正确嵌套书写。
         3. <br>  <br/>
         4.不区分大小写
      4.文件标签
         html  head  title  body
            html:声明
            head:包含重要的信息，不显示。
            title:标题
            body:显示。
body
   bgcolor:设置背景颜色
   background:设置背景图片
   text:文本颜色

   5.排版标签
      :是html的注释
         hr:水平线
            color:颜色
            align：对齐方式（left  center right）
            width:宽度
            size:厚度
         br:换行
         p  ：段落标签
            align
单位：
   px(像素)
颜色的三种定义方式：
   1.英文单词
   2.#加十六进制数(#ffffff)
   3.rgb(0,0,0)    {0~255}
   6.块标签
      div：块元素
      span：内联元素
      div换行。
   7.字体标签
      h1~h6
      font
         face：字体
         color:颜色
         size：大小
   8.列表
      有序列表
      无序列表
      ul:无序列表
         type:disc 、circle、square。
      ol：有序列表
         type：a A i I 1
         start:列表序号
      li：列表项
         当为无序列表项时有type属性设置具体的项的符号
         当为有序列表项时为序列号
   9.图像标签
      img标签 :
         width:宽度
         height：高度
         border:边框
         alt:文字提示
         src：图片地址。
   10连接标签
      a标签
         href：跳转地址（URL）本页面跳转是用#号
         name：锚点（就是返回最下或者最上部通常与href一起使用）
         target:如何打开（如果等于new那么就是在打开此网页的基础上在打开一个网页，如果不写new那就是直接跳转，不重新打开一个网页）
11.表格标签
         table:声明
         tr:行
         th:类似于td。不过是在td标签的样式上居中加粗、
         td：列（单元格）
         colspan:合并列
         rowspan ：合并行
         常用属性
            border="1"
            align="center"
            width="70%"
            bgcolor="#0000FF"
            caption:标题
            align:bottom( 底部)
第二部分一个实例
HTML表单标签(重点)
   表单的作用：收集数据，传递到后台。
   form:标签声明
      action：规定提交的地址（url）
      name:规定名字
      method：get、post、
      get和post区别
         1.post相对来说比较安全，浏览器不会显示提交的内容
         2.get提交少量数据。post的大量数据。
      姓名  <input type="text"> {文本框}
      密码  <input  type="password"> {密码框}
      性别  <input type="radio">男 <input type="radio">女{单选框}
      爱好  <input type="checkbox">足球 <input type="checkbox">篮球{多选框}
      地址  <select>{下拉列表}
               <option>黑龙江1</option>
               <option>黑龙江2</option>
               <option>黑龙江3</option>
            </select>
            <select>
               <option>哈尔滨1</option>
               <option>哈尔滨2</option>
               <option>哈尔滨3</option>
            </select>
      邮箱 <input  type="text"> {文本框}
      上传头像<input  type="file">{文件框}
      备注<textarea></textarea>  {文本域}
      <input type="submit" value="注册"> {提交按钮}
      <input  type="reset" value="取消">{重置按钮}
      <input type="image" src="" alt="">  {图片}
  ?username=qq&pass=qqq
name:通过name得到数据。
第三部分
   框架与一些特殊字符  注意:frameset标签不和<body></boday>同时使用
         frameset
         frame
特殊字符
    是空格
   >是">"
   ©是版权标志
   <是<

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2