web开发学习笔记-Html篇

本文主要对 HTML 进行介绍和归纳。
首先,我们要知道HTML是一种超文本标记语言,不需要编译,直接由浏览器执行。HTML由W3C维护,是通向WEB技术世界的钥匙。

一、HTML文件主体结构标签

1、文档声明 <!doctype html>
2、html标签
3、head标签里面会包含诸如页面标题,搜索引擎信息等相关的标签
4、body标签页面的主体内容包含在里面。属性有background、bgcolor、text、link、vlink、alink

二、head头部标签

1、<title></title>定义标题
2、<meta/>向服务器和客户端传达关于文档的隐藏信息。
3、<link href=""></link>允许当前文档和外部文档建立连接
相关的代码:

  • 定义字符集编码<meta charset="utf-8">
  • 刷新或者跳转<meta http-equiv="refresh" content="3;url=http://www.baidu.com" >过3秒跳到百度
  • 设置关键字<meta name="keywords" content="">
  • 设置页面描述<meta name="description" content="">
  • 定义网站标题图标<link rel="shortcut icon" href="图片地址.ico">(各种图标可以到icon网上找)

三、格式排版标签

  • <br/>换行
  • <hr/>分隔线
  • <p>段落
  • <pre>原样输出(按照原格式输出)
  • <h1></h1>标题标签
  • <center></center>居中

HTML实体:

  • * &nbsp; 空格
  • * &lt; <
  • * &gt; >
  • * &quot; “ 引号
  • * &copy; © 版权
  • * &yen; ¥
  • * &times; ×
  • * &divide; ÷
  • * &reg; ®

四、列表标签

  • <ol> 定义有序列表
  • <ul> 定义无序列表
    excemple:
    <h4>无序列表:</h4>
    <ul> 
    <li>Coffee</li>
    <li>Tea</li> 
    <li>Milk</li>
    </ul>
    
  • <li> 定义列表项
    excemple:
    <h4>大写字母列表:</h4> 
    <ol type="A"> 
    <li>Apples</li> 
    <li>Bananas</li> 
    <li>Lemons</li> 
    <li>Oranges</li> 
    </ol>
    
  • <dl> 定义定义列表
  • <dt> 自定义列表项目
  • <dd> 定义自定列表项的描述–>

五、文本标签

  • em强调 表现为斜体
  • strong 强调 表现为加粗
  • blockquote引用

六、链接和锚点

  1. URL同一资源定位符,万维网的每一个文件都有一个URL
  2. a标签属性: href的值是URLtarget新网页从哪个窗口打开(_self/_blank)title 提示、download下载(H5新增)
  3. 锚点<a name="锚点的名字"></a>、使用超链接#跳到指定位置

七、图像

  1. img标签的属性:
    src
    alt图片无法显示时显示文字
    title
    width/height

  2. usemap
    usemap用于图片的映射。一个图像被分成几个区域,当用户点击某一个区域时,将被链接到不同的文档中。

  • <a name="page1"><a/>
  • <img src="" usemap="mymap">
  • <map name="mymap" id="mymap">
  • <area shape="rect" coords="0,10,20,20" href="#page1">

八、表格

  1. table标签 属性:border、width/height、cellspacing(单元格之间的间隙,默认2)、cellpadding(单元格与单元格内容之间的间隙,默认0)、align、bgcolor、background
  2. tr标签 属性:
    align(行内文字的水平对齐方式left/center/right)
    valign(行内文字的垂直对齐方式top/middle/bottom)
    height行高度
    bgcolor背景颜色
  3. td标签属性:align、valign、width、height
  4. th标签 表头

九、表单

  1. form属性有action、method、target、enctype

    1
    <form action="http://www.baidu.com/s" method="get">
  2. input
    name
    type(text默认文本框、password密码框、radio单选框、checkbox复选框、file文件上传、submit提交按钮、reset重置按钮、button普通按钮)
    value type值不同value的意义不同
    size 控制输入框宽度 适用于text/password
    maxlength 最大输入字符个数 适用于text/password
    checked 默认选中 适用于radio/checkbox
    readonly 只读
    disabled 表示不可用
    示例:

    1
    <input type="text" name="wd" placeholder="请输入您的用户" size="50" maxlength="5" disabled>
  3. button
    type属性 submit(默认)resetbutton

  4. select属性 namesize
  5. option属性 valuediabledselected(默认选项)

    1
    2
    3
    4
    5
    6
    <select name="xueli">
    <option value="boshi">博士</option>
    <option value="shuoshi">硕士</option>
    <option value="ben">本科</option>
    <option value="zhuan">专科</option>
    </select>
  6. textarea属性 rows(高度)、cols(宽度)

    1
    2
    3
    4
    5
    6
    <tr>
    <td>自我介绍</td>
    <td>
    <textarea name="text" cols="30" rows="10"></textarea>
    </td>
    </tr>
  7. label

    1
    2
    3
    4
    5
    <tr>
    <td><label for="pwd" >密码</label></td>
    <!-- 点击密码光标移动到后面的文本框 -->
    <td><input type="password" id="pwd" name="pwd"></td>
    </tr>
-------------本文结束感谢您的阅读-------------