HTML基本标签1

1.H5课程

HTML+CSS

JavaScript

nodeJS

Vue

H5新特性

微信开发

2.技术点

HTML

  • 定义页面结构

CSS

  • 定义页面样式

JavaScript

  • 定义页面逻辑

3.准备

编辑器

  • sublime
  • notepad++
  • vim
  • atom
  • dreamweaver
  • webstrom(集成环境)

浏览器

  • 主流浏览器
    • chrome 内核 webkit
    • Safari 内核 webkit
    • firfox 内核 Trident
  • 壳浏览器
    • Opera google 内核
    • 360安全 双核 google 内核/IE
    • 360极速 双核 google/IE
    • UC
    • 猎豹
    • QQ
    • 百度浏览器
    • 淘宝浏览器

字符集编码

  • ASCII码
  • 汉字编码
    • GB2312
    • GBK
  • 国际通用编码
    • UTF-8

计算机存储单位

  • 字节B（Byte）
  • 位（比特）b(bit)

4.关于HTML

什么是HTML

  • 超文本标记语言

5.HTML基本语法

HTML标签

  • 单标签 <标签名>或</标签名>
  • 双标签 <标签名>内容</标签名>
  • 也叫元素

属性

  • 属性属于标签
  • 一个标签可以有多个属性 ，每个属性有不同的意义
  • 属性值最好写在双引号中

代码规范

  • 缩进 Tab或4个空格

注释

  • <!-- 注释内容 -->

6.HTML主体结构标签

文档说明

  • <!DOCTYPE HTML>

html标签

  • <html></html>

head标签

  • <heade></head>
  • 里面会包含诸如页面标题。搜索引擎信息等相关的标签

body标签

  • <body></body>
  • 页面的主体内容
  • 属性
    • background
    • bgcolor
    • text
    • link 超链接默认颜色
    • vlink 点击过后的颜色
    • alink 正在点击的颜色

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>跳转</title>
</head>
<body bgcolor="#aaffaa" text="white" link="green" alink="white" vlink="orange">
	<h1>小同志，不错啊！</h1>
	<hr>
	<a href="http://unclealan.cn">博客</a>
</body>
</html>

7.head头部标签

标签

  • <title></title> 定义标题
  • <meta/>
  • <link href=""></link>

meta功能

  • 定义字符集编码

    • <meta charset="utf-8">
    • <meta http-equiv="content-type" content="text/html;charset=utf-8">

  • 刷新或跳转

    • <meta http-equiv="refresh" content="3">
    • <meta http-equiv="refresh" content="3;url=http://unclealan.cn">

  • 设置关键字

    • <meta name="keywords" content="每个字用英文，隔开">

  • 设置页面描述

    • <meta name="description" content="80字之内一段话">

定义网站标题图标

  • <link rel="shortcut icon" href="图片地址.ico">

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
	<title>同志交友</title>
	<!-- 设置字符集 -->
	<meta charset="UTF-8">
	<!-- <meta http-equiv="content-type" content="text/html; charset=utf-8"> -->

	<!-- 刷新页面 -->
	<!-- <meta http-equiv="refresh" content="3"> -->
	<!-- <meta http-equiv="refresh" content="3;url=http://unclealan.cn"> -->

	<!-- 网页关键字 -->
	<meta name="keywords" content="同志，交友，互动，出游，约会">

	<!-- 描述 -->
	<meta name="description" content="全国最后最大最丰富的同志交友网站">

	<!-- 定义网站标题 图标 -->
	<link rel="shortcut icon" href="img\Penguins.ico">
</head>
<body>
	<h1>header标签内容</h1>
	<hr>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga qui, ullam aspernatur sequi! Iure magnam adipisci quidem optio nulla nemo nesciunt voluptate! Similique culpa modi eos, id iste deleniti, alias!</p>
</body>
</html>

8.格式排版标签

换行标签 br

  • <br /> 这是个单标签

分割线 hr

  • <hr /> 这是个单标签
  • 语义：段落与段落之间的分割
  • 属性
    • width
    • size
    • align
    • noshade

段落标签 p

  • <p></p>
  • 语义：表示段落
  • 属性
    • align:left/right/center

原样输出标签 pre

  • <pre></pre>
  • 语义：需要原格式输出 显示代码

标题标签 hn

  • <h1>一级标题</h1>
  • <h2>二级标题</h2>
  • <h3>三级标题</h3>
  • <h4>四级标题</h4>
  • <h5>五级标题</h5>
  • <h6>六级标题</h6>

居住标签 center

  • <center></center>
  • 不建议使用
posted @ 2017-07-21 22:20  blue星期天  阅读(625)  评论(0)  编辑  收藏  举报