• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏一起装逼吧

HTML从0开始

html 17装逼 10个月前 (04-08) 419次浏览 已收录 0个评论 扫描二维码

HTML 教程

HTML简介

  • HTML 是用来描述网页的一种语言。
  • HTML 指的是超文本标记语言 (Hyper Text
    Markup Language)
  • HTML 使用标记标签来描述网页
  • HTML文件的扩展名为.html 或 .htm

编辑工具

  • Sublime
  • Hbuilder
  • Webstorm
  • ……….

文档结构

  • 一个HTML网页由两部分组成 – head头部部分和body主体部分:
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8”>
<title>这是文档的标题</title>
</head>
<body>
<!– 这是文档的内容 –>
</body>
</html>

HTML从0开始

基本语法

  • <标记名>最简单的网页</标记名>
    • <title>我的第一个页面</title>
  • <标记名 属性名=“ 属性值”>文本</标记名>
    • <body bgcolor=“red”>背景红色</body>
  • <标记名>
    我想学做网页<br>是呀!我也想学!
  • <html>…</html>:网页内容以<html>开始</html>
  • <head>…</head>(网页头部)
    • <title>…<title>标记 网页标题
    • <link>标记
      <link href=“style.css” rel=“stylesheet” type=“text/css”>
      用于载入外部CSS文件 html01_05HTML基本语法
  • <meta>标记 描述文档类型、字符编码和搜索关键字
    • <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    • 提供搜索关键字:<meta name= "keywords" content= "淘宝,网上购物,在线交易,交易市场" />
    • 内容描述信息,方便搜索引擎的搜索:<meta name= "description" content= "淘宝网-亚洲最大、最安全的网上交易平台,提供各类服饰、美容、家居、数码、 ……" />
  • <script>…<script> 标记
    • <script src=“abc.js”></script> 当前网页载入一个 abc.js文件
  • <style>…<style>标记 在此标记之间定义本网页的CSS样式HTML基本语法
  • …标记
    1. 它定义了网页上显示的主要内容与显示格式,是整个网页的
      核心,网页中要真正现实的内容都包含在本标记中。
  1. <body>有很多属性,这些属性用于设定网页的总体风格,
    可以定义页面的背景图像、背景颜色、文字颜色、超文本链接
    的颜色。HTML基本语法

标签(标记)

注释标记

  • 格式:<!– 注释内容-->
  • 注释为文中的不同部分加上说明,以方便日后阅读和修改,
  • 注释内容不显示在页面上。

标题标签

  • h1, h2 … h6是标题标签, 其中:
  • h1是大标题, 一个页面一般只有一个h1;
  • h2常用来表示副标题.

    水平线标签 <hr />

  • <hr />为单个标签的闭合形式
  • 横线用于内容分割
  • 通过 size 和 width 属性设置水平线的尺寸:
    • <hr size="1" width="100px"/>
    • <hr size="2" width="100"/>
    • <hr size="4" width="50%"/>
    • 效果图:HTML从0开始

      html中的数值单位:

  • px (默认就是px) 具体数值
  • % 就是百分比 表示的是父元素的百分比

文本格式化标签_标签描述 (不推荐使用)

| 标签名        | 标签描述        |  预览     |
| ------------- |:-------------:|-----------|
|    `<b>`      | 定义粗体文本 |<b>我是b标签</b>|
|`<big>`      | 定义大号字      |<big>我是big标签</big>|
| `<em>` | 定义着重文字      |<em>我是em标签</em>|
| `<i>` | 定义斜体字      |<i>我是i标签</i>|
| `<small>` | 定义小号字      |<small>我是small标签</small>|
| `<strong>` | 定义加重语气      |<strong>我是strong标签</strong>|
| `<sub>` | 定义下标字      |你好<sub>我是sub标签</sub>|
| `<sup>` | 定义上标字      |你好<sup>我是sup标签</sup>|
| `<ins>` | 定义插入字      |<ins>我是ins标签</ins>|
| `<del>` | 定义删除字      |<del>我是del标签</del>|

有序列表 <ol></ol>

  • HTML从0开始
  • 通过<ol>标签的 start 属性, 可以设置列表的起始值
  • 通过<ol>标签的 type 属性, 可以设置列表中使用的标记类型 有5个值: 1 – 数字; A – 大写母; a – 小写字母; I – 大写罗马数字; i – 小写罗马数字;
    • 效果图:
      HTML从0开始

      无序列表 <ul></ul>

  • HTML从0开始
  • type 属性, 可以设置列表中使用的标记类型
    • disc 默认值。实心圆。
    • circle 空心圆。
    • square 实心方块。

      定义描述标签 dl dt dd

  • dt 标题
  • dd 描述
  • HTML从0开始
  • HTML从0开始

表格标签 <table></table>

  • <table>标签用来定义表格, 常用属性:
    • border: 表格的边框;
    • width: 表格的宽度;
    • cellpadding: 单元边沿与内容的间距;
    • cellspacing: 单元格之间的空白;
  • <caption>标签用来定义表格标题:
    • caption 必须紧随 table 之后, 一个表格只能有一个标题.
  • <td><th>具有两个重要属性, 可以用来合并单元格:
    • colspan: 横向合并单元格;
    • rowspan: 纵向合并单元格;
    • 演示:HTML从0开始

分区标签<div></div>

  • div标签其实就是一个划分逻辑区域的标签,常用作容器,常用来包含文字.图片等.

图片标签HTML从0开始

  • HTML从0开始 是图像标签, 它是自闭和标签.
    • src属性(必须): 图片的位置;
    • alt属性(必须): 图片显示不出来时的替代文本.
    • title属性: 鼠标滑过图片时显示的文字提示.

      范围标签<span> :显示某行内的独特样式

      超链接 <a href="http://www.baidu.com" > 百度 <a/>

  • 语法:
    • <a href="链接地址" >链接热点文本或图像</a>
  • target属性:
    • _blank:在新窗口打开被链接的文档
    • _self:在相同的框架中打开被连接的文档
    • _parent:在父框架集中打开被连接的文档
    • _top:在整个窗口中被打开链接的文档
    • framename: 在指定的框架中打开被连接的文档
  • 锚链接 <a><a/>
    • 定义一个锚点标记 给一个元素设置一个id
    • a标签的href里面写上#锚点标记

      特殊符号(字符实体)

  • 空格:&nbsp;
  • 大于(>):&gt;
  • 小于(<): &lt;
  • 引号(” ):&quot;

    表单

  • 标签代表表单, 它用于向服务器传输数据, 例如搜索框就是一个典型的表单:
  • 常用属性:
    • name: 用于定义表单的名称;
    • action: 一个URL, 定义提交表单时向何处发送数据;
    • method: 定义发送表单数据时的HTTP方法(get/post);
      • POST和GET的区别:
        • get只能提交少量数据; post可以携带大量数据;
        • get提交时数据会在地址栏显示, 安全性差; post方式更加安全;
  • 表单元素的中可以包含各种不同的元素:HTML从0开始
  • 表单元素的基本格式 :
    • 语法:
      • <input name="表单元素名称" type="类型" value="值" size="显示宽度" maxlength="对大长度" checked="是否选中" />
      • name:控件的名称
      • type:控件类型
      • value:控件的初始值
      • size:控件的初始宽度
      • maxlength:控件的最大长度
      • checked:控件是否被选中
  • type类型,作用:HTML从0开始

框架的两类用途:

  • 显示多窗口页面—使用框架集
    • 语法:
      `<frameset cols="25%,50%,*" rows ="50%,*" border="5">`
        `<frame src="../example/a.html ">`
      
       `</frameset>`
      
    • cols :% 作用 :定义框架集中列的数目和尺寸
    • rows :% 作用:定义框架集中行的数目和尺寸
    • src : 引用各窗口要显示的网页文件
  • 页面复用—使用<iframe/>内嵌框架
  • <iframe>语法: <iframe src="../example/b.html" width="200" height="200"></iframe>
  • 实例:<iframe src="http://www.taobao.com" width="100%" height="500"></iframe>

17装逼 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:HTML从0开始
喜欢 (1)
[小鸟依家]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址