html简单了解

版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/qq_34548401/article/details/84947938

知识结构

  1. html
  2. css
  3. javaScript
    1. jQuery
  • 网页的组成

    1. 结构(HTML)
      • HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。
    2. 表现(CSS)
      • CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
    3. 行为
      1. JavaScript
      2. JQuery
  • html文件的结构

    1. 为HTML页面中的根标签,所有的HTML网页中的标签都在中。
    2. 标签用于定义文档的头部,它是所有头部元素的容器。头部元素有
    3. <title>、<script>、 <style>、<link>、<meta>、<title>、<script>、 <style>、<link>、<meta>
    4. 在和标签之间的内容是网页的主要内容,如<h1>、<p>、<a>、<img>等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。
  • 标签的语法

    1. 标签由英文尖括号 < 和 > 括起来,如:
    2. html中的标签一般都是成对出现的,分开始标签和结束标签。结束标签比开始标签多一个 / ,;还有一些是自结束标签,如:
    3. 标签与标签之间是可以嵌套的,但先后顺序必须保持一致,如:<div>里嵌套<p>,那么<p>必须放在<div>的前面。如: <div><p>…<p><div>
    4. 注释是不可以嵌套的,如:<!-- <!-- 注释部分 --> -->
    5. HTML标签不区分大小写,<h1>和<H1>是一样的,但建议小写。
    6. 标签一般分为有始有终、自结束两类

HTML的常用标签

  • 标题标签,div,段落,转义字符,无序列表,图片标签
  • 标题标签:<h1>…</h1>~<h6>…</h6>
  • div标签:<div>…</div>,相当于一个容器,可以把一些独立的逻辑部分(如网页中独立的栏目版块)划分出来
  • 段落标签:<p>…</p>
  • 转义字符
    • 语法:&;
    • eg:
      • &gt; 大于号
      • &lt; 小于号
      • &nbsp; 空格
      • &emsp; 中文空格
      • &copy; 版权号
  • 无序列表:
        <ul>
            <li>...</li>
            <li>...</li>
        </ul>
  • 图片标签:
    • alt:图片无法显示时显示的描述性文字
    • src:图片的地址
      • 相对路径
      • 绝对路径
    • title(了解):鼠标放在图片上时显示的描述性文字
  • 超链接:<a href="" target=""></a>
    • href:指向一个链接地址
    • target:目标窗口
      • 值为”_self”时在向当前窗口(默认)打开新的网页
      • 值为”_blank”时在新的窗口打开
  • 内联框架
	<iframe src="" name=""></iframe>
    src:一个网页的地址
    name: iframe的名字,当<a>标签的target属性值      为iframe的name时,超链接的目标页面会在iframe中打开
  • 一些强调标签
    • <strong>和<em>标签
      • 两者在强调的语气上有区别: <em> 表示强调,<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用 斜体 表示,<strong> 用 粗体 表示。
    • <span>标签
      • <span>标签是没有语义的,它的作用就是为了设置单独的样式用的。有了它就可以对某段文字里的几个字单独设置样式了。
  • talbe标签,制作表格
    • border:边框
    • tr:行
    • td:列(单元格)
      • th:特殊的td表示表头
    • 跨行,跨列
      • colspan:跨行
      • rowspan:跨列
    • align属性,
      • left
      • right
      • center
  • form标签,制作表单,可提交!!!
    • name
    • method 提交方式
      • get
      • post
    • action form提交到哪里
    • input标签配合form使用
      • type类型选择器
        • text文本框
        • password密码框
        • reset重置按钮
        • submit提交按钮
        • radio单选按钮
        • checkbox多谢按钮
    • select标签,制作下拉列表框
      • name必须要有!!!否则不能提交,表单提交类似于java的properties
      • option配合使用表示列表框

猜你喜欢

转载自blog.csdn.net/qq_34548401/article/details/84947938