我的第一篇笔记（基本语法学习上篇）

前言

在加入训练营之前，我大概对计算机的方向大致有所了解，基本可以分为前端、后端，产品、安卓和IOS等，听说前端跟设计网页有关，我便对此产生了兴趣。通过前几节课的学习，我对前端有了更多的了解，HTML是用来构建网页的整体框架，CSS负责各个模块的样式，JS负责前后端的交互，他们三者之间有着强烈的联系。
本篇笔记将展示我所学的HTML语法知识的一部分。

所学基础知识

认识WEB

网页主要是由文字、图像和超链接等元素构成，当然除了这些元素，网页中还可以包括音频、视频以及Flash等。

浏览器是网页显示、运行的平台。

HTML初识

「HTML」(Hyper Text Markup Language): 超文本标记语言
所谓超文本，有2层含义：
1. 它可以加入图片、声音、动画、多媒体等内容（超越文本限制）
2. 它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。

HTML骨架格式

<!-- 页面中最大的标签 根标签 -->
<html>
    <!-- 头部标签 -->
    <head>     
        <!-- 标题标签 -->
        <title></title> 
    </head>
    <!-- 文档的主体 -->
    <body>
    </body>
</html>

HTML常用标签

排版标签

主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。

标题标签h(h1~h6)
段落标签<p></p>,可以把 HTML 文档分割为若干段落
- 文本在一个段落中会根据浏览器窗口大小自动换行
- 段落和段落之间有空格
换行标签<br />
- break
- <br />是个单标签
- <br />标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。
div和span标签:是没有语义的,是我们网页布局最主要的2个盒子。
- div是division缩写，表示分割，分区。span意为跨度、跨距。
- <div>标签用来布局，但是一行只能放一个<div>。（会自动换行）。大盒子
- <span>标签用来布局，一行可以多个<span>。小盒子
b和strong 文字以粗体显示
i和em 文字以斜体显示
s和del 文字以加删除线显示
u和ins 文字以加下划线显示

标签属性(行内式)

属性	属性值	描述
`src`	URL	图像的路径
alt	文本	图像不能显示时的替换文本
title	文本	鼠标悬停时显示的内容
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	数字	设置图像边框的宽度

宽度和高度一般只修改一个，另外一个自动。

注意：

标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
采取键值对的格式 key=“value” 的格式

路径

相对路径：图片相对于HTML页面的位置
绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。\

超链接标签

超链接语法格式

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
target="_self"  默认窗口弹出方式
target="_blank" 新窗口弹出

链接分类

外部链接 例如<a href="http://www.qq.com" target="_blank">腾讯</a>
内部链接 .网站内部之间的相互链接，直接链接内部页面名称即可。例如<a href="index.html">首页</a>

<h4>内部链接：网站内部页面之间的相互链接</h4>
<a href="inner.html" target="_blank">内部链接</a>

空链接 如果当时没有确定链接目标时，<a herf="#">首页</a>
下载链接 如果href里面地址是一个文件或者压缩包，会下载这个文件。
网页元素链接 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接如：给图片添加超链接

<h4>网页元素链接</h4><a href="http://www.baidu.com"><img src="img.jpg" /></a>

锚点链接 点击链接可以快速定位到页面中的某个位置 (1) 在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第2集</a> (2) 找到目标位置标签，里面添加一个id属性=刚才的名字，如<h3 id="two">第2集介绍</h3>

使用<a href="#id名">链接文本</a>创建链接文本（被点击的）   <a href="#two">  2. 使用相应的id名标注跳转目标的位置。 (目标位置)  <h3 id="two">第2集</h3>

我的第一篇笔记 | 青训营