幕客前端基础入门-html基础

1.html基本结构

<!DOCTYPE HTML><!-- !DOCTYPE声明必须放在html文档第一行，但!DOCTYPE声明不是html标签 -->
<html>
<head></head>
<body>
</body>
</html>

2 标签

语法：<标签名></标签名>
如：

<html></html>
规范：
*      1.标签使用 < 和 > 括起来
*      2.成对出现，开始标签和结束标签，结束标签比开始标签多个/
*      3.单标签：没有结束标签<hr/> <br/>

3 网页编码设置

当网页显示出现乱码时，在head标签里添加

<head>
	<meta charset="utf-8"><!-- 注意：常用utf-8、GB2312、gbk等编码 -->
</head>

4 文字和段落标签

标题标签: <h1></h1>~<h6></h6>
段落标签: <p></p>
文字斜体:<i></i>, <em></em>
加粗: <b></b>, <strong></strong>
下标: <sub></sub>
上标: <sup></sup>

align对齐属性值：

值	描述
left	左对齐
right	右对齐
center	居中对齐
justify	对行进行伸展，这样每行都可以有相等的长度

5 特殊符号

小于号：&lt;
大于号：&gt;
已注册：&reg;
版权：&copy;
商标：&trade;
空白：&nbsp;

6 列表标签

无序列表

<ul type="square">
      <li>列表项</li>
      <li>列表项</li>
</ul>
使用type设置属性样式：
*      disc：默认，圆点
*      square：方块
*      circle：空心圆

有序列表

<ol type="a">
      <li>列表项</li>
      <li>列表项</li>
</ol>
使用type设置列表样式：
*      1：数字1，2
*      a：小写字母a，b
*      A：大写字母A，B
*      i：小写罗马数字i
*      I：大写罗马数字I

定义列表：可用于描述图片+描述

<dl>
      <dt>定义列表项，可以是图片</dt>
      <dd>列表项描述</dd>
      <dd>列表项描述</dd>
      <dt>定义列表项</dt>
      <dd>列表项描述</dd>
</dl>

7 图像标签

<img src-="" alt="" />

属性	值	描述
src	url	图像地址
alt	文字	图像替代文本
height	数字和百分比	图像的高
width	数字和百分比	图像的宽

使用数字，图片固定尺寸；使用百分比，图片随当前窗口进行缩放

8 超链接

<a href="" >内容</a>

属性	描述
href	链接地址，#表示空链接，""点击后会刷新页面
target	链接的目标窗口_self、_blank、 _top、 _parent
title	链接提示文字。当图像不能展示时，就展示该段文字
name	锚，实现同一页面不同位置的跳转

8.1 锚

定义锚（同一页面）
<a href="#锚1">点击这里，跳转到内容1</a>
<a href="..." name="锚1">内容1</a>

定义锚（不同页面）
网页1:<a href="网页2#锚1" >点击这里，跳转到网页2的内容1处</a>
网页2:<a href="..." name="锚1">内容1</a>

8.2 邮件发送

如想成功打开邮箱，需要在电脑上已安装邮箱软件。

<a href="mailto:邮件地址">内容反馈</a>

8.3 文件下载

<a href="下载文件的地址">下载链接</a>