初学HTML-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_75207853/article/details/130416829

HTML

一、初识HTML？

01.什么是HTML

HTML是一种 超文本 标记语言

超文本：链接

标记：标签

02.标签结构

标签成对出现，中间包裹内容
<>里面放英文字母(标签名)
结束标签比开始标签多/
标签分为单标签和双标签

03.HTML基本骨架

<html>
    html包裹的内容为整个网页
  <head>
    <title>网页标题</title>
      头部存放给浏览器看的信息
  </head>
  <body>
    网页主体
      身体存放给用户看的信息
  </body>
</html>

vs code 中可以 ! + Tab 快速生成 HTML基本骨架

04.HTML注释语法

 <!--(注释内容)-->

快捷键与dev-c++相同 Ctrl + /

二、标签

01.标签的关系

标签有两种关系，父子(嵌套) 和 兄弟(并列)

父子标签：子级标签且换行缩进

兄弟标签：兄弟标签换行要对齐

02.标题标签

标题分为1~6级，写法如下：

 <h1>你是傻蛋</h1>  <!--一级标题一个网页只能用一次 一般放新闻标题或者	logo-->
    <h2>你是傻蛋</h2>   <!--其他级别无限制次数-->
    <h3>你是傻蛋</h3>
    <h4>你是傻蛋</h4>
    <h5>你是傻蛋</h5>
    <h6>你是傻蛋</h6>

具体效果如下：

在这里插入图片描述

03.常用简单标签

p 段落标签会自动换行

hr 水平线

br 换行 

strong / b 字体加粗

em / i 倾斜

ins / u 下划线

del / s 删除线



04.路径

a.相对路径

相对路径–从当前文件位置出发查找文件目标

/ 表示进入某个文件夹

. 表示当前文件所在文件夹

… 表示进入上一级文件夹

一般为了方便，起手先打 ./ vs code会有相应提示

b.绝对路径

win系统从盘符出发，mac从根目录出发。

可以从先找到图片所在位置，再复制路径，一般用于图片已经下载到本地；

或者也可以直接在网页图片右键->复制图像链接，一般用于不想下载图片的时候

windows系统中，在我的电脑里面复制的路径为 \ 的符号

其他系统均为/，方便起见，统一改成 / 。

05.图像标签

 <img src="A" alt="B" title="C" width="D" height="E">

A：图片的URL，可用相对路径或者绝对路径

B、C：文本

D、E：数值

src必不可少
alt title…都可有可无
功能：
- src指向图片所在的位置
- alt是图片加载不出来时，对图片内容解释，以免影响网页浏览
- title是当鼠标光标移到图片上短暂时间后，会显示出来的文字
- width height是对图片尺寸进行修改
  
  当只修改width或者height某一个时，浏览器会自动等比缩放

06.超链接标签

 <a href="A" target="_blank"> </a>

A：链接的绝对路径或者相对路径

A为‘#’的时候，表示此超链接为空链接，不会跳转
target=“_blank” 用于让此链接在新窗口中打开

07.多媒体–视音频标签

a.音频标签

<!--只支持MP3,ogg,wav格式-->
 <audio src="A"> </audio>

音频常用控件：

controls 显示音频控制面板

loop 循环播放

autoplay 自动播放（一般会被浏览器禁用）

b.视频标签

<!--只支持MP4,WebM,Ogg-->
<vedio src="A"> </vedio>

视频在音频的常用空间上多加了一个

muted 静音播放

可与autoplay合用，autoplay便不会被禁用

视频拥有图片的尺寸属性，即可以按照图片的方法对视频尺寸进行修改

08.列表标签

列表分为 无序列表，有序列表，定义列表：

a.无序列表

ul 嵌套 li

 <ul>
        <li>无序列表标签：</li>
        <li>ul 嵌套 li</li>
        <li>列表条目</li>
        <li>ul 标签里面只能包含 li标签</li>
        <li>但是li标签里面可以包含任何内容</li>
        <li><ol><li>实验2</li></ol></li>
    </ul>

b.有序列表

ol 嵌套 li

<ol>
        <li>ol嵌套li</li>
        <li>实验li里面可以包含列表不</li>
        <li><ol><li>实验1</li></ol></li>
        <li>实验1成功，理论上ul ol可以互相嵌套</li>
    </ol>

c.定义列表

dl 嵌套 dt和dd

<dl>
        <dt>定义列表标题</dt>
        <dd>列表具体内容</dd>
        <dt>京东</dt>
        <!--dd里面不可以加上dt 并列关系 显示效果就近原则-->
        <dd><dt>服务中心</dt></dd>
        <dd>售后政策</dd>
    </dl>

09.表格标签

a.基本使用

table 嵌套 tr，tr 嵌套 td / th

 <table border="1"><!--border表示边框，需要自己加-->
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>总分</th>       
        </tr>
        <tr>
            <td>张三</td>
            <td>100</td>
            <td>120</td>
            <td>220</td>
        </tr>
        <tr>
            <td>李华</td>
            <td>100</td>
            <td>90</td>
            <td>190</td>
        </tr>
        <tr>
            <td>table表格,格子大小可以随内容自动变化</td>
            <td>tr表示行</td>
            <td>th表示表头</td>
            <td>td表示内容</td>
        </tr>
    </table>

效果如下：

在这里插入图片描述

<table  style="text-align:A">
    
</table>
不同的属性值A可以实现文本居中、向右对齐、向左对齐等。

b.结构标签

作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰。

在这里插入图片描述

提示：表格结构标签可以省略，是给浏览器识别的，用户看不到具体效果。

c.合并单元格

作用：将多个单元格合并成一个单元格，以合并同类信息。

在这里插入图片描述

合并单元格的步骤：

明确合并的目标
保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）
- 跨行合并，保留最上单元格，添加属性 rowspan
- 跨列合并，保留最左单元格，添加属性 colspan
删除其他单元格

<table border="1">
  <thead>
    <tr>
      <th>姓名</th>
      <th>语文</th>
      <th>数学</th>
      <th>总分</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>99</td>
      <td rowspan="2">100</td>
      <td>199</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>98</td>
      <!-- <td>100</td> -->
      <td>198</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>总结</td>
      <td colspan="3">全市第一</td>
      <!-- <td>全市第一</td>
      <td>全市第一</td> -->
    </tr>
  </tfoot>
</table>

注意：不能跨表格结构标签合并单元格（thead、tbody、tfoot）

10.表单

a.input标签

<input type=" A " placeholder="B">

A为type属性值，B为提示信息，placeholder表示占位文本信息

当一个input中存在多个type时，只显示一个属性值，先来后到原则

input不自动换行

b.常见的type属性值

text 文本框

password 密码

radio 单选框

checkbox 多选框

file 上传文件

radio单选框

常用属性

在这里插入图片描述

<input type="radio" name="gender" checked> 男
<input type="radio" name="gender"> 女

提示：name 属性值自定义。

file上传文件
- 默认情况下，文件上传表单控件只能上传一个文件，添加 multiple 属性可以实现文件多选功能。
```
<input type="file" multiple>
```
checkbox多选框
- 多选框也叫复选框，默认选中：checked。
```
<input type="checkbox" checked> 敲前端代码
```

c.下拉菜单

select 嵌套 option

城市：
<select name="" id="">
 <!--默认出现的name和id属性适用于发射数据的 但是目前没有后台 省略-->
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option selected>深圳</option>
    <!--下拉菜单默认选中用selected-->
    <option>杭州</option>
</select>

d.文本域

在这里插入图片描述

<textarea>可以输入多行文字</textarea>

注意点：

实际开发中，使用 CSS 设置文本域的尺寸
实际开发中，一般禁用右下角的拖拽功能

e.label标签

<label for="属性值"> </label>

写法一
性别：
<!--for属性值和表单控件id要相同--> <!--label标签只包裹内容-->
<input type="radio" name="gender" id="man"><label for="man">男</label>
<input type="radio" name="gender">女
写法二
性别：
<!--label可以直接包裹文字和表单空间-->
<label><input type="radio" name="gender">男</label>
<label><input type="radio"  name="gender">女</label>

支持 label 标签增大点击范围的表单控件：

文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域…

f.按钮

<button type="">按钮</button>

常见的type属性值：

submit 提交 reset 重置 button 普通

提示：按钮需配合 form 标签（表单区域）才能实现对应的功能。

<form>
  <input type="text" placeholder="请输入用户名" />
  <br /><br />
  <input type="password" placeholder="请输入密码" />
  <br /><br />
  <button type="submit">提交</button>
  <button type="reset">重置</button>
  <button type="button">普通按钮</button>
</form>

11.布局标签

a.无语义的布局标签

<div>div 标签，独占一行</div>
<span>span 标签，不换行</span>

b.有语义的布局标签

<header>网页头部</header>
<nav>网页导航</nav>
<footer>网页底部</footer>
<aside>网页侧边栏</aside>
<section>网页区块</section>
<article>网页文章</article>

12.字符实体

常用的字符实体：

空格：&nbsp；

小于号：&lt；

大于号：&gt；

三、案例试做

1.个人简介–陈乔年

在这里插入图片描述

源码如下：

<!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>
    <h1>陈乔年</h1>
    <hr />
    <img
      src="http://h.bytravel.cn/ren/6/head/63657.gif"
      alt="陈乔年照"
      width="200"
    /><br />
    <h2>学习经历</h2>
    <p>
      陈乔年，安徽怀宁人，<a
        href="http://ren.bytravel.cn/history/6/chenduxiu34921973.html"
        target="_blank"
        >陈独秀</a
      >次子，生于1902年。陈乔年于1915年先后在上海法语补习学校、震旦大学学习，1919年底赴法勤工俭学。
    </p>
    <h2>革命事迹</h2>
    <p>
      1922年加入旅欧中国少年共产党，同年转为中国共产党党员。1925年任中共北京地委组织部部长、北方区委组织部部长。1927年在中共第五次全国代表大会上当选为中央委员。
    </p>
    <p>
      大革命失败后，党中央于1927年8月7日在<a
        href="https://baike.baidu.com/item/%E6%B1%89%E5%8F%A3%E9%95%87/375129"
        target="_blank"
        >汉口</a
      >召开了紧急会议，陈乔年出席了会议，并对他父亲陈独秀在大革命中所犯的错误进行了严肃的批评。会后，他被党中央调任<a
        href="https://baike.baidu.com/item/%e6%b9%96%e5%8c%97%e7%9c%81/210064"
        target="_blank"
        >湖北省</a
      >委组织部部长。同年秋，陈乔年又被调任中共<a
        href="https://baike.baidu.com/item/%E6%B1%9F%E8%8B%8F%E7%9C%81/320938"
        target="_blank"
        >江苏省</a
      >委组织部部长。他秘密深入工厂、机关和学校，恢复被国民党反动派破坏的党组织，重新聚集革命力量。
    </p>
    <p>
      1928年2月16日，中共江苏省委机关遭到上海国民党反动派的破坏，陈乔年等被捕。在监狱中，敌人对陈乔年施尽酷刑。他坚贞不屈，始终严守党的秘密。狱中同志见他受了重刑，十分难受，他却淡淡地说：“受了几下鞭子，算个啥！”他还常常利用机会，给大家讲故事，鼓励同志们保持革命气节。
    </p>
    <p>
      1928年6月6日，陈乔年和郑复他、许白昊在上海龙华的枫林桥畔英勇就义。牺牲前，监狱中的战友为他即将被害十分难过。陈乔年却仍然乐观地说：“让我们的子孙后代享受前人披荆斩棘的幸福吧！”
    </p>
    <h2>后世评价</h2>
    <p>
      陈乔年牺牲时，年仅26岁。他是中国共产党优秀党员，中国人民的忠实的儿子。他牺牲前的这句豪迈宣言，永远定格在了华夏的天地间，也回荡在后人的心中。
    </p>
    陈乔年的英勇事迹和革命精神也通过电视剧<a href="./16.案例2-觉醒年代简介.html"
      >《觉醒年代》</a
    >为后人广泛了解，不断激励着后人。
  </body>
</html>

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>觉醒年代</title>
  </head>
  <body>
    <h1>觉醒年代</h1>
    2021年张永新执导的电视剧<br /><br />
    <img
      src="https://pic.baike.soso.com/ugc/baikepic2/0/ori-20221108164857-1841857422_jpeg_415_642_40268.jpg/800"
      alt="觉醒年代"
      width="200"
    />
    <h2>背景简介</h2>
    <p>
      《觉醒年代》是一部由中共北京市委宣传部、中共安徽省委宣传部、<a
        href="https://baike.sogou.com/v66199911.htm"
        >北京市广播电视局</a
      >和<a href="https://baike.sogou.com/v205211641.htm">安徽省广播电视局</a
      >联合摄制，由<a href="https://baike.sogou.com/v168795891.htm"
        >北京北广传媒影视股份有限公司</a
      >和<a href="https://baike.sogou.com/v63015060.htm"
        >安徽华星传媒投资有限公司</a
      >承制，张永新执导，龙平平担任编剧，于和伟、张桐、侯京健、马少骅、朱刚日尧、张晚意、曹磊、夏德俊等主演的电视剧，于2021年2月1日起在CCTV-1播出。
      该剧是重大革命历史题材电视剧，以1915年<a
        href="https://baike.sogou.com/v5550162.htm"
        >《青年杂志》</a
      >问世到1921年<a href="https://baike.sogou.com/v101499452.htm"
        >《新青年》</a
      >成为中国共产党机关刊物为贯穿，展现了从<a
        href="https://baike.sogou.com/v181519701.htm"
        >新文化运动</a
      >到中国共产党建立这段波澜壮阔的历史画卷，讲述觉醒年代的百态人生。
      2022年该剧获得第33届中国电视剧飞天奖优秀电视剧奖，第31届中国电视金鹰奖最佳电视剧奖。
    </p>
    <h2>剧情简介</h2>
    <p>
      电视剧《觉醒年代》以1915年《青年杂志》问世到1921年《新青年》成为中国共产党机关刊物为贯穿，
      展现了从新文化运动、五四运动到中国共产党建立这段波澜壮阔的历史画卷，
      讲述了觉醒年代社会风情和百态人生。该剧以李大钊、陈独秀、胡适从相识、相知到分手，
      走上不同人生道路的传奇故事为基本叙事线，以毛泽东、周恩来、陈延年、陈乔年、邓中夏、赵世炎等革命青年追求真理的坎坷经历为辅助线，
      艺术地再现了一百年前中国的先进分子和一群热血青年演绎出的一段追求真理、燃烧理想的澎湃岁月，深刻地揭示了马克思主义与中国工人运动相结合和中国共产党建立的历史必然性。
    </p>
    <h2>原剧画面</h2>
    <video
      src="D:\0\bilibili\vidjuice\“我们的考点，是他们的一生！”.mp4"
      controls
      loop
    ></video>
  </body>
</html>

3.新闻列表

在这里插入图片描述

代码如下：

<!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>案例1--新闻列表</title>
</head>
<body>
    <ul>
        <li>
        <img src="https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics6.baidu.com%2Ffeed%2Fb64543a98226cffc3c93a1c612e2429cf703ea7c.jpeg%40f_auto%3Ftoken%3Dfb8c8b2259d7c5087e9c821536ccb561&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1682701200&t=f5e2c2397d6808c8e48067ea1b10889e" alt="">
        </li>
        <h3>从唯一女神，到节目败笔，35岁杨颖不再被世界宽容</h3>
        <li>
            <img src="https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics7.baidu.com%2Ffeed%2F91ef76c6a7efce1b75c56ad45647e6d2b58f65e1.jpeg%40f_auto%3Ftoken%3Dd0f296f8140484a243b5f2933500eb8c&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1682701200&t=e6f3cd9845529665b1c0347a6b4fd9e1" alt="">
        </li>
        <h3>注定比蔡徐坤走得更远，拿下奔跑吧又搭档马丽常远，是有点实力的</h3>
        <li><img src="https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics6.baidu.com%2Ffeed%2Fbd315c6034a85edf61451f378594182fdc547522.jpeg%40f_auto%3Ftoken%3D90fa1cf7cb9ddea5aaa9628485ebbb58&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1682701200&t=9e2619192283d58cc4b039dd0409781a" alt=""></li>
        <h3>新《跑男》首播口碑出炉，观众打分和评论都已一针见血</h3>
    </ul>

    <dl>
        <dt><strong>关注我们</strong></dt>
        <dd>微信公众号</dd>
        <dd>新浪微博</dd>
        <dd>关于百度</dd>
        <dd>联系客服</dd>
    </dl>
</body>
</html>

4.注册信息

在这里插入图片描述

<!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>案例2--注册信息</title>
  </head>
  <body>
    <h1>注册信息</h1>
    <form action="">
      <h2>个人信息</h2>
      姓名：
      <input type="text" placeholder="请输入真实姓名" /><br /><br />
      密码：
      <input type="password" placeholder="请输入密码" /><br /><br />
      确认密码：
      <input type="password" placeholder="请输入确认密码" /><br /><br />
      性别：
      <label for="man"
        ><input type="radio" name="gender" id="man" checked />男</label
      >
      <label for="woman"
        ><input type="radio" name="gender" id="woman" />女</label
      >
      <br /><br />
      居住城市：
      <select name="" id="">
        <option value="">北京</option>
        <option value="">上海</option>
        <option value="">广州</option>
        <option value="" selected>深圳</option>
        <option value="">苏州</option>
        <option value="">揭阳</option>
        <option value="">潮州</option>
      </select>

      <h2>教育经历</h2>
      最高学历：
      <select name="" id="">
        <option value="">小学</option>
        <option value="">初中</option>
        <option value="">高中</option>
        <option value="">大学专科</option>
        <option value="">大学本科</option>
        <option value="" selected>硕士</option>
        <option value="">博士</option>
      </select>
      <br /><br />
      学校名称：
      <input type="text" /><br /><br />
      所学专业：
      <input type="text" /><br /><br />
      在校时间：
      <select name="" id="">
        <option value="">2023</option>
        <option value="">2022</option>
        <option value="">2021</option>
        <option value="">2020</option>
        <option value="">2019</option>
        <option value="">2018</option>
        <option value="">2017</option>
        <option value="">2016</option>
        <option value="">2015</option>
        <option value="">2014</option>
        <option value="" selected>2013</option>
      </select>
      --
      <select name="" id="">
        <option value="">2023</option>
        <option value="">2022</option>
        <option value="">2021</option>
        <option value="">2020</option>
        <option value="">2019</option>
        <option value="">2018</option>
        <option value="">2017</option>
        <option value="">2016</option>
        <option value="">2015</option>
        <option value="">2014</option>
        <option value="">2013</option>
      </select>
      <h3>工作经历</h3>
      公司名称：
      <input type="text" /><br /><br />
      工作描述：<br />
      <textarea name="" id="" cols="20" rows="2"></textarea><br /><br />
      <input type="checkbox" checked />已阅读并同意以下协议：<br /><br />
      <ul>
        <li><a href="#">《用户服务协议》</a></li>
        <br />
        <li><a href="#">《隐私政策》</a></li>
      </ul>
      <br /><br />
      <button type="submit">免费注册</button>
      <button type="reset">重新填写</button>
    </form>
  </body>
</html>