1. 文件结构：

    HTML文件的固定结构：

    <html>

        <head>...</head>

        <body>...</body>

    </html>

    html是根标签

    head定义文档头部，包含： title, script, style, link, meta

    body是网页主要内容，包含：h1,h2-h6, p, a, img

2. 认识head标签：

    <head>

        <title>...</title>         网页标题

        <meta>

        <link>

        <style>...</style>

        <script>...</script>

    </head>

3. 语义化：

    明白每个标签的用途（在什么情况下我可以使用这个标签才合理）

        比如，网页上的文章的标题就可以用标题标签，

        网页上的各个栏目的栏目名称也可以使用标题标签。

        文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使用em标签表示强调等等。

4. 认识body标签：

    <p>段落文本</p>              有三段就放三个<p></p>

    <h1>标题文本</h1>            h1-h6共6个标题分级

    <em>斜体文本（强调）</em>    斜体文本内容

    <strong>粗体文本</strong>    粗体显示文本内容

    <span>单独样式文本</span>    没有语义的，它的应用就是为了 设置单独的格式用的

    <q>引用的文本</q>            引用的文本内容，会自动加上双引号

    <blockquote>大段引用</blockquote>    引用大段的文本内容，文本前后会加上缩进

    <br/>                        换行

    <hr/>                        水平横线

    &nbsp;                       空格

    <address>地址信息</address>  地址信息，通常用于公司地址显示

    <code>代码内容</code>        代码，通常是一行内

    <pre>多行代码</pre>          多行代码,你需要在网页中预显示格式时都可以使用它

    <ul>                         ul-li 列表信息，以圆点显示

      <li>信息1</li>

      <li>信息2</li>

       ......

    </ul>

    <ol>                         ol-li 列表信息，带上序号

       <li>信息</li>

       <li>信息</li>

       ......

    </ol>

    <div>排版内容<div>           排版中使用，相当于一个容器

                                 确定逻辑部分：逻辑部分是页面上相互关联的一组元素，如栏目版块

    <div id="版块名称">…</div>  div 带上ID号，使之更清晰

    <table>表格内容</table>      创建表格

        <caption>标题文本</caption>         为表格添加标题文本

        <tbody>...</tbody>       若加此标签后，表格会一次性显示出来（而非网页加载一点显示一点）

        <tr>表格一行</tr>        表格中的一行

        <td>表格单元格</td>      表格中的一个单元格

        <th>表格表头</th>        表格头部的一个单元格，表格表头

    <table summary="表格摘要">...</table>    为表格添加摘要，但不会被浏览器显示出来

    <a href="目标网址" title="鼠标滑过时显示文本">链接显示文本</a>    链接标签

        target="_blank"           网页将在新窗口中打开

        mailto:                   网页中邮件地址，可带多个参数

            mailto: 邮箱地址

            cc=     抄送地址

            bcc=    密抄地址

            ;       多个邮箱地址

            subject=邮件主题

            body=   邮件内容

        完整举例: <a href="mailto:yy@sf.com ?cc=aa@sf.com &bcc=bb@sf.com &subject=主题 &body=邮件内容">发送邮件</a>

    <img scr="图片地址" alt="下载失败时替换文本" title="提示文本" />

5. 与用户交互：

    语法：

        <form method="传送方式" action="服务器文件"></form>

    举例：

        <form    method="post"   action="save.php">

            <label for="username">用户名:</label>

            <input type="text" name="username" />

            <label for="pass">密码:</label>

            <input type="password" name="pass" />

        </form>

    表单控件：

        文本框、文本域、按钮、单选框、复选框

    method:

        post/get

    1. 文本框（文本/密码）

        <form>

           <input type="text/password" name="名称" value="文本" />

        </form>

        type：有“text”和“password”两种类型

        name：为文本框命名，方便后台ASP和PHP使用

        value：文本框默认值，一般起提示作用

    2. 文本域（多行文本）

        <textarea rows="行数" cols="列数">默认文本内容</textarea>

        cols：多行输入域的列数

        rows：多行输入域的行数

    3. 单选框、复选框

        <input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>

        type：radio单选，checkbox复选框

        value：提交数据到服务器的值，后台PHP处理使用

        name：为控件命名，以备后台程序ASP和PHP使用

        checked：checked="checked"时，此选项默认被选中

        注意：同一组的单选按钮，name取值一定要一致

    4. 下拉列表框

        <form action="save.php" method="post" >

            <label>爱好:</label>

            <select multiple="multiple">

              <label for="book>看书</label>

              <option value="看书" id="book">看书</option>

              <option value="旅游">旅游</option>

              <option value="运动">运动</option>

              <option value="购物">购物</option>

            </select>

            <input   type="submit"   value="提交">

            <input   type="reset"    value="重置"  />

        </form>

        value：向服务器提交值

        selected：设置selected="selected"时，默认选中

        multiple：multiple="multiple"时，可以使用Ctrl多选，但很丑

        label：为了改进鼠标易用性，鼠标点击文本时，选择上Radio

HTML 基础 1的更多相关文章

  1. java基础集合经典训练题

    第一题:要求产生10个随机的字符串,每一个字符串互相不重复,每一个字符串中组成的字符(a-zA-Z0-9)也不相同,每个字符串长度为10; 分析:*1.看到这个题目,或许你脑海中会想到很多方法,比如判 ...

  2. node-webkit 环境搭建与基础demo

    首先去github上面下载(地址),具体更具自己的系统,我的是windows,这里只给出windows的做法 下载windows x64版本 下载之后解压,得到以下东西 为了方便,我们直接在这个目录中 ...

  3. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  4. Golang， 以17个简短代码片段，切底弄懂 channel 基础

    (原创出处为本博客:http://www.cnblogs.com/linguanh/) 前序: 因为打算自己搞个基于Golang的IM服务器,所以复习了下之前一直没怎么使用的协程.管道等高并发编程知识 ...

  5. [C#] C# 基础回顾 - 匿名方法

    C# 基础回顾 - 匿名方法 目录 简介 匿名方法的参数使用范围 委托示例 简介 在 C# 2.0 之前的版本中,我们创建委托的唯一形式 -- 命名方法. 而 C# 2.0 -- 引进了匿名方法,在 ...

  6. HTTPS 互联网世界的安全基础

    近一年公司在努力推进全站的 HTTPS 化,作为负责应用系统的我们,在配合这个趋势的过程中,顺便也就想去搞清楚 HTTP 后面的这个 S 到底是个什么含义?有什么作用?带来了哪些影响?毕竟以前也就只是 ...

  7. Swift与C#的基础语法比较

    背景: 这两天不小心看了一下Swift的基础语法,感觉既然看了,还是写一下笔记,留个痕迹~ 总体而言,感觉Swift是一种前后端多种语言混合的产物~~~ 做为一名.NET阵营人士,少少多多总喜欢通过对 ...

  8. .NetCore MVC中的路由（1）路由配置基础

    .NetCore MVC中的路由(1)路由配置基础 0x00 路由在MVC中起到的作用 前段时间一直忙于别的事情,终于搞定了继续学习.NetCore.这次学习的主题是MVC中的路由.路由是所有MVC框 ...

  9. .NET基础拾遗（5）多线程开发基础

    Index : (1)类型语法.内存管理和垃圾回收基础 (2)面向对象的实现和异常的处理基础 (3)字符串.集合与流 (4)委托.事件.反射与特性 (5)多线程开发基础 (6)ADO.NET与数据库开 ...

  10. .NET 基础 一步步 一幕幕[面向对象之方法、方法的重载、方法的重写、方法的递归]

    方法.方法的重载.方法的重写.方法的递归 方法: 将一堆代码进行重用的一种机制. 语法: [访问修饰符] 返回类型 <方法名>(参数列表){ 方法主体: } 返回值类型:如果不需要写返回值 ...

随机推荐

  1. vue+webpack项目实战

    概述 -- 项目中会用到的插件 vue-router vue-resource 打包工具 webpack 依赖环境 node.js start 安装vue开发的模板 # 全局安装 vue-cli $ ...

  2. webpack构建具备版本管理能力的项目

    webpack是时下十分流行的编译和打包工具,它提供一种可扩展的loader的方式,简单的配置,便可以编译打包各类型的文件,包括js.css.image.font.html,以及各种预编译语言都不在话 ...

  3. H5页面之iphone6的适配

    兼容iphone各版本机型最佳的方式就是自适应. 1.viewport 简单粗暴的方式: 1 <meta name="viewport" content="widt ...

  4. Unity 屏幕震动效果实现

    要实现震屏效果其实并不难,所谓的震屏在PC端可以简单地理解为相机(MainCamera)的抖动. 代码实现如下: using UnityEngine; using System.Collections ...

  5. 【沙茶了+筛选保存最大质因数】【HDU2136】Largest prime factor

    Largest prime factor Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Oth ...

  6. ECShop2.7.2详细文件结构及模板结构目录名称

    ┣plugins目录┣templates目录┃   ┣backup目录┃   ┃   ┣index.htm┃   ┃   ┗ibrary目录┃   ┃       ┗index.htm┃   ┣cac ...

  7. ios ColorLUT滤镜

    通过这种方格图片实现滤镜 代码: "CIFilter+ColorLUT.h" "CIFilter+ColorLUT.m" #import "CIFil ...

  8. 谈谈对web标准的理解

    Web标准不是某一个标准,而是由一系列标准组合而成.网页主要由三部分组成:结构.表现和行为.对应的标准也分三方面:结构化标准语言主要包括XHTML和HTML以及XML,表现标准语言主要包括CSS,行为 ...

  9. Hibernate学习——映射关系

    学习记录 O(∩_∩)O . 如果你恰巧路过,希望你能停下脚步瞧一瞧,不足之处望指出,感激不尽~ 使用工具: 1.eclipse   2.hibernate压缩包(hibernate_4.3.11)  ...

  10. Eclipse导入jre方法

    处理步骤:引入本机安装的jre1.8的步骤如下: