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. USACO Section 2.1 Sorting a Three-Valued Sequence

    /* ID: lucien23 PROG: sort3 LANG: C++ */ #include <iostream> #include <fstream> #include ...

  2. wpf msdn在线地址http://msdn.microsoft.com/zh-cn/library/ms752324(v=vs.110).aspx

    http://msdn.microsoft.com/zh-cn/library/ms752324(v=vs.110).aspx

  3. android 更改USB显示名称

    能力 kernel\drivers\usb\gadget\Android.c 在这个例子中,下列的变化 #define PRODUCT_STRING "Sergeycao" 版权声 ...

  4. Swift的基础，操作符，字符串和集合类型

    这篇文章主要讲解苹果Swift官方指南的第二章前四节的要点内容,如果想看完整的英文文档可以去苹果开发者页面下载. Basic 声明常量let 声明变量var 注释依旧使用"//" ...

  5. windows下sqlplus / as sysdba报ora-12560的解决方法

    环境:win7_64位.数据库版本ORACLE11G_R2 在CMD窗口,使用下面三个命令可正常连接数据库:C:\Users\Administrator> sqplus /nolog C:\Us ...

  6. [python笔记][第二章Python序列-list]

    2016/1/27学习内容 第二章 Python序列-list list常用操作 list.append(x) list.extend(L) list.insert(index,x) list.rem ...

  7. 【HeadFirst 设计模式总结】1.策略模式

    1.书中举了一个鸭子类的设计,有些会飞或者会叫,有些不会飞可能也不会叫,用继承则导致不该有的功能通过继承而继承了下来,使用接口则代码无法做到最大程度的重用.进而引出设计原则1:找出应用中可能需要变化之 ...

  8. EntityFramework sum嵌套

    一个查询中 用到了 sum , 可是返回结果的小数有很多位 , 都不准确了..类似js中的小数运算一样...不太熟悉C#,不知道这问题是因为double的关系 , 还是因为代码写的问题 , 通过 sq ...

  9. 垃圾回收器 Dispose 和 Finalize 的互补作用

    假如我们程序有两个窗口 Form1.Form2; 当我们关闭一个窗口的时候,会发出一个 终止响应,并将该窗口对象送入终止队列,公共语言运行库的垃圾回收器跟踪着这个对象的生存期,此时就会调用此对象的基类 ...

  10. mysql中select into 和sql中的select into 对比

    现在有张表为student,我想将这个表里面的数据复制到一个为dust的新表中去.answer 01: create table dust select * from student;//用于复制前未 ...