缘灬小太阳
缘灬小太阳

Html基础之个人学习笔记1

一.HTML简介

  • hyper text markup language 超文本标记语言
  • 超文本:：表示能够在页面上展示的内容不仅仅包含文本，还包含图片、视频、音频等。
  • 标记：页面上显示内容需要以<标记>格式来展现。
  • 语言：与计算机交互的方式。
  • HTML标签：页面内容主体。
  • CSS样式：让页面内容变得美观（形状、颜色、大小等）
  • JavaScript语言：让页面内容动态变化。

二. HTML的基本结构

  • html：整个文档
  • head：头部标签，用来设置当前页面
  • body：身体标签，页面上展示的内容


<htML>
	<head>
		<meta charset="utf-8"/>
		<title>我的第一个页面title>
	head>


	<body>
		你好，HTML，我来了！！！
	body>
html>

三. HTML的基本标签

3.1 注释

  • 指在页面上编写的一些说明文字，不会真正的显示在页面上。
  • 作用是方便程序员理解代码的含义。
  • 语法：

3.2 块级标签

  • 块级标签特点是每一个标签都会独占一行。
3.2.1 P标签
  • 段落标签。让标签中的内容自成一段。
  • 语法：

    文字内容

  • 可以使用align属性来设置对齐方式：left（左对齐，默认值），right（右对齐），center（居中对齐）
  • 换行标签，使文字换行（该标签没有标签中间的内容，所以直接开始就结束，称为自结束标签）
  • **注意 **：换行与段落的区别：段落会与前后的文字都隔一行。
<h2 align="center">静夜思h2>
<p align="center">
    床前明月光，<br/>
    疑是地上霜。<br/>
    举头望明月，<br/>
    低头思故乡。
p>
3.2.2 标题标签
  • 在页面上显示标题内容，会自动设置字体大小，加粗加黑。
  • 分为6级，分别是h1-----h6
  • 语法：一级标题：

    文字内容

<h1>我是一级标题h1><h1>我还是一级标题h1>
<h2>我是二级标题h2><h3>我是三级标题h3>
<h4>我是四级标题h4><h5>我是五级标题h5><h6>我是六级标题h6>
3.2.3 水平线标签
  • 是指在页面上画一条横线，可以设置长度、位置、颜色、高度。
    语法：
  • color：颜色，可以使用英文单词来表示颜色。red、green、blue。
  • 还可以使用色值来表示颜色：0-255，颜色分为3个色值：红，绿，蓝，其他颜色通过3个色值叠加调制而成。
  • 显示的时候采用16进制显示：0-ff，#ffffff。
<hr color="red" size="20" width="300px" align="right"/>
3.2.4 div标签

层标签。本身是一个容器。
用来布局使用。 独占一行。

<div align="right" style="border: 1px dashed red;">
    苹果<br />
    梨子
div>
3.2.5 列表
  • 有序列表：内容呈现会自带顺序编号。
<ol type="a">
    <li>Java
        <ul>
            <li>Springli>
            <li>Mybatisli>
        ul>
    li>
    <li>HTMLli>
    <li>Pythonli>
    <li>PHPli>
ol>
  • 无序列表：内容只会在前面出现一个图标。
<ul type="disc">
    <li>Java
        <ul>
            <li>Springli>
            <li>Mybatisli>
        ul>
    li>
    <li>HTMLli>
    <li>Pythonli>
    <li>PHPli>
ul>

在ul在设置style样式如：style="list-style: none;"会自动清除内容前面的图标

  • 标题列表
<dl>
    <dt>手机dt>
    <dd>华为dd>
    <dd>小米dd>
    <dd>oppodd>
dl>

3.3 行级标签

允许多个标签元素放到一行。

3.3.1 br

换行标签。

3.3.2 span

与div标签的效果差不多，区别在于不会独占一行。

床前<span style="color: red;font-size: 20px;">明月span>光，<br/>
疑是地上霜。<br/>
举头望明月，<br/>
低头思故乡。
3.3.3 img
  • 用来在页面上插入图片。
  • 语法：
  • 注意宽度和高度只需要设置一个即可，会自动等比缩放，如果都设置，反而会变形。
  • src属性可以设置本地项目路径的图片还可以在网络寻找资源图片复制图片地址即可
  • title属性表示当鼠标悬浮时会显示的文字，当图片不显示时代替的文字。
<img src="img/9.jpg" width="100px" title="美女一号"/>
<img height="120px" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2225607675,1382583985&fm=26&gp=0.jpg" />
3.3.4 a
  • 超链接。作用是跳转页面。
  • 语法：链接文字
  • href的值可以是本地路径，也可以是网络路径。
  • target值为_blank时，开启新的窗口，其他的值在普通页面上与默认值一致。
  • 不仅可以使用文字来跳转，也可以使用图片来跳转。
<a href="1.html">我是本地链接a><br />
<a href="https://www.baidu.com">我是网络链接a><br />
<a href="https://www.baidu.com" target="_blank">我是打开新窗口的网络链接a><br />
<a href="https://www.baidu.com">
    <img src="img/9.jpg" width="100px" />
a>
  • 邮箱链接：href=“mailto:邮箱地址”
<a href="mailto:[email protected]">联系我们a>
  • 锚点链接：
  • 当一个页面上内容过多，需要在一个页面上进行跳转（例如：回到顶部，跳转到底部）
  • 语法：
  1. 定义锚点。
  2. 跳转链接：链接（如果只是当前页面，页面路径可以不写，直接写#锚点名称即可。）
<a name="top1">a> 
<p>sdfsdfdp>
...省略很多个p标签
<p>sdfsdfdp>
<a href="#top1">回到顶部a>
3.3.5 格式标签
  • i：斜体
  • b：加粗
  • u：下划线
  • sup：上标
  • sub：下标
示例代码:

<i>面对i><b>疾风b><u>吧u><br/>
x<sup>2sup>+y<sub>2sub>+y2
3.3.6 特殊符号
  • 在页面上，有些符号无法直接打出，可以使用特殊符号标记来实现。
  • 空格： 
  • 小于号：<
  • 大于号：>
  • 版权号：©
  • 钱币符号：¥

四、框架

frame标签
框架集：frameset，作用是将页面切割成多个部分，每个部分显示的内容不一样。
现在不推荐使用。常用的是