HTML学习(1)

文章目录

    • HTML初识
    • 第一个HTML程序
    • HTML元素
    • HTML属性
    • HTML标题
    • HTML段落
    • HTML样式
    • 格式化标签
    • HTML引用
    • HTML注释
    • HTML+CSS
    • HTML链接
    • HTML图片
    • HTML表格
    • HTML列表
    • HTML块

我的个人博客:欢迎来逛逛

HTML初识

HTML全称是:Hyper Text Markup Language

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

HTML标签是由<>包围起来的关键词,并且通常是成对出现的,例如

,被称为开始标签(开放标签)和结束标签(闭合标签)

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


第一个HTML程序

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

我的第一个标题

我的第一个段落

HTML标题:使用

等作为不同的等级

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

一级标题

二级标题

三级标题

HTML段落:使用

标签进行定义

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

段落

HTML链接:使用来表示,href表示链接的地址

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

这是我的博客


HTML显示图像:使用来显示

<img src="https://cdnjson.com/images/2023/04/01/touxiang.md.png" width="480" height="640"> 
HTML学习(1)_第1张图片

HTML元素

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

元素:元素的内容是:这是一个段落

<p>这是一个段落p>

元素:定义了html文档的主体,元素的内容是另一个HTML标签

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

元素:定义了整个html文档。

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

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

标签尽量使用小写。


HTML属性

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

href就是在

中指定的一个属性

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

This is My Blog.

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

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

主标题

bgcolor属性:在中指定,设置网页的背景颜色

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

主标题

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

HTML参考手册


HTML标题

HTML有六种不同的标题,分别对应

HTML水平线:


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

主标题


段落


段落

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


HTML段落

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

<br />

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

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

不要用没有结束标签的HTML元素,因此要使用
而不是


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 codecode>
<br />
<kbd>Keyboard inputkbd>
<br />
<tt>Teletype texttt>
<br />
<samp>Sample textsamp>
<br />
<var>Computer variablevar>
<br />

HTML引用

短引用:

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

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


长引用:

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

我想说的是:

我的网站啊啊啊啊,快点来访问我的网站! 啊啊啊啊

使用缩略词


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

用于定义的引用:

<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>

用于显示地址

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

用于著作标题

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

用于双向重写:


<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>
            
            <bdo dir="ltr">从左往右写bdo><br>
            <bdo dir="rtl">从右往左写bdo>
            
        p>
    body>
html>

内联样式


HTML链接

使用 即可访问指定的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> 

HTML图片

使用标签来指定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学习(1)_第2张图片


HTML表格

表示接下来是一个表格;表示每一行;
表示分割成的每一列

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

使用

来表示列表的表头

<table border="1">
    <tr>
    	<th>Heading 1th>
        <th>Heading 2th>
    tr>
    <tr>
        <td>row 1,col 1td>
        <td>row 1,col 2td>
    tr>
    <tr>
        <td>row 2,col 1td>
        <td>row 2,col 2td>
    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>Coffeeli>
        <li>Colali>
        <li>Milkli>
    ul>
    
    • Coffee
    • Cola
    • Milk

    有序列表

      用来创建有序列表

      <ol>
          <li>Coffeeli>
          <li>Colali>
          <li>Milkli>
      ol>
      
      1. Coffee
      2. Cola
      3. Milk

      自定义列表项

      指定自定义列表项的开始;
      表示每一个列表项;
      表示每一个列表项的定义

       <dl>
           <dt>Coffeedt>
           <dd>Black hot drinkdd>
           <dt>Milkdt>
           <dd>White cold drinkdd>
      dl>
      
      Coffee
      Black hot drink
      Milk
      White cold drink

      HTML块

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

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

      设置块元素

      <div style="background-color: green">
        	<ul>
              <li>111111li>
              <li>222222li>
              <li>333333li>
          ul>
          <ol>
          	<li>111111li>
              <li>222222li>
              <li>333333li>
          ol>
      div>
      
      • 111111
      • 222222
      • 333333
      1. 111111
      2. 222222
      3. 333333

      设置内联元素

      你可能感兴趣的:(HTML,前端,html,学习,css)