HTML 入门笔记

可以教我写代码吗
137 阅读9分钟

HTML 入门笔记(持续更新...)

学习资源

目录

  1. 常用章节标签/属性
  2. 重点标签

HTML 简介

  • 是什么?
    • HTML 的全名是“超文本标记语言”（HyperText Markup Language），上个世纪90年代由欧洲核子研究中心的物理学家蒂姆·伯纳斯-李（Tim Berners-Lee）发明
  • HTML 起手应该怎么写? 
    •   <!DOCTYPE html>
   <html lang="zh-CN">
   <head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Document</title>
   </head>
   <body>

   </body>
   </html>

常用 章节标签/属性

  1. h1 ~ h6 标题标签

    •     <h1>这是一个标题。</h1>
    <h2>这是一个标题。</h2>
    <h3>这是一个标题。</h3>

  2. section 章节标签

    • 签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域
    •    <section>
     <h1>WWF</h1>
     <p>你好我是章节标签</p>
   </section>

  3. article 文章标签

    • 标签定义独立的内容
    • <article>
  <h1>标签含义</h1>
  <p>标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分 </p>
</article>

  4. p 段落标签

    • 同上有例子

  5. header 头部标签

    • 标签定义文档或者文档的一部分区域的页眉。
    • 元素应该作为介绍内容或者导航链接栏的容器。
    • header 标签不能被放在 footer、address 或者另一个 header 元素内部。
    •     <article>
         <header>
             <h1>Internet Explorer 9</h1>
             <p><time pubdate datetime="2011-03-15"></time></p>
         </header>
         <p> Windows Internet Explorer 9(缩写为 IE9 )是在2011年3月14日21:00发布的</p>
     </article>

  6. footer 尾部标签

    • 标签定义文档或者文档的一部分区域的页脚。
    • 元素应该包含它所包含的元素的信息。

  7. main 主要内容标签

    • 标签用于指定文档的主体内容。
    • 标签中的内容在文档中是唯一的。

  8. div 内容划分元素

    • 签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。
    • 作为一个“纯粹的”容器，div 元素在语义上不表示任何特定类型的内容。然而，其可以将内容分组，从而可以使用class或是id属性方便的定义内容的格式，也可以在一段文档中划分标记出使用另一种语言书写的内容（使用lang 属性）等等
全局属性等
  1. class
    • 规定元素的类名
  2. contenteditable
    • 规定是否可编辑元素的内容。
  3. hidden
    • hidden 属性规定对元素进行隐藏。
  4. id
    • 规定元素的唯一 id
  5. style
    • 规定元素的行内样式（inline style）
  6. tabindex
    • 设置元素的 Tab 键控制次序。
    • 参数 0 是最后选择 -1 是不选择
  7. title
    • 规定元素的额外信息（可在工具提示中显示）
默然样式 HTML
  1. 为什么有默认样式?
    • HTML先发明出来的,那时候还没有css.
  2. 怎么看默认样式?
    • 打开浏览器 F12 开发者工具
    • Elements > styles > user agent stylesheet
  3. 常用 css reset
    • 大型网站的首页,找类似代码
    • 复制到自己的项目中
    • google 下
常用标签/用法
  1. ol > li
    • 标签是一个有序列表容器
    •   <ol>
     <li>我是有序列表</li>
     <li>我是有序列表</li>
   </ol>
  2. ul > li
    • 标签是一个无序列表容器
    •   <ol>
     <li>我是有序列表</li>
     <li>我是有序列表</li>
   </ol>
  3. dl > dt + dd
    • dl 标签定义一个描述列表
    • dt 标题定义 dd 内容
    •      <dl>
         <dt>CPU</dt>
         <dd>中央处理器</dd>

         <dt>Memory</dt>
         <dd>内存</dd>

         <dt>Hard Disk</dt>
         <dd>硬盘</dd>
     </dl>
  4. pre
    • 标签是一个无序列表容器
    •   <ol>
     <li>我是有序列表</li>
     <li>我是有序列表</li>
   </ol>
  5. em
    • 标签是一个短语标签，用来呈现为被强调的文本
    •   <em>强调文本</em>
  6. strong
    • 标签是一个短语标签，用来定义计算机程序的样本重要的文本。
    •   <strong>加粗文本</strong>
  7. code
    • 标签是一个短语标签，用来定义计算机代码文本。
    •   <code>一段电脑代码 print("Hello World")</code>
∗∗\color{FF0000}{**}重要标签
  1. a 超链接标签
    • 可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接
    • 属性
      • href 属性给出链接指向的网址
      • rel=noopener 告诉浏览器打开链接时，不让链接窗口通过 JavaScript 的
      • download 下载页面
      • title 属性给出链接的说明信息
        • 鼠标悬停在链接上方时，浏览器会将这个属性的值，以提示块的形式显示出来。
      • target 属性指定如何展示打开的链接, 属性的值也可以是以下四个关键字
        • _self:当前也蛮
        • _blank : 新窗口打开
        • _parent : 上层窗口打开! 如果当前窗口没有上层窗口，这个值等同于_self
        • -top : 顶层窗口打开.如果当前窗口就是顶层窗口，这个值等同于_self
    •   <ul>
     <li><a href="//baidu.com" target="_blank">Website</a></li>
     <li><a href="itonglei@qq.com" target="邮件">Email</a></li>
     <li><a href="tel:+123456789">Phone</a></li>
 </ul>
  2. img 标签用于插入图片 单独使用的，没有闭合标签
    • 默认是一个行内元素，与前后的文字处在同一行。
    • git请求 显示图片
    • 响应式
      • mac-width:100% 可以适应手机
    • 事件
      • onload
        • 事件会在页面或图像加载完成后立即发生
      • onerror
        • 数据加载期间发生错误时触发
    • 属性
      • alt 属性用来设定图片的文字说明
      • src 图像的 URL
    •   <img src="foo.jpg"  width="400" height="300" alt="示例图片">
  3. form 标签用来定义一个表单，所有表单内容放到这个容器元素之中
    • 发送get或psot 请求,然后刷新页面
    • 事件
      • onsubmit
        • 事件在表单提交时触发。
    • 属性
      • action
        • 服务器接收数据的 URL。
      • autocomplete
        • 如果用户没有填写某个控件，浏览器是否可以自动填写该值。
        • 类似 百度搜索框提示的数据
      • method
        • 提交数据的 HTTP 方式
      • target
        • 在哪个窗口展示服务器返回的数据
        • 属性规定一个名称或一个关键词，指示在何处打开 action URL
        • 可参考 a 标签4个属性值
    •   <form action="https://example.com/api" method="post" target="_blank">
     <label for="POST-name">用户名：</label>
     <input id="POST-name" type="text" name="user">
     <input type="submit" value="提交">
 </form>
  4. input
    • 用户输入内容
    • 标签是一个行内元素，用来接收用户的输入
    • 事件
      • onchange
        • 事件会在域的内容改变时发生
      • onfocus
        • 获得聚焦触发
      • onblur
        • 失去焦点触发
    • 属性
      • type
        • button
          • 是没有默认行为的按钮，通常js指定click事件的监听函数来使用。
          • 区别: input 和 button
          • input 的button value="只能显示存文本" <button>标签内部可以插入图片或其他 HTML 代码
        • CheckBox
          • 是复选框，允许选择或取消选择该选项。
          •       <input type="checkbox" id="agreement" name="agreement" checked>
      <label for="agreement">是否同意</label>
        • email
          • 是一个只能输入电子邮箱的文本输入框
        • file
          • 是一个文件选择框，允许用户选择一个或设置multiple多个文件，常用于文件上传功能。
        • hidden
          • 隐藏标签
        • number
          • 是一个数字输入框，只能输入数字。
        • password
          • 是一个密码输入框。
        • radio
          • 是单选框，表示一组选择之中，只能选中一项。
          •   <fieldset>
      <legend>性别</legend>
      <div>
          <input type="radio" id="male" name="gender" value="male">
          <label for="male">男</label>
      </div>
      <div>
          <input type="radio" id="female" name="gender" value="female">
          <label for="female">女</label>
      </div>
  </fieldset>
        • search
          • 是一个用于搜索的文本输入框，基本等同于type="text"。某些浏览器会在输入的时候，在输入框的尾部显示一个删除按钮，点击就会删除所有输入，让用户从头开始输入。
          •   <form>
      <input type="search" id="mySearch" name="q"
          placeholder="输入搜索词……" required>
      <input type="submit" value="搜索">
  </form>
        • submit
          • 是表单的提交按钮
          •   <input type="submit" value="提交">
        • tel
          • 是一个只能输入电话号码的输入框。
          •   <input type="tel" id="phone" name="phone"
      pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
      required>
        • text
          • 输入框有以下配套属性。
      • name
        • 控件的名称，主要用于向服务器提交数据时，控件键值对的键名。注意，只有设置了name属性的控件，才会向服务器提交，不设置就不会提交。
      • autofocus
        • 布尔属性，是否在页面加载时自动获得焦点。
      • checked
        • 布尔属性，表示是否默认选中当前项。
      • disabled
        • 布尔属性，是否禁用该控件。
      • maxlength
        • 允许输入的最大字符数。如果未指定此值，用户可以输入无限数量的字符。
      • pattern
        • 用户输入必须匹配的正则表达式，比如要求用户输入4个～8个英文字符，可以写成pattern="[a-z]{4,8}"。如果用户输入不符合要求，浏览器会弹出提示，不会提交表单。
      • value 用户选中该项时，提交到服务器的值，默认为on'
      • placeholder
        • 输入字段为空时，用于提示的示例值。只要用户没有任何字符，该提示就会出现，否则会消失。
      • autocomplete
        • 如果用户没有填写某个控件，浏览器是否可以自动填写该值。
        • 类似 百度搜索框提示的数据
      • method
        • 提交数据的 HTTP 方式
      • target
        • 在哪个窗口展示服务器返回的数据
        • 属性规定一个名称或一个关键词，指示在何处打开 action URL
        • 可参考 a 标签4个属性值
    •   <form action="https://example.com/api" method="post" target="_blank">
     <label for="POST-name">用户名：</label>
     <input id="POST-name" type="text" name="user">
     <input type="submit" value="提交">
 </form>
  5. table 是一个块级容器标签，所有表格内容都要放在这个标签里面。
    • 相关标签
    • <thead>、<tbody>、<tfoot>都是块级容器元素，且都是<table>的一级子元素，分别表示表头、表体和表尾。
    • 这三个元素都是可选的。如果使用了<thead>，那么<tbody>和<tfoot>一定在<thead>的后面。如果使用了<tbody>，
    • 那么<tfoot>一定在<tbody>后面。大型表格内部可以使用多个<tbody>，表示连续的多个部分。 
      •   <table>
      <thead>...头 ...</thead>
      <tbody>...内容 ...</tbody>
      <tfoot>...尾 ...</tfoot>
  </table>
    • tr
      • 标签表示表格的一行
      •   <table>
      <tr>...</tr>
      <tr>...</tr>
      <tr>...</tr>
  </table>
    • <th>和<td>都用来定义表格的单元格。其中，<th>是标题单元格，<td>是数据单元格。 
      •   <table>
      <tr>
          <th>学号</th><th>姓名</th>
      </tr>
      <tr>
          <td>001</td><td>张三</td>
      </tr>
      <tr>
          <td>002</td><td>李四</td>
      </tr>
  </table>
    • 相关样式
      • table-layout
        • 属性用来显示表格单元格、行、列的算法规则。
        • fixed固定表格布局
        •   table{
      table-layout:fixed;
  }
      • border-collapse
        • collapse 边框合并尾单一边框
        • separate 默认值。边框会被分开。
        • inherit 规定应该从父元素继承 border-collapse 属性的值
        •     table
    {
        border-collapse:collapse;
    }
      • border-spacing
        • 规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。
          • 如果定义一个 length 参数，那么定义的是水平和垂直间距。
          • 如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。
        •     table
    {
        border-collapse:separate;
        border-spacing:10px 50px;
    }
  6. select 标签表示一个提供选项菜单的控件：
    • <option> 元素都应该有一个 value 属性
    •  <select name="pets" id="pet-select">
     <option value="">--Please choose an option--</option>
     <option value="dog">Dog</option>
     <option value="cat">Cat</option>
     <option value="hamster">Hamster</option>
     <option value="parrot">Parrot</option>
     <option value="spider">Spider</option>
     <option value="goldfish">Goldfish</option>
 </select>

持续更新中...

avatar
文章
阅读
粉丝