学习——html基础

什么是HTML

Hyper Text Markup Language (超文本标记语言)

标记又俗称标签(tag),一般格式:

<h1>h1>

标签里还可以有属性(Attribute):

<meta charset="utf-8" />

还有一些特殊非成对出现标签:

<hr /> 
<br />

HTML是由浏览器解析执行

文档的基本结

<! DOCTYPE html>    ---引用的HTML5规范
<html>
  <head>       --头部:包含标签title、meta
     <meta charset=”utf-8” />
  <title>title>
head>
	<body>     --- 主体
		--- 一般在这里写html标签
	body>
html>

meta

  1. 设置编码格式属性:charset

    <meta charset="utf-8"/>
    

    常用的编码格式有

    • gbk : 中文简体
    • gb2312: 中文简体
    • utf-8: 国际默认编码字符
    • ios-8859-1: 西欧编码
    • big5: 大五码,繁体中文。应用:台湾地区
  2. 其他meta属性

    • keywords : 关键词,一般用于标记网页的关键字,一般用于给搜索引擎检索

      <meta name="keywords" content="淘宝,网购"/>
      
    • description :描述

文本排版的常用标签

  • h1~h6 : 标题标签
  • p: 段落标签
  • hr: 水平线
  • br: 换行
  • strong: 字体加粗标签
  • em: 斜体
  • span: 无任何特殊样式的标签
  • pre: 预留格式标签

html中注释

特殊符号

  1. 空格 : 
  2. > 大于符号:>
  3. < 小于符号:<
  4. " 双引号:"
  5. © 版权符号:©

图像标签

”图片加载失败后的提示”

加载图像地址的两种方式:

1、 相对路径:

2、 绝对路径:

超级链接

<a href="链接地址" target="目标窗口">img(图像标签)|text(文字)a>

目标窗口:

_self: 当前窗口打开,默认

_blank: 新的窗口中打开

如果页面在使用frameset / frame / iframe的场景下才使用如下:

_parent: 在父级窗口中打开

_top: 在顶级窗口中打开

_自定义名称:在指定的特定窗口中打开

三种用法:

页面链接
<a href="example03.html">图片|文本a>
锚链接:
<a href="#help">a>

这里的help可以是锚标记的name也可以id

功能链接:

唤醒本地安装的某个外部程序

<a href="emailto:[email protected]">图片|文本a>

做练习:淘宝电场

div标签

div是一个容器,常用与页面的布局

标签的分类

  1. 块级元素/块级标签:
    • 如:div | p | hr | h1~h6
    • 特性:独占一行,宽度没有设置的情况下由父容器100%决定
  2. 行级元素/行级标签:
    • 如:span | strong | em |
    • 特性:多个行级元素可以同属一行,其宽度由内容决定,行级元素大部分设置宽高无效,除img。

无序列表

适用于呈现一些逻辑上有相关性的数据

<ul type="???">
	<li>li>
ul>

ul里设置type属性定义标签

  1. disc: 实心圆点
  2. circle: 空心的圆圈
  3. square: 实心的正方形

有序列表

适用于呈现一些逻辑上有相关性且有顺序的数据

<ol>
	<li>li>
ol>

设置type属性的类型

  • 1: 阿拉伯数字
  • a: 小写字母
  • A: 大写字母
  • i: 小写罗马数字
  • I: 大写的罗马数字

定义列表

适用于有主题描述的信息

<dl>
  <dt>主题dt>
  <dd>描述dd>
dl>

注意:

有序列表与无序列表可以嵌套使用,ul的下级是li,li上级是ul。

表格标签–重点

<table>    
    <! --- 表头 --
    >
        <tr>
            <th>th>
        tr>
    thead>
      <! --- 主体 -->
    <tbody>
        <tr>
            <td>td>
        tr>
    ………
    tbody>
      <! --- 表脚 -->
    <tfoot>
        <tr>
            <td>td>
        tr>
    tfoot>
table>
  • table: 表格

  • thead: 表头

  • tbody: 主体

  • tfoot: 表脚

  • tr: 行

  • td: 单元格

  • th: 单元格(一般是用于表头信息,文本信息默认加粗居中)

表格属性:

  • width: 宽度

  • height: 高度

  • border: 边框

  • borderColor: 边框颜色

  • cellpadding: 表格填充(内)

  • cellspacing: 表格的间距(外)

  • align: 水平方向

单元格属性:

  • align: 水平方向 left center right

  • valign: 垂直方向 top middle bottom

  • 合并单元格(colspan: 跨列| rowspan: 跨行)

<td  colspan="number">td>
<td  rowspan ="number">

注意:在合并后,相应单元格的行和列的数量要发生改变。

你可能感兴趣的:(学习,html,前端)