HTML基础

彩虹猪头怪

于 2023-10-17 20:18:53 发布

阅读量207

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/m0_57623673/article/details/133892999

版权

HTML基础

1.初识HTML

1.1骨架格式

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

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

    将html文件在浏览器运行的方式:
      第一种方法:
        安装open in browser插件,运行的快捷键alt+b运行
      第二种方法:
        点击运行=>启动调试=>选择运行的浏览器
-->
<body>
    hello
</body>

</html>

1.2 注释

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

2.排版标签

2.1 换行标签

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

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

2.2 段落标签

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

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

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

代码演示

	![在这里插入图片描述](https://img-blog.csdnimg.cn/eadc8d6e29d34438adce936be71752aa.png#pic_center)

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

2.3 标题标签

 为了使网页更具有语义化,
        我们经常会在页面中用到标题标签,
        HTML提供了6个等级的标题
        <h1>、<h2>、<h3>、<h4>、<h5>和<h6>
        h是heading(标题)的简写!

2.4 水平线标签

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

2.5 上下标标签

<!-- 上标标签sup -->
    (a+b)<sup>2</sup>

<!-- 下标标签sub -->
    H<sub>2</sub>O
    
<!-- 记忆技巧:圈在上为上标,圈在下为下标  -->

效果如图:

在这里插入图片描述

3.图片标签

3.1 图片标签

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

<img src="bird.png" alt="图片加载失败">
<img src="./imgs1/icon.jpg">
<img src="../imgs2/dog.png">

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

 <img src="icon.jpg" 
    alt="图片加载失败" 
    title="老虎图片"
    width="100"
    height="100"
    border='5'
    >

3.2 路径

绝对路径(用的较少): 文件在电脑磁盘中的位置如: C:\Users\dbb\AppData\Local\SourceTree\SourceTree.exe

相对路径 (用的较多):以文件本身的位置为基准,其他文件相对于自身的路径
以文件本身的位置为基准,其他文件相对于自身的路径.
./ 表示当前目录区域也可以省略不写
…/ 表示上一层目录区域

4.超链接标签

超链接标签a:
单词缩写:anchor 基本解释锚
href:指定要跳转的地址

  <a href="http://www.baidu.com">跳转到百度页面</a>

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

<a href="http://www.baidu.com" target="_self">当前窗口打开百度</a>
<a href="http://www.baidu.com" target="_blank">新窗口打开百度</a>

5.特殊字符标签

HTML特殊符号是指在HTML中使用的一些特殊字符，如版权符号、商标符号、箭头符号等。这些特殊符号可以通过HTML实体来表示。以下是一些常用的HTML特殊符号：

在这里插入图片描述

6.div标签

div标签:

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

块级元素和行内元素:

**块级元素:**独占一行,其他元素不能和其在一行,并且可以设置宽高
       如:div,h1-h6
      **行内元素:**元素在一行显示,不能设置宽高
              如:span
  **行内块级元素:**元素在一行显示,可以设置宽高
  	    如:img,input

7.表单标签

7.1 input控件

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

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

<!-- 单行文本框 -->
     <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>

7.2 文本域

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

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

7.3 下拉菜单

在HTML中，可以使用<select>元素来创建下拉标签（也称为下拉列表或下拉框）。下面是一个简单的示例，演示如何创建一个包含选项的下拉标签：


    <label for="fruits">选择一个水果：</label>
    <select id="fruits" name="fruits">
        <option value="apple">苹果</option>
        <option value="banana">香蕉</option>
        <option value="orange">橙子</option>
        <option value="strawberry">草莓</option>
    </select>

在这个示例中，<select>元素定义了一个下拉标签，内部包含了四个<option>元素，每个<option>元素代表一个可选的选项。用户可以点击下拉标签并选择其中一个选项。

可以通过设置value属性来指定每个选项的值，这些值将在表单提交时发送给服务器。还可以使用label元素来提供标签文本，以帮助用户理解下拉标签的目的。

8.列表标签

无序列表ul:

ul是unordered list的简写

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

有序列表ol:

ol是ordered list的简写

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

9.表格标签

9.1 表格简介

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:表格背景颜色,属性值是颜色的英文

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

在这里插入图片描述

9.2 宽高合并单元格

**rowspan:**合并行
**colspan:**合并列

不管行列怎么合并,其实只存在两种情况:
1.合并列:
这种情况特别简单,只需要数数有几行写几个tr,
然后合并列相应的列即可
2.合并行:
这种情况相对来说复杂一点,因为两行会共享某一行,
此时我们只需要把共享的那一行算作第一行就非常好
处理了.

9.3 表格练习

建立一个如图所示的课程表:

在这里插入图片描述

<table width="600" heigth="200" cellspacing="0" border="1" align="center">
        <caption>
            <h3>课程表</h3>
        </caption>
        <tr align="center">
            <th>项目</th>
            <td colspan="5">上课</td>
            <td colspan="2">休息</td>
        </tr>
        <tr align="center">
            <th>星期</th>
            <td>星期一</td>
            <td>星期二</td>
             <td>星期三</td> 
             <td>星期四</td> 
             <td>星期五</td> 
             <td>星期六</td> 
             <td>星期日</td>

        </tr>
        <tr align="center">
            <th rowspan="2">上午</th>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>政治</td>
            <td>历史</td>
            <td>地理</td>
            <td rowspan="2">休息</td>
        </tr>
        <tr align="center">
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>政治</td>
            <td>历史</td>
            <td>地理</td>
            
        </tr>
        <tr align="center">
            <th rowspan="2">上午</th>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>政治</td>
            <td>历史</td>
            <td>地理</td>
            <td rowspan="2">休息</td>
        </tr>
        <tr align="center">
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>政治</td>
            <td>历史</td>
            <td>地理</td>
        </tr>
   <td>政治</td>
            <td>历史</td>
            <td>地理</td>
            
        </tr>
        <tr align="center">
            <th rowspan="2">上午</th>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>政治</td>
            <td>历史</td>
            <td>地理</td>
            <td rowspan="2">休息</td>
        </tr>
        <tr align="center">
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>政治</td>
            <td>历史</td>
            <td>地理</td>
        </tr>