Web前端-HTML

易21992024-04-13 19:17

黑马程序员JavaWeb开发教程

一、初识web前端

1、 标准也称为网页标准，由一系列的标准组成，大部分由W3C负责指定

2、 三个部分组成

  • HTML：负责网页的结构（页面元素和内容）
  • CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）
  • JavaScript：负责网页的行为（交互效果）

二、什么是HTML、CSS

1、HTML：超文本标记语言

  • 超文本：超越了不同文本，比普通文本更加强大。除了文字信息，还可以定义图片、音频、视频等内容
  • 标记语言：由标签构成的语言
    （1）HTML标签都是预定义好的，例如使用<a>展示超链接，使用<img>展示图片，<video>展示视频
    （2）HTML代码直接在浏览器运行，HTML标签由浏览器解析
    2、CSS：层叠样式表，用于控制页面的样式（表现）

三、HTML快速入门

  1. 新建文本文件，后缀名为.html
  2. 编写HTML结构标签
  3. 在中填写内容

  • hello.html 中的内容

    <html> <head> <title>HTML快速入门</title> </head> <body>

    hello HTML

    </body> </html>

  • 结果

  1. 特点
  • HTML标签不区分大小写，但是一般都使用小写
  • HTML标签属性值单引号和双引号都可以，即上方代码中使用 src="1.png" 或者 src='1.png' 都是可以生效的
  • HTML语法松散

四、基础标签&样式

1、新浪新闻标题

（1） 标题排版

  1. 图片标签<img>

  • src：指定图像的 url （绝对路径/相对路径）

    路径书写方式
    绝对路径
    1、绝对磁盘路径：
    2、绝对网络路径：这个要保证图片一定在网络上
    相对路径（推荐使用）
    ./：当前路径，可以省略
    ../:上一级目录，不可以省略

  • width：图像的宽度（像素/相对于父元素的百分比）

  • height：图像的高度（像素/相对于父元素的百分比）

  1. 标题标签
  • <h1>...</h1> （h1到h6重要程度依次降低）
  • 注意HTML标签都是预定义好的，不能自己随便定义
  1. 水平线标签
  • <hr>

代码：

复制代码 
<!-- 文档类型为html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 字符集为UTF-8 -->
    <meta charset="UTF-8">
    <!-- 设置浏览器兼容性 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 指定标题 -->
    <title>焦点访谈：新闻标题</title>
</head>
<body>
    <!-- img 标签
        src：图片资源路径
        width：宽度（px,像素；%，相对于父元素的百分比）
        height：高（px,像素；%，相对于父元素的百分比）

    路径书写方式
        绝对路径
            1、绝对磁盘路径：<img src="E:\VSCode\workspace\HTML\img\news_logo.png"/>
            2、绝对网络路径：这个要保证图片一定在网络上 
        相对路径（推荐使用）
            ./：当前路径，可以省略  <img src="img\news_logo.png"/>
            ../:上一级目录，不可以省略 <img src="../HTML/img/news_logo.png"/>
        -->
    <img src="img\news_logo.png" /> 新浪政务 > 正文
    <h1>焦点访谈：新闻标题</h1>

    <hr>
    2023年03月02日 21:50 央视网
    <hr>
</body>
</html>

（2）标题样式

1、CSS引入方式

  • 行内样式：写在标签的style属性中（不推荐）

  • 内嵌样式：写在style标签中（可以写在页面任何位置，但是通常约定写在head标签中）

  • 外联样式：写在一个单独的.css文件中（需要通过link标签在网页中引入）

    • 首先创建一个文件夹css，在文件夹中创建 style.css 文件，其中的代码为
      • h1{ color: blueviolet; }
    • 之后在html页面中使用link标签引入，一般写在head中
      • <link rel="stylesheet" href="./css/style.css">
2、颜色的表示方法
3、CSS选择器：用来选取需要设置样式的元素

  1. 元素选择器

  2. id选择器

  3. 类选择器


    优先级： id选择器>类选择器>元素选择器

4、span标签
  • span标签是一个在开发网页时会大量使用到的没有语义的布局标签
  • 特点：一行可以显示多个（组合内元素），宽度和高度默认有内容撑开
5、CSS属性
  • color：设置文本的颜色
  • font-size：设置字体大大小（注意要加px）

代码

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈：新闻标题</title>
    <style>
        h1{
            color:rgb(77,79,83);
        }
        /* 元素选择器
        span{
            color: grey;
        } */
        /* 类选择器
        .cls{
            color: grey;
        } */
        /* id选择器 */
        #time{
            color: grey;
            font-size: 13px; /*设置字体的大小*/   
        }
    </style>
</head>
<body>
    <img src="img\news_logo.png" /> 新浪政务 > 正文

    <h1>焦点访谈：新闻标题</h1>

    <hr>
        <!-- span 标签是没有任何语义的，用来组合行内元素的 -->
        <!-- <span class="cls">2023年03月02日 21:50</span> <span>央视网</span>  -->
        <span id="time">2023年03月02日 21:50</span> <span>央视网</span>
    <hr>
</body>
</html>

（3）超链接

  1. 超链接
  • 标签<a>
  • 属性
    • href：指定资源访问的url
    • target：指定在何处打开资源链接
      • _self：默认值
      • _blank：在空白页打开
  1. CSS属性
  • text-decoration：规定添加到文本的修饰，none表示定义标准的文本
  • color：定义文本的颜色

代码

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈：新闻标题</title>
    <style>
        h1{
            color:rgb(77,79,83);
        }
        /* id选择器 */
        #time{
            color: grey;
            font-size: 13px; /*设置字体的大小*/   
        }
        /* 将超链接的字体仍然展示为黑色，并且去除默认的下划线 */
        a{
            color: black;
            text-decoration: none; /*设置文本为一个标准的文本*/
        }
    </style>
</head>
<body>
    <img src="img\news_logo.png" /> <a href="http://gov.sina.com.cn/" target="_self">新浪政务</a>  > 正文

    <h1>焦点访谈：新闻标题</h1>
    <hr>
    
        <span id="time">2023年03月02日 21:50</span> <span> <a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视网</a> </span>
    <hr>
</body>
</html>

2、新浪新闻正文

（1）排版

  1. 音频视频标签

  • 音频标签<audio>

  • 视频标签<video>

  1. 换行、段落标签
  • 换行标签<br>
  • 段落标签<p>
  1. 文本加粗标签
  • 文本加粗标签 <strong> <b>
  1. CSS样式
  • line-height：设置行高
  • text-indent：定义首行缩进
  • text-align：规定元素中的文本水平对齐方式
  1. 注意
  • 在HTML中无论输入多少个空格，只会显示一个。可以使用空格占位符&nbsp;

代码

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈：新闻标题</title>
    <style>
        h1{
            color:rgb(77,79,83);
        }
        /* id选择器 */
        #time{
            color: grey;
            font-size: 13px; /*设置字体的大小*/   
        }
        /* 将超链接的字体仍然展示为黑色，并且去除默认的下划线 */
        a{
            color: black;
            text-decoration: none; /*设置文本为一个标准的文本*/
        }
        /* 通过元素选择器p 为所有的段落都加上首行缩进的样式 */
        p{
            text-indent: 35px;/* 首行缩进*/
            line-height: 30px;/* 设置行高*/
        }
        /* 使用id选择器将责任编辑右对齐 */
        #plast{
            text-align: right; /* 对齐方式为右对齐*/
        }
    </style>
</head>
<body>
    <img src="img\news_logo.png" /> <a href="http://gov.sina.com.cn/" target="_self">新浪政务</a>  > 正文

    <h1>焦点访谈：新闻标题</h1>
    <hr>
    
        <span id="time">2023年03月02日 21:50</span> <span> <a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视网</a> </span>
    <hr>

    <!-- 正文 -->
    <!-- 视频 -->
    <video src="video/1.mp4" controls width="750px"></video>
    <!-- 音频 -->
    <audio src="audio/1.mp3" controls></audio>    

    <!-- 文字 -->
    <p>
    <strong>央视网消息 </strong>新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
    </p>
    <p>人勤春来早，春耕农事忙。立春之后，由南到北 </p>
    <img src="img/1.jpg" width="750px">
    <p id="plast">责任编辑：XXX</p>

</body>
</html>

（2）布局

1、盒子

  1. 盒子：页面中所有的元素（标签），都可以看做是一个盒子，有盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局

  2. 盒子模型的组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）

  3. 布局标签：实际开发网页中，会大量频繁的使用div和span这两个没有语义的布局标签

  4. 标签：<div><span>

  5. 特点

  • div 标签
    • 一行只显示一个（独占一行）
    • 宽度默认是父元素的宽度，高度默认由内容撑开
    • 可以设置宽高（width、height）
  • span 标签
    • 一行可以显示多个
    • 宽度和高度默认由内容撑开
    • 不可以设置宽高（width、height）
2、CSS属性
  • width：设置宽度
  • height：设置高度
  • border：设置边框的属性
  • padding：内边距
  • margin：外边距
  • 如果只需要设置某一个方位的边框、内边距，可以在属性名后加上 -位置，如：padding-top

最终代码

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈：新闻标题</title>
    <style>
        h1{
            color:rgb(77,79,83);
        }
        /* id选择器 */
        #time{
            color: grey;
            font-size: 13px; /*设置字体的大小*/   
        }
        /* 将超链接的字体仍然展示为黑色，并且去除默认的下划线 */
        a{
            color: black;
            text-decoration: none; /*设置文本为一个标准的文本*/
        }
        /* 通过元素选择器p 为所有的段落都加上首行缩进的样式 */
        p{
            text-indent: 35px;/* 首行缩进*/
            line-height: 30px;/* 设置行高*/
        }
        /* 使用id选择器将责任编辑右对齐 */
        #plast{
            text-align: right; /* 对齐方式为右对齐*/
        }
        #center{
            width: 65%;
            /* margin: 0 17.5% 0 17.5%;上右下左 */
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="center">
        <img src="img\news_logo.png" /> <a href="http://gov.sina.com.cn/" target="_self">新浪政务</a>  > 正文

        <h1>焦点访谈：新闻标题</h1>
        <hr>
        
            <span id="time">2023年03月02日 21:50</span> <span> <a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视网</a> </span>
        <hr>

        <!-- 正文 -->
        <!-- 视频 -->
        <video src="video/1.mp4" controls width="850px"></video>
        <!-- 音频 -->
        <!-- <audio src="audio/1.mp3" controls></audio>     -->

        <!-- 文字 -->
        <p>
        <strong>央视网消息 </strong>新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
        </p>
        <p>人勤春来早，春耕农事忙。立春之后，由南到北 </p>
        <img src="img/1.jpg" width="850px">
        <p id="plast">责任编辑：XXX</p>
    </div>
</body>
</html>

五、表格、表单标签

1、表格标签

  1. 场景
  • 在网页中以表格形式整齐展示数据

  1. 标签

表格练习

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格练习</title>
</head>
<body>
    <table border="1px" width="900px" cellspacing="0px">
        <tr>
            <th>标签</th>
            <th>描述</th>
            <th>属性/备注</th>
        </tr>
        <tr>
            <td> table </td>
            <td>定义表格整体</td>
            <td>
                border:规定表格边框的高度<br>
                width：规定表格的宽度<br>
                cellspacing：规定单元之间的空间
            </td>
        </tr>
        <tr>
            <td> tr </td>
            <td>定义表格的行</td>
            <td></td>
        </tr>
        <tr>
            <td>td</td>
            <td>定义表格的单元格</td>
            <td>如果是表头可以替换成th</td>
        </tr>
    </table>
</body>
</html>

结果

2、表单标签

  1. 场景
  • 在网页中主要负责数据采集功能，如 注册、登录等数据采集
  1. 标签
  • <form>
  1. 表单项：不同类型的input元素、下拉列表、文本域等
  • <input>：定义表单项，通过type属性控制输入形式
  • <select>：定义下拉列表
  • <textarea>：定义文本域
    4.属性
  • <action>：规定当提交表单时向何处发送表单数据，URL
  • <method>：规定用于发送表单数据的方式，GET、POST
    • get：在url后面拼接表单数据，比如：?username=123&age=12 url 长度有限制，默认值
    • post：在消息体（请求体）中传递的，参数大小无限制

注意：表单项必须有name属性才可以提交

表单实例

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- from表单属性： 
            action：表单提交的url，往何处提交数据，如果不指定，则默认提交到当前页面
            method：表单提交当时
                get：在url后面拼接表单数据，比如：?username=123&age=12 url 长度有限制，默认值
                post：在消息体（请求体）中传递的，参数大小无限制
            -->
    
    <form action="" method="post">
        用户名<input type="text" name="username">
        年龄<input type="text" name="age">
        <input type="submit" value="提交">
    </form>
</body>
</html>

结果

3、表单项标签

（1）表单项

  1. <input>：表单项，通过type属性控制输入形式

  2. <select>：定义下拉列表，<option>定义列表项

  3. <textarea>：文本域

表单项实例

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="" method="get">
        姓名：<input type="text" name="username"/><br><br>
        密码：<input type="text" name="password"><br><br>
        性别：<label><input type="radio" name="sex" value="1">男</label> <!-- 定义单选按钮-->
            <label><input type="radio" name="sex" value="2">女</label><br><br>
        爱好：<label><input type="checkbox" name="hobby" value="1">java</label><!--定义复选框-->
            <label><input type="checkbox" name="hobby" value="2">game</label>
            <label><input type="checkbox" name="hobby" value="3">job</label><br><br>
        图像：<input type="file" name="img"> <br><br><!--定义文件上传按钮-->
        生日：<input type="date" name="birthday"><br><br>
        时间：<input type="time" name="time"><br><br>
        日期时间：<input type="datetime-local" name="datetime"><br><br>
        邮箱：<input type="email" name="email"><br><br>
        年龄：<input type="number" name="age"><br><br>
        学历：<select name="degree" >
            <option value="">----请选择----</option>
            <option value="1">大专</option>
            <option value="2">本科</option>
            <option value="3">硕士</option>
            <option value="4">博士</option>
        </select><br><br>
        描述：<textarea name="description"  cols="30" rows="10"></textarea><br><br>
        <input type="hidden" name="id" value="1">
        <!-- 表单常见按钮 -->
        <input type="submit" value="提交">
        <input type="reset" value="重置">
        <input type="button" value="按钮">
    </form>
</body>
</html>
相关推荐
敲代码的彭于晏6 分钟前
前端上传与下载基础：Blob、File与ArrayBuffer详解
前端
緑水長流11 分钟前
什么是Promise？什么是async和await？
前端·javascript·vue.js
Mintopia12 分钟前
Three.js 相机（Camera）的使用详解
前端·javascript·three.js
wordbaby15 分钟前
PC 屏幕自适应的流行方案解析
前端
Mintopia15 分钟前
Node.js 中path模块的深度解析与实战应用
前端·javascript·node.js
程序员小续16 分钟前
git rebase 和git merge使用及区别
前端·git·后端
静待一世花开17 分钟前
React基础学习
前端
华科云商xiao徐18 分钟前
使用Scrapy编写图像下载程序示例
前端
WillaWang18 分钟前
html结构中图片下方的间隙
前端
阿笑带你学前端19 分钟前
从0到1：我用Flutter造了个全平台IPTV神器，从此看直播不再"精神分裂"！
前端·flutter
热门推荐
01蓝桥杯真题演练：2023B组c/c++02我决定放弃搞 Java 了03如何在WPS和Word/Excel中直接使用DeepSeek功能04DeepSeek RAGFlow构建本地知识库系统05RAG 实践- Ollama+RagFlow 部署本地知识库06DeepSeek各版本说明与优缺点分析07门票问题(c++题解)08汽车上的各种质量：整备质量、总质量、装载质量、簧上质量、簧下质量09从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑10生活电子常识--删除谷歌浏览器搜索记录