HTML基础学习

最新推荐文章于 2024-01-23 11:30:38 发布

未完。。。待续

最新推荐文章于 2024-01-23 11:30:38 发布

阅读量142

点赞数 9

文章标签： html 学习前端

本文链接：https://blog.csdn.net/qq_65330276/article/details/133893742

版权

HTML简介

HTML（Hypertext Markup Language 超文本标记语言）是一种用于创建网页的标记语言,是构建网页的核心语言，它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

HTML骨架模式

<!DOCTYPE html>
<!-- 表示文档类型是html5 -->
<html lang="en">
<!-- 
    网页根标签html 网页的所有内容都要写在html里面
    lang='en'表示网页是英文的,这是给搜索引擎看的,我们
    仍然可以在网页中写中文不会有任何影响

    标签:
      html文档是由一个个的标签组成的,标签一般有
      开始标签和结束标签组成,开始标签和结束标签
      中间的部分我们叫标签体,标签体里面一般可以放文字
      或其他标签
    标签写法:
      <标签名></标签名>
      注意:
        结束标签前面有一个斜杠,开始标签里面没有斜杠
        -->
<head>
<!-- 
    文档的头部描述了文档的各种属性和信息，
    包括文档的标题、在 Web 中的位置以及和其他文档的关系等
    注意:
    head标签体的内容一般在网页中看不到,
    主要用来帮助浏览器解析网页 
-->
    <meta charset="UTF-8">
    <!-- meta标签描述网页文档的一些属性 -->
    <!-- charset定义页面编码语言 防止乱码  -->
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <!-- 适配ie浏览器 -->
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <!-- 适配移动端(手机端) -->
    <title>第一个网页</title>
    <!-- 网页标题标签title -->
    
</head>
<!-- 
    文档的主体,以后我们的页面内容,基本都是放到body里面的
    body元素包含文档的所有内容(比如文本,超链接,图像,
    表格和列表等等.)
    学习html其实就是学习一些标签的作用

    将html文件在浏览器运行的方式:
      第一种方法:
        安装open in browser插件,运行的快捷键alt+b运行
      第二种方法:
        点击运行=>启动调试=>选择运行的浏览器
    浏览器推荐使用谷歌chrome浏览器,其他浏览器兼容性不太好!
-->
<body>
</body>

</html>

注释

在HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。其使用如下：
ctrl + / 或者 ctrl +shift + /
注释内容不会显示在浏览器窗口中.
注释的两个作用：
1.让部分代码不让浏览器执行
2.给程序员友好的提示

HTML标签

标签:
html文档是由一个个的标签组成的,标签一般有开始标签和结束标签组成,开始标签和结束标签中间的部分我们叫标签体,标签体里面一般可以放文字或其他标签
标签写法:
<标签名></标签名>
注意:
结束标签前面有一个斜杠,开始标签里面没有斜杠

排版标签

换行标签

换行标签:

在HTML中,一个段落中的文字会从左到右依次排列,
直到浏览器窗口的右端,然后自动换行,
如果希望某段文本强制换行显示，
就需要使用换行标签:

注意:
像br这种只有开始没有结束的单个标签,我们也称它叫做
自闭合标签!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    慢品人间烟火色，闲关万事岁月长<br>我亦好歌亦好酒，唱与佳人饮与友
</body>
</html>

段落标签

 段落标签:<p>

单词缩写:paragraph 段落(无须记这个单词)

在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落,而段落的标签就是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行

开始标签里面的title我们称为标签属性,标签属性是用来修饰标签的,标签有很多属性,后面我们会慢慢学到.title属性的作用是给标签添加一个总结性的标题,当鼠标放到这个标签上时,标题文字会自动弹出来!

普通标签和自闭合标签有啥区别呢?
普通标签有开始和结束标签,自闭合标签只有开始,没有结束标签,之所以普通标签有结束标签,是因为我们需要在它的标签体里面放置文字或其他标签,而自闭合标签因为不需要在标签体里面放东西,所以也就没必要写结束标签了,他们的区别仅此而已,其实自闭合标签完全也可以给它添加一个闭合标签变为普通标签,但是这样做属于多此一举!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p title="段落1">
      大一,大二玩了两年,大三才开始喜欢学习编程靠谱吗？
      <br>
      答：种一棵树最好的时间是十年前，其次是现在。
    </p>
    <p title="段落2">
      为什么有时会产生“聪明的姑娘都被憨憨的小伙搞定了”的印象？
      <br> 
      答:严肃地说，我觉得，要么姑娘只是看起来聪明，要么小伙只是看起来憨……
    </p>
    <p title="段落3">
      是不是一个人越成熟就越难爱上一个人？
      <br>
      不是越成熟越难爱上一个人，是越成熟越能分辨那不是爱。
    </p>
    <p title="段落4">
      世界上有那么多好书好电影好动漫注定看不完，我们该怎么办？
      <br>
      答：怕什么真理无穷，进一寸有一寸的欢喜。——胡适。
    </p>
    <p title="段落5">
      人这一生为什么要努力？ 
      <br>
      答：最痛苦的事，不是失败，是我本可以...!
    </p>
</body>
</html>

标题标签

为了使网页更具有语义化, 我们经常会在页面中用到标题标签,
HTML提供了6个等级的标题

 <h1>、<h2>、<h3>、<h4>、<h5>和<h6>

h是heading(标题)的简写!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>登山</h1>
    <h2>明 唐寅</h2>
    <p>
        一上一上又一上,一上直到高山上.<br>
        山登绝顶我为峰,五湖四海皆一望!
    </p>
</body>
</html>

水平线标签

   水平线标签:<hr>

单词缩写:horizontal 横线
在网页中常常看到一些水平线将段落与段落之间隔开,使得文档结构清晰,层次分明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>周杰伦</h3>
    <p>东风破,双节棍,晴天,反方向的钟,稻香</p>
    <hr>
    <h3>蔡徐坤</h3>
    <p>鸡你太美</p>
    <hr>
    <h3>陈奕迅</h3>
    <p>十年,传奇,孤勇者,浮夸</p>
</body>
</html>

上下标标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 上标标签sup -->
    (a+b)<sup>2</sup>
    <br>
    <!-- 下标标签sub -->
    H<sub>2</sub>O
    <!-- 
        记忆技巧:
          圈在上为上标,圈在下为下标
    -->


</body>
</html>

图片标签

img标签

img图片标签不会单独占一行，标签尖括号里面的src,alt我们称为属性。
src可以设置要显示的图片,src=“图片路径”。
src全拼source是资源文件的意思, alt可以设置当图片加载失败时显示的文字,alt全拼alt text是替换文字的意思

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="bird.png" alt="图片加载失败">
    <img src="./imgs1/icon.jpg">
    <img src="../imgs2/dog.png">
</body>
</html>

img标签属性

img标签属性:
src:图片路径
alt:图片不能显示的时候显示的文字
title:鼠标悬停时显示的文字内容
width:设置图片的宽度(默认单位px)
height:设置图片的高度(默认单位px)
border:设置图片边框的宽度

<!DOCTYPE html>
<html lang='en'>
<head>
   <meta charset='UTF-8'>
   <meta http-equiv='X-UA-Compatible' content='IE=edge'>
   <meta name='viewport' content='width=device-width, initial-scale=1.0'>
   <title>扫地小孩专属模板</title>
</head>
<body>
    <img src="icon.jpg" 
    alt="图片加载失败" 
    title="老虎图片"
    width="100"
    height="100"
    border='5'
    >
    
    </script>
</body>
</html>

超链接标签

a标签

   超链接标签a:<a>

单词缩写:anchor 基本解释锚
href:指定要跳转的地址

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <a href="http://www.baidu.com">去百度</a>
</body>

</html>

target属性

target用于定义目标页面的打开方式
常用两种方式:
_self:当前窗口打开页面默认值
_blank:新窗口打开页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <a href="http://www.baidu.com" target="_self">当前窗口打开百度</a>
     <br>
     <a href="http://www.baidu.com" target="_blank">新窗口打开百度</a>
</body>
</html>

特殊字符标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 全角空格 -->
    &emsp;
    <!-- 爱心 -->
    &#10084;
    <br>
    <!-- 五角星 -->
    &#9733;
    <br>
    <!-- 花 -->
    &#10048;
    <br>
    <!-- 咖啡 -->
    &#9749;
    <br>
    <!-- 八卦 -->
    &#9775;
    <!-- 版权符号 -->
    &copy;
    <!-- 注册商标 -->
    &reg;
</body>
</html>

div标签（重要）

div标签:division简写(分区的意思)用来划分一个区域, div在浏览器中表示一个小区域,不会增加任何的样式效果,div中所有子元素是在一个小区域中,div是一个容器,里面什么都能放,包括它自己,div标签最重要的作用是划分区域,然后结合css针对该区域进行样式控制.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <!-- 第一首诗 -->
     <h3>春晓</h3>
     <p>春眠不觉晓,处处闻啼鸟.</p>
     <p>夜来风雨声,花落知多少.</p>
     <hr/>
     <!-- 第二首诗 -->
     <h3>静夜思</h3>
     <p>床前明月光,疑是地上光.</p>
     <p>举头望明月,低头思故乡.</p>

     <!-- 使用div划分成两个区域 页面逻辑会清晰很多 -->
     <!-- 第一首诗 -->
     <div>
        <h3>春晓</h3>
        <p>春眠不觉晓,处处闻啼鸟.</p>
        <p>夜来风雨声,花落知多少.</p>
     </div>
     <hr/>
     <!-- 第二首诗 -->
     <div>
        <h3>静夜思</h3>
        <p>床前明月光,疑是地上光.</p>
        <p>举头望明月,低头思故乡.</p>
     </div>
     
</body>
</html>

表单标签

input控件

input输入框标签
type属性决定了输入框类型
type:
text:单行文本输入框
password密码输入框
radio:单选
checkbox:多选
button:按钮

value属性文本框默认值
checked属性默认选中的项(值为checked表示默认选中该项)
maxlength属性控件允许输入的最大字数
placeholder属性占位文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <!-- 单行文本框 -->
     <input type="text" value="你好" maxlength="5" placeholder="请输入内容" >
     <br>
     <!-- 密码输入框 -->
     <input type="password" maxlength="5" placeholder="请输入密码" >
     <br>
     <!-- 
         单选 
         label标签把文字和input绑定,点击文字也会触发单选效果
         注意:
           name属性一定要写,相同的name表示在相同的单选组,
           不写的话单选会失败
     -->
     <label>
         苹果
         <input type="radio" name="myinput">
     </label>
     <label>
         梨子
         <input type="radio" checked name="myinput">
     </label>
     <label>
        桃子
        <input type="radio"  name="myinput">
    </label>
    <br>
     
    <!-- 
        checkbox
     -->
     <label>
         苹果
        <input type="checkbox">
     </label>
     <br>
     <label>
        梨子
       <input type="checkbox">
    </label>
    <br>
    <label>
        桃子
       <input type="checkbox">
    </label>
    <br>
    <!-- button -->
    <input type="button" value="按钮">
</body>
</html>

文本域textarea

如果需要输入大量的信息，就需要用到textarea标签, 通过textarea控件可以轻松地创建多行文本输入框,其基本语法格式如下:

  <textarea cols="粗略地指定文本框的宽度" 
        rows="显示的行数">
        文本内容
        </textarea>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <textarea cols="10" rows="2">
    </textarea>
</body>
</html>

下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <select>
        <option value="红楼">红楼</option>
        <option value="三国">三国</option>
        <option value="水浒">水浒</option>
        <option value="西游">西游</option>
    </select>
</body>
</html>

列表标签

无序列表

无序列表ul:
ul是unordered list的简写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <ul>
        <li>三国</li>
        <li>水浒</li>
        <li>西游</li>
        <li>红楼</li>
    </ul>
</body>
</html>

有序列表

有序列表ol:
ol是ordered list的简写

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <ol>
    <li>三国</li>
    <li>水浒</li>
    <li>西游</li>
    <li>红楼</li>
  </ol>
</body>

</html>

表格标签

表格的使用

table是表格标签,tr,th,td是用来辅助创建表格的标签

tr表示表格中的一行,是"table row"的缩写,tr标签应该嵌套在table标签中,而每个tr标签则应该包含一个或多个 th或td标签;

th 表示表头单元格,是"table header"的缩写.th标签应该嵌套在tr标签中,并且用于表示表格的列标题;

td表示表格中的数据单元格,是"table data"的缩写.td标签应该嵌套在tr标签中,并且用于表示表格中的数据单元格

table标签常用属性:
border:边框线宽度
cellspacing:单元格之间的距离
cellpadding:单元格内边距
width:表格的宽度
height:表格的高度
align:表格水平方向对其方式,主要有3个值:left,center,right
bgcolor:表格背景颜色,属性值是颜色的英文

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<table border="1" cellspacing="0" 
cellpadding="10" width="600"
height="300" align="center"
bgcolor="skyblue"
>
  <!-- 
   caption标签用来显示表格标题
  -->
  <caption>
    <h3>人物信息</h3>
  </caption>
  <!-- tr第一行,一般在里面放表头th -->
  <tr>
    <th>姓名</th>
    <th>性别</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>刘备</td>
    <td>男</td>
    <td>18</td>
  </tr>
  <tr>
    <td>关羽</td>
    <td>男</td>
    <td>17</td>
  </tr>
</table>
</body>
</html>

宽、高、合并单元格

rowspan:合并行
colspan:合并列

不管行列怎么合并,其实只存在两种情况:
1.合并列:
这种情况特别简单,只需要数数有几行写几个tr,然后合并列相应的列即可
2.合并行:
这种情况相对来说复杂一点,因为两行会共享某一行,此时我们只需要把共享的那一行算作第一行就非常好处理了.因为合并行总是会出现一边是一个口字形,一边是一个类’日’字形,我给这种合并行起名叫口日合并方便记忆.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <table border="1" cellspacing="0">
    <tr>
      <th rowspan="2" height="60">姓名</th>
      <td width="60"></td>
    </tr>
    <tr>
      <td width="60"></td>
    </tr>
  </table>
  <hr>
  <table border="1" cellspacing="0">
    <tr>
      <th>姓名</th>
      <td width="60"></td>
    </tr>
    <tr>
      <td height="30" width="60" colspan="2"></td>
    </tr>
  </table>
</body>

</html>

总结

HTML的学习主要是对于各种标签的学习，HTML是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。