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. Objective C - UIColor

    UIColor+Hex.h #import <UIKit/UIKit.h> @interface UIColor (Hex) + (UIColor *) colorWithHexStrin ...

  2. Android 四大组件之 Activity

    1 简介 Activity (活动) 即应用程序 显示的 界面.可以通过两种方式 设置显示的内容 1:纯代码方式 2:xml 布局方式 无论哪一种方式,都是通过 setContentView 来设置显 ...

  3. 【剑指offer】Q40：数组中出现一次的数

    书里面关于分类的推断有些麻烦,通过某一位为0为1来对数组元素进行分类.假如第3位为1.那么也就是元素x & 8 等于或不等于0,所以不是必需非的用第几位去推断. def once(array) ...

  4. ThinkPHP中的__initialize()和类的构造函数__construct()

    ThinkPHP中的__initialize()和类的构造函数__construct()网上有很多关于__initialize()的说法和用法,总感觉不对头,所以自己测试了一下.将结果和大家分享.不对 ...

  5. 使用SOAPUI测试WEBAPI接口

    其实很简单,用起来也挺方便的. 首先,先去百度下SoapUI 下载,下载安装好后,打开软件. 1.新建一个项目 点击 Create Empty Project 按钮后,会自动新建一个项目,名字默认为: ...

  6. 关于继承扩展ASP.NET控件(以Textbox为例)

    以下是一个相对简陋的扩展, 主要是针对金额显示的Textbox扩展. using System; using System.Collections.Generic; using System.Linq ...

  7. 随学随记之java的数据类型

    Java中的变量只有两种数据类型:基本数据类型(8种).引用数据类型 定义变量时内存中的状态变化:定义数据类型,开辟空间,存放数据. 8种基本数据类型的变量各占多大的内存空间,变量的取值范围 byte ...

  8. 2014年2月5日 Oracle ORACLE的工作机制[转]

      网上看到一篇描写ORACLE工作机制的文章,觉得很不错!特摘录了下来.   ORACLE的工作机制-1 (by xyf_tck) 我们从一个用户请求开始讲,ORACLE的简要的工作机制是怎样的,首 ...

  9. UTF-8、GB2312都支持的汉字截取函数

    <?php/*Utf-8.gb2312都支持的汉字截取函数cut_str(字符串, 截取长度, 开始长度, 编码);编码默认为 utf-8开始长度默认为 0*/ function cut_str ...

  10. 钱币兑换问题（hd1284）

    钱币兑换问题 在一个国家仅有1分,2分,3分硬币,将钱N兑换成硬币有很多种兑法.请你编程序计算出共有多少种兑法.   Input 每行只有一个正整数N,N小于32768.   Output 对应每个输 ...