HTML学习（1）

我的个人博客欢迎大家来逛逛：我的博客

HTML初识

HTML全称是：Hyper Text Markup Language

HTML不是一种编程语言，而是一种标记语言，使用标记标签来描述网页。

HTML标签是由<>包围起来的关键词，并且通常是成对出现的，例如<p> </p>，被称为开始标签（开放标签）和结束标签（闭合标签）

HTML文档就等同于网页，因为HTML文档包含HTML标签和纯文本，HTML文档也被称之为标签。浏览器会使用标签来解释网页的内容。

第一个HTML程序

<h1>我的第一个标题</h1>
<p>我的第一个段落</p>

<h1>我的第一个标题</h1>
<p>我的第一个段落</p>

HTML标题：使用 <h1> ..... <h6> 等作为不同的等级

<html>
    <body>
        <h1>一级标题</h1>
        <h2>二级标题</h2>
        <h3>三级标题</h3>
    </body>
</html>

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>

HTML段落：使用<p>标签进行定义

<html>
    <body>
        <p>段落</p>
    </body>
</html>

段落

HTML链接：使用<a href="xxxx">来表示，href表示链接的地址

<html>
    <body>
        <a href="https://helloylh.com">这是我的博客</a>
    </body>
</html>

这是我的博客

HTML显示图像：使用<img src="xxx" width="xx" height="xxx">来显示

<img src="https://cdnjson.com/images/2023/04/01/touxiang.md.png" width="480" height="640">

HTML元素

指的是开始标签和结束标签之间的内容。

<p>元素：元素的内容是：这是一个段落

<p>这是一个段落</p>

<body>元素：定义了html文档的主体，元素的内容是另一个HTML标签

<body>
    <p>这是一个段落</p>
</body>

<html>元素：定义了整个html文档。

<html>
    <body>
        <p>这是一个段落</p>
    </body>
</html>

省略结束标签虽然可以但是不要这么做

标签尽量使用小写。

HTML属性

属性为元素提供附加信息，属性总是在开始标签中定义。

href就是在<p>中指定的一个属性

<a href="helloylh.com"> This is My Blog.</a>

This is My Blog.

align属性：为标题设置对齐方式

<h1 align="center">主标题</h1>

主标题

bgcolor属性：在<body>中指定，设置网页的背景颜色

<body bgcolor="yellow">
    <h1 align="center">主标题</h1>
</body>

<h1 align="center" color="yellow">主标题</h1>

</body>

属性值应该始终被包括在引号内，单引号和双引号都可以。

HTML参考手册

HTML标题

HTML有六种不同的标题，分别对应<h1> 到 <h6>

HTML水平线：<hr />

<h1 align="center">主标题</h1>
<hr />
<p> 段落 </p>
<hr /> 
<p> 段落 </p>

主标题

段落

HTML注释：<后面紧跟一个 ! 号

<!-- 这是一句注释 -->

HTML段落

如果你想要插入一个空行：这是一个空的html元素，因此没有结束标签

<br />

在不产生新段落的情况下换行：

<p>我在<br>不产生<br>新段落的条件下<br>换行了</p>

不要用没有结束标签的HTML元素，因此要使用<br /> 而不是<br >

HTML样式

style属性：提供了一种可以改变所有HTML元素样式的通用方法。

使用样式替代我们刚才的center align bgcolor等标签或者属性（废弃）

设置背景颜色：background-color

<body style="background-color:blanchedalmond;">
    
<h1 style="background-color: aqua;">这是一个主标题</h1>
<hr />
<p style="background-color: aquamarine;"> 段落 </p>

设置字体颜色和尺寸：

<p style="font-family:sans-serif;color: brown;font-size:50;">啦啦啦这是一句话，测试字体颜色和尺寸</p>

文本对齐：

<h1 style="background-color: aqua;text-align: center;" >这是一个主标题</h1>

格式化标签

参考文档

文本格式化

<b>定义粗体文本<br/></b>
<big>定义大号字体<br/></big>
<em>着重字<br/></em>
<i>斜体字<br/></i>
<strong>加重语气<br/></strong>
这是<sub>下标字<br/></sub>
这是<sup>上标字<br/></sup>
<del>这是删除字<br/></del>
<u>下划线<br></u>

定义粗体文本

定义大号字体

着重字

斜体字

加重语气

这是_下标字
这是^上标字
~~这是删除字~~

下划线

引用等：

<abbr title="我是沙雕">我的名字</abbr><br>
<address>
    我的网站是<a href="https://helloylh.com"><br>欢迎大家来逛逛</a><br>
    尽情期待吧
</address><br>
<blockquote>这是长的引用</blockquote>
<q>这是短引用</q>
<dfn>定义项目</dfn>

我的名字

我的网站是
欢迎大家来逛逛
尽情期待吧

这是长的引用

这是短引用定义项目

输出等标签:：

<pre>预格式文本    保留了空行和换行 
      6666
</pre>

<p>很适合用来显示代码</p><br>

<pre>for (int i=1;i<=100;i++){
                sum+=i;
      }</pre><br>

预格式文本    保留了空行和换行 
      6666

很适合用来显示代码

for (int i=1;i<=100;i++){
                sum+=i;
      }

计算机编程代码：

<code>Computer code</code>
<br />
<kbd>Keyboard input</kbd>
<br />
<tt>Teletype text</tt>
<br />
<samp>Sample text</samp>
<br />
<var>Computer variable</var>
<br />

HTML引用

短引用：<q>

<html>
    <body>
        <p> 
            我们的目标是：<q>构建和谐社会，构建人类命运共同体。</q>
        </p>
    </body>
</html>

我们的目标是：构建和谐社会，构建人类命运共同体。

长引用：<blockquote>

<html>
    <body>
        <p>我想说的是：</p>
        <blockquote cite="https://helloylh.com">
            我的网站啊啊啊啊，快点来访问我的网站！ 啊啊啊啊
        </blockquote>
    </body>
</html>

我想说的是：

我的网站啊啊啊啊，快点来访问我的网站！啊啊啊啊

使用缩略词：<abbr>


<html>
    <body>
        <p><abbr title="Ylh's Blog" >www</abbr></p> 
    </body>
</html>

用于定义的引用：<dfn>

<html>
    <body>
        <p><dfn title="Ylh's Blog">这是我的网站</dfn> 成立于2023年3月</p>
        <p><dfn><abbr title="Ylh's Blog">这是我的网站</abbr></dfn> 成立于2023年3月</p>
        <p><dfn>这是我的网站</dfn> 成立于2023年3月</p>
    </body>
</html>

用于显示地址：<address>

<html>
    <body>
        <p><dfn>这是我的网站</dfn> 成立于2023年3月</p>
    </body>
</html>

用于著作标题：<cite>

<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

用于双向重写：<bdo>


<html>
    <body>
        <bdo dir="ltr">从左往右写</bdo><br>
        <bdo dir="rtl">从右往左写</bdo>
    </body>
</html>

HTML注释

<html>
    <body>
        <!-- 下面是一段注释 -->
        <bdo dir="ltr">从左往右写</bdo><br>
        <bdo dir="rtl">从右往左写</bdo>
        <!-- 注释终止了 -->
    </body>
</html>

条件注释等

一个锚的提示功能（看下文）

HTML+CSS

在html中定义样式表

外部样式表：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内部样式表：


<html>
    <head>
        <style>
            body{background-color: aqua}
            p{margin-left: 20px}
        </style>
    </head>
    <!-- 为下面的body及p标签定义了属性 -->
    <body>
        <p>
            <!-- 下面是一段注释 -->
            <bdo dir="ltr">从左往右写</bdo><br>
            <bdo dir="rtl">从右往左写</bdo>
            <!-- 注释终止了 -->
        </p>
    </body>
</html>

内联样式

HTML链接

使用<a href="url"> 即可访问指定的url链接

<a href="https://helloylh.com" >在此标签页访问我</a><br>
<a href="https://helloylh.com" target="_blank">点击这里在外部外部标签页访问我</a>

设置target属性可以控制行为

命名锚：name属性可以规定锚的名称，这相当于一个书签，当我们定义了一个锚后，在之后我们可以直接跳转到这个锚点。

点击可以看到效果：

有用的提示

<a href="https://helloylh.com" name="label">显示在页面上的文字</a><br> 
<a href="https://helloylh.com" >在此标签页访问我</a><br>
<a href="https://helloylh.com" target="_blank">点击这里在外部外部标签页访问我</a><br>
<a href="#label">跳转过去</a><br> <!-- 跳转到label点-->

HTML图片

使用<img>标签来指定src图片的url链接

<img src="https://cdnjson.com/images/2023/04/01/avatar9acfc8232ac99d15.jpg">

使用alt来替换文本的属性

当图片无法显示的时候，会显示指定的文本

 <img src="https://cdnjson.com/images/2023/04/01/avatar9acfc8232ac99d15.jpg" alt="这是一只狗">

嵌套将图片作为超链接

<a href="https://www.google.com/"><img src="https://cdnjson.com/images/2023/04/01/avatar9acfc8232ac99d15.jpg" alt="世界尽头"></a>

HTML表格

<table> 表示接下来是一个表格；<tr>表示每一行；<td>表示分割成的每一列

添加<border>属性来表示表格是否含有边框

使用<th>来表示列表的表头

<table border="1">
    <tr>
    	<th>Heading 1</th>
        <th>Heading 2</th>
    </tr>
    <tr>
        <td>row 1,col 1</td>
        <td>row 1,col 2</td>
    </tr>
    <tr>
        <td>row 2,col 1</td>
        <td>row 2,col 2</td>
    </tr>
</table>

Heading 1	Heading 2
row 1,col 1	row 1,col 2
row 2,col 1	row 2,col 2

HTML列表

无序列表

<ul>用来指定无序列表，<li>用来指定列表的每一项

<ul>
    <li>Coffee</li>
    <li>Cola</li>
    <li>Milk</li>
</ul>

Coffee
Cola
Milk

有序列表

<ol>用来创建有序列表

<ol>
    <li>Coffee</li>
    <li>Cola</li>
    <li>Milk</li>
</ol>

Coffee
Cola
Milk

自定义列表项

<dl>指定自定义列表项的开始；<dt>表示每一个列表项；<dd>表示每一个列表项的定义

 <dl>
     <dt>Coffee</dt>
     <dd>Black hot drink</dd>
     <dt>Milk</dt>
     <dd>White cold drink</dd>
</dl>

Coffee: Black hot drink
Milk: White cold drink

HTML块

HTML的元素分为块元素和内联元素。

块元素可以自动换行，内联元素不会自动换行

设置块元素：

<div style="background-color: green">
  	<ul>
        <li>111111</li>
        <li>222222</li>
        <li>333333</li>
    </ul>
    <ol>
    	<li>111111</li>
        <li>222222</li>
        <li>333333</li>
    </ol>
</div>

111111
222222
333333

111111
222222
333333

设置内联元素：<span>

posted @ 2023-04-12 12:57 hugeYlh 阅读(23) 评论(0) 编辑收藏举报

helloylh