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. Swift继承的用法

    一个类可以继承另一个类的方法,属性和其它特性.当一个类继承其它类,继承类叫子类,被继承类叫超类(或父类).在Swift中,继承是区分「类」与其它类型的一个基本特征. 在Swift中,类可以调用和访问超 ...

  2. Java中对象的三种状态

    Java中的对象的三种状态是和垃圾回收紧密相关的,因此有必要深究. 状态一:可触及态:从根节点开始,可以搜索到这个对象,也就是可以访问到这个对象,也有人将其称为可达状态. 状态二:可复活态:从根节点开 ...

  3. 【原创】System.Data.SQLite内存数据库模式

    对于很多嵌入式数据库来说都有对于的内存数据库模式,SQLite也不例外.内存数据库常常用于极速.实时的场景,一个很好的应用的场景是富客户端的缓存数据,一般富客户端的缓存常常需要分为落地和非落地两种,而 ...

  4. ubuntu安装体验

    本文记录一下昨晚及今天安装ubuntu系统的过程及体验 2016年6月13日09:36:11 更新 今天才有发现原来自己有个没填的坑 = = 那次安乌班图后第一感觉是很好用,新鲜了好几天,但是很快,新 ...

  5. js压缩解压工具

    参看下面链接:http://js.clicki.cc/

  6. 使用jsonp实现ajax跨域请求

    Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”,可以让网页从别的网域获取资料. 由于同源策略,一般来说位于 server1.example.com 的网页无法 ...

  7. 再谈Android应用瘦身

    Android应用apk安装包的大小,虽然对于现在WiFi普及情况而言消耗流量已经微乎其微,但是,对于一款好的应用,对于一款负责任的应用,当然是越小越好了. 引言: .应用越小,下载越快,也就意味着新 ...

  8. Android Adapter代码片

    /** * Adapter for grid of coupons. */ private static class CouponAdapter extends BaseAdapter { priva ...

  9. Yii 2.0安装

    通过 Composer 安装 注意: php版本最好在5.5以上! 1.下载 Yii2的高级应用程序模板 ,然后将其解压缩到一个Web可访问的文件夹. 2.下载Composer-Setup.exe , ...

  10. 基本语法 - PHP手册笔记

    PHP标记 如果文件内容是纯PHP代码,最好在文件末尾删除PHP结束标记.这可以避免在PHP结束标记之后万一意外加入了空格或者换行符,会导致PHP开始输出这些空白,而脚本中此时并无输出的意图.当然PH ...