wb前端（第一天）

HTML

作用： 负责搭建页面结构和内容

HyperTextMarkupLanguage：超文本标记语言

超文本： 指不仅仅是纯文本，还包括字体和多媒体（图片，音频，视频）

标记语言：

<开始标签   属性=“xxx”>标签体</结束标签>

常见的文本标签

内容标题：<h1>-<h6>

特点： 独占一行， 字体加粗， 自带上下间距\n

水平分割线：<hr>

段落标签：<p> 特点： 独占一行，自带上下间距

换行： br

加粗：b

斜体：i

下划线：u

删除线：s

布局标签

布局标签

div       块级标签（区域块布局）

span     行内标签（普通文本布局）

列表标签

1. 无序列表
# 前面没有用于表示数字顺序的提示
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>

type属性：
disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）

2.有序列表
<ol>
<li>111</li>
<li>222</li>
<li>333</li>
</ol>

type属性：
1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马

3. 标题列表
<dl>
<dt>标题1</dt>
  <dd>内容1</dd>
<dt>标题2</dt>
  <dd>内容1</dd>
  <dd>内容2</dd>
</dl>
 

图片标签img

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

src：资源路径

相对路径：访问站内资源使用

图片和页面在同级目录： 直接写图片名

图片在页面的上级目录： ../图片名

图片在页面的下级目录： 文件夹名/图片名

绝对路径： 访问站外资源使用, 称为图片盗链,存在找不到图片的风险\n

alt： 当图片不能正常显示时显示的文本

title: 鼠标在图片上悬停时显示的文本

width/height:设置图片的宽高, 两种赋值方式: 1. 像素 2. 百分比 如果只设置宽度高度会等比例缩放

超链接a

href: 资源路径作用类似图片标签的src

a标签包裹文本为文本超链接, 包裹图片为图片超链接

页面内部跳转, 在目的地元素里面添加id属性, 然后通过超链接href=\"#id\"的方式跳转到目的地元素的位置

a标签：链接标签

用法1: 通过href属性指定网址点击跳转

跳转过程中有两种方式

1. 当前页面跳转target="_self"    默认

2. 新建页面跳转target="_blank"

<a href="http://www.taobao.com" target="_blank" >点我<a>\n

用法2：锚点功能

通过href属性指定标签的id值点击即可跳转到对应位置

绝对网址 ---指向另一个站点（比如 href="http://www.jd.com"）

相对网址--- 指当前站点中确切的路径（href="index.html"）

锚网址 --- 指向页面中的锚（href="#top"）
 

特殊符号

&nbsp; 空格
&gt; 大于号
&lt; 小于号
&amp; &符号
&yen; 羊角符
&copy; 版权符
&reg; 注册