前端学习记录 HTML5基础篇

yonghuminyicunzai

已于 2022-12-12 17:11:08 修改

阅读量272

点赞数

文章标签： html 学习

于 2022-12-09 00:27:43 首次发布

本文链接：https://blog.csdn.net/m0_46739166/article/details/128239754

版权

教程：B站pink老师

学习路线：

HTML5基础 —— CSS3 基础 —— HTML/CSS 提高 —— 实战项目（电商网站页面）

DAY1-HTML简介

学习目标：

1、网页的基本组成

图片、链接、文字、声音、视频等元素

重要概念：

网站是网页的集合，网页是网站的基本元素。
网页通常用HTML语言书写，为.htm/.html格式，用浏览器查看

2、什么是HTML

超文本标记语言Hyper Text Markup Language，是一种用来描述网页的标记语言markup language（即一套标记标签markup tag）。

3、常用的浏览器

Chrome（Blink）、Firefox、Safari（Webkit）、Edge、Opera

4、web标准的三大组成部分

W3C，万维网联盟，标准制定者，制定标准是为了统一文字度量衡

标准	说明
结构	整理、分类网页元素，搭建网页结构框架，使用HTML语言实现
表现	设置网页元素外观样式，使用CSS实现
行为	网页模型的定义及交互，使用js实现

Web标准的最佳体验方案：结构样式行为分离，即将代码写入各自的文件中去。

DAY1-HTML标签（上）

学习目标：

1、书写规范

基本语法

<!-- HTML标签由尖括号包围，成对出现，开始标签+结束标签 -->
<html> </html>

<!-- 个别单标签 -->
<br />

标签关系

<!-- 包含关系 -->
<head>
    <title></title>
</head>

<!-- 并列关系 -->
<html>
    <head></head>
    <body></body>
</html>

2、HTML骨架标签

标签名	定义	说明
<html></html>	HTML标签	根标签
<head></head>	页面的头部	heab标签中必须要设置title
<title></title>	页面的标题	即网页的名称
<body></body>	页面的主题	页面所有的元素

<!-- 声明html版本 -->
<!DOCTYPE html>
<!-- 定义当前文档的显示语言 en英文网页 zh-CN中文网页 但不妨碍内容显示 -->
<html lang="en">
<head>
    <!-- charset字符集 方便计算机能够识别和储存各种文字 防止乱码 -->
    <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>
    
</body>
</html>

语义标签

<body>
    <!-- 1. 标题标签 -->
    <h1>共有六级标题</h1>
    <h2>一个文档中通常只有一个一级标题</h2>
    <h3>每个标题独占一行</h3>

    <!-- 2.段落标签和换行标签 -->
    <p>This study is aiming to assess <br />how the ecological environmental quality of the Tibetan Plateau varies spatially and temporally, and how climate change and human activities influenced the environmental status from 2000 to 2020. </p>
    <p>The paper is divided into six parts, including Introduction, Literature Review, Methodology, Result, Discussion and Conclusion, trying to reveal the conclusion systematically.</p>
</body>

文本格式化标签

<body>
    <!-- 推荐使用第一组标签 -->
    <!-- 1.加粗 -->
    我是<strong>加粗的</strong>文字
    我是<b>加粗的</b>文字
    <!-- 2.倾斜 -->
    我是<em>倾斜的</em>文字
    我是<i>倾斜的</i>文字
    <!-- 3.删除线 -->
    我是<del>被删除</del>文字
    我是<s>被删除</s>文字
    <!-- 4.下划线 -->
    我是<ins>下划线</ins>
    我是<u>下划线</u>
</body>

盒子标签（空白画布）-- 用来网页布局

<body>
    <!-- div标签 -->
    <div>div标签占一整行</div>放不下后续的内容
    <!-- span标签 -->
    <span>span</span>
    <span>一行可以</span>
    <span>放多个</span>
</body>

3、图片标签及alt和title的区别

<body>
    <!-- 图片标签 -->
    <h4>图像标签的使用：</h4>
    <img src="me.png" />

    <!-- 图像标签的其他属性 属性没有先后次序 采取键值对格式 -->
    <h4>alt:替换文本，当图片无法显示时用文字替换</h4>
    <img src="me.jpg" alt="图片无法显示"/>

    <h4>title:提示文本，鼠标放到图像上提示的文本</h4>
    <img src="me.png" alt="图片无法显示" title="这是我"/>

    <h4>width/height:等比改变图像尺寸</h4>
    <img src="me.png" alt="图片无法显示" title="这是我" width="500px"/>
    <img src="me.png" alt="图片无法显示" title="这是我" height="500px"/>

    <h4>border:给图像设定边框</h4>
    <img src="me.png" alt="图片无法显示" title="这是我" border="1"/>
</body>

4、超链接标签

语法格式

属性	作用
href	指定链接目标的url地址，是必须属性
target	指定链接页面的打开方式，default: _self, _blank在新窗口打开

分类

<body>
    <h4>1. 外部链接</h4>
    <a href="http://www.qq.com" target="_blank">腾讯_blank</a>
    <a href="http://www.qq.com" target="">腾讯default</a>

    <h4>2. 内部链接：网站内部之间相互链接，即一个目录中的文档之间相互链接</h4>
    <a href="01.html" target="_blank">01</a>

    <h4>3. 空连接"#"</h4>
    <a href="#">空连接</a>

    <h4>4. 下载链接：地址链接的是文件，如.exe .zip 等</h4>
    <!-- 如果下载外部文件呢？ -->
    <a href="me.zip">me.zip</a>

    <h4>5. 网页元素的链接，如给图片，音频，视频等添加超链接</h4>
    <a href="http://baidu.com" target="_blank"><img src="me.png" alt=""></a>
</body>

<body>
    <h3 id="top">6. 锚点链接：链接到同一页面中指定位置</h3>
    <h3>简历</h3>
    <a href="#edu"><h3>1.教育经历</h3></a> <dr />
    <a href="#inter"><h3>2.实习经历</h3></a> <dr />
    <a href="#proj"><h3>3.项目经验</h3></a> <dr />
    <a href="#cert"><h3>4.技能证书</h3></a> <dr />

    <p><h3 id="edu">教育经历</h3></p>
    <p>...</p>

    <p><h3 id="inter">实习经历</h3></p>
    <p>...</p>

    <p><h3 id="proj">项目经验</h3></p>
    <p>...</p>

    <p><h3 id="cert">技能证书</h3></p>
    <p>...</p>

    <a href="#top"><h4>返回顶部</h4></a>
</body>

5、相对路径的三种形式

重要概念：

目录文件夹：存放项目（网页）文档和素材的总文件夹
根目录：目录文件夹的第一层
相对路径：文件相对于html页面的位置
绝对路径：文件在计算机中的储存位置或完整的网络地址

相对位置	符号
同一级路径（同一文件夹下）
下一级路径	下一级文件夹/文件名
上一级路径	../文件名

HTML中的特殊字符

DAY2-HTML标签（下）

学习目标：

1、表格标签

主要所用

显示、展示数据。表格在展示后台大量数据时非常规整，可读性好。

基本语法

<body>
    <!-- 表格标签 -->
    <!-- 表格属性 align表格在页面中的位置 border是否有边框 
        cellpadding单元格内容与表格边界的距离 cellspacing单元格之间的距离 
        width单元格宽 height单元格长 -->
    <table align="center" border="1" 
        cellpadding="5" cellspacing="0" width="500" height="100">

    <thead>
        <!-- 行 -->
        <th>
            <!-- 表头单元格，会加粗居中显示 -->
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </th>
    </thead>

    <tbody>
        <tr>
            <!-- 普通单元格 -->
            <td>zjr</td>
            <td>100</td>
            <td>F</td>
        </tr>
    </tbody>

    </table>
</body>

*表格的属性通常使用CSS来设置

<body>
    <!-- 合并单元格 -->
    <table align="center" border="1" cellspacing="0" width="500" height="100">
        <tr>
            <td></td>
            <td colspan="2"></td>
        </tr>

        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>

        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>

2、列表标签

主要作用

页面布局。列表特点，整齐有序。

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

无序列表（重点）

<body>
    <!-- 无序列表 -->
    <!-- list之间无先后顺序 -->
    <!-- *ul标签中只能放li标签，li标签中可以放任意标签 -->
    <h4>您喜欢的水果</h4>
    <ul>
        <li>西瓜</li>
        <li>车厘子</li>
        <li>kiwi</li>
    </ul>
</body>

有序列表

<body>
    <!-- 有序列表 -->
    <h4>排行榜</h4>
    <ol>
        <li>sanisbury</li>
        <li>tesco</li>
        <li>lidl</li>
    </ol>
</body>

自定义列表

<body>
    <!-- 自定义列表 -->
    <dl>
        <!-- dt和dd标签是并列关系 -->
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
        <dd>联系我们</dd>
    </dl>
</body>

3、input表单标签

使用表单的目的是收集用户信息。

表单组成：表单域(把范围内的表单元素信息提交给服务器)、表单控件（表单元素）、提示信息

<body>
    <!--  表单域  <form action="服务器url地址" method="提交方式 get/post" name="表单域名称"></form> -->
    <form action="demo.php" method="post" name="name1">

        <!-- 表单元素 -->
        <!-- 1. input 表单元素 -->
        <!-- text 文本框 可输入任何文字-->
        <!-- value属性只有type是text时可以显示在页面，value值主要给后台人员使用 -->
        用户名：<input type="text" name="username" value="请输入用户名" maxlength="12"/> <br />
        <!-- password 隐藏字段 -->
        密码：<input type="password" name="pwd" /> <br />
        <!-- radio 单选按钮 -->
        <!-- 单选按钮必须有相同的名字才能实现单选功能 -->
        性别：<input type="radio" name="gender" value="男"/>男 女<input type="radio" name="gender" value="女" checked="checked"/> <br/>
        <!-- checkbox 多选按钮 -->
        爱好：登山<input type="checkbox" name="hobby" value="登山"/> 滑雪<input type="checkbox" name="hobby" value="滑雪"/> 
        <input type="checkbox" name="hobby" value="hiking" checked="checked"/>hiking <br/>
        <!-- hidden -->
        隐藏字段：<input type="hidden" name="hidden" value="隐藏字段"> <br/>
        <!-- file 文件域-->
        上传文件：<input type="file" name="uploadfile" value="上传文件"> <br/>
        <!-- image -->
        上传图片：<input type="image" name="image" value="上传图像">  <br/>
        <!-- submit 将表单域中的表单元素值提交到后台服务器-->
        <input type="submit" name="submit" value="免费注册"/> 
        <!-- reset 还原初始的默认状态-->
        <input type="reset" name="reset" value="重新填写"> <br/>
        <!-- button 普通按钮，经常与js搭配使用 -->
        <input type="button" name="button" value="获取手机验证码">

    </form>
</body>

<body>   
     <form>
        <!-- label标签 点击label即可触发,增加用户体验-->
        <label for="username">用户名：</label>
        <input type="text" id="username"> <br/>

        性别：
        <input type="radio" id="M" name="gender"> <label for="M">男</label>
        <input type="radio" id="F" name="gender"> <label for="F">女</label>


    </form>
</body>

4、下拉列表元素、文本域元素

    <form>
        <!-- 2. select 表单元素 -->
        籍贯：
        <select>
            <option>北京</option>
            <option>上海</option>
            <option selected="selected">港澳台</option>
        </select>
    </form>

    <form>
        <!-- 3. textarea 文本域元素 可输入大段文本-->
        今日反馈：
        <textarea>请留言，谢谢
        </textarea>
    </form>
</body>