HTML、CSS

初识web前端

web标准

  • Web标准也称为网页标准,由一系列的标准组成,大部分由W3C (World Wide Web Consortium,万维网联盟) 负责制定。
  • 三个组成部分:
    • HTML: 负责网页的结构(页面元素和内容)。
    • CSS: 负责网页的表现(页面元素的外观、位置等页面样式,如: 颜色、大小等)。
    • Javascript: 负责网页的行为(交互效果)。

什么是HTML、CSS?

HTML

HTML (HyperTextMarkupLanguage): 超文本标记语言。

  • 超文本: 超越了文本的限制,比普通文本更强大。除了文字信息,还可以定义图片、音频、视频等内容。

  • 标记语言: 由标签构成的语言

    • HTML标签都是预定义 好的。例如: 使用<a>展示超链接,使用<img>展示图片,<video>展示视频。
    • HTML代码直接在浏览器中运行,HTML标签由浏览器解析。

    标签搜索地址

标题标签

  • 标签:<h1>...</h1> (h1-> h6 重要程度依次降低)
  • 注意:HTML 标签都是预定义好的,不能自己随意定义。

水平线标签

<hr>

图片标签

<img src="..." width="..." height="...">

  • 绝对路径:绝对磁盘路径 D:/xxxx,绝对网络路径 https://xxxx
  • 相对路径:从当前文件开始查找。./:当前目录,../:上级目录

<span> 标签

  • 是一个在开发网页时大量会用到的没有语义的布局标签
  • 特点: 一行可以显示多个(组合行内元素),宽度和高度默认由内容撑开

视频标签

<video>

  • src : 规定视频的 url
  • controls : 显示播放控件
  • width : 播放器的宽度
  • height : 播放器的高度

音频标签

<audio>

  • src : 规定音频的 url
  • controls : 显示播放控件

段落标签

<p>

文本加粗标签

<b> / <strong>

表格标签

  • 场景:在网页中以表格(行、列)形式整齐展示数据,如: 班级表。

  • 标签:

表单标签

  • 场景:在网页中主要负责数据采集功能,如 注册、登录等数据采集。

  • 标签:<form>

    表单项

    不同类型的 input 元素、下拉列表、文本域等。

    <input>: 定义表单项,通过type属性控制输入形式。

    <select>: 定义下拉列表。

    <textarea>: 定义文本域。

  • 属性:
    <action>: 当提交表单时向何处发送表单数据,表单数据提交的URL地址。

    <method>: 发送表单数据的方式。

    • GET: 表单数据拼接在url后面,?username=java,大小有限制。

    • POST:表单数据在请求体中携带,大小没有限制

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

  • HTML结构标签

    html 复制代码
    <html>
    	<head>
    		<title>标题</title>
    	</head>
    	<body>
    	
    	</body>
    </html>
  • 特点

    • HTML标签不区分大小写
    • HTML标签属性值单双引号都可以
    • HTML语法松散
  • 注意

    • 在HTML中无论输入多少个空格,只会显示一个。可以使用空格占位符:&nbsp

例子:

01.新浪新闻-标题-排版.html :

html 复制代码
<!-- 文档类型为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.绝对磁盘路径:D:\Users\liuxu\HTML\img\news_logo.png
                <img src="D:\Users\liuxu\HTML\img\news_logo.png">
            2.绝对网络路径:https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png
                <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png">
        相对路径:
            ./:当前目录,./可以省略
                <img src="./img/news_logo.png">或 <img src="img/news_logo.png">
            ../:上一级目录
        -->
    <img src="img/news_logo.png" width="160px"> 新浪 > 正文
    <h1>焦点访谈</h1>
    <hr>
    2023年03月02日 21:50 新浪网
    <hr>
</body>
</html>

超链接

  • 标签:<a href="..." target="...">新浪网</a>
  • 属性:
    • href : 指定资源访问的 url
    • target : 指定在何处打开资源链接
    • _self : 默认值,在当前页面打开
    • blank : 在新的空白页面打开

例子:

04.新浪新闻-标题-超链接.html :

html 复制代码
<!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: #4e4f53;
        }
        #time {
                color: #8a8a8a;
        }
        a {
                color:black;  
                text-decoration: none;  /* 设置文本为一个标准的文本 */
        }
     </style>
</head>
<body>
    <img src="img/news_logo.png" width="160px"> <a href="https://gov.sina.com.cn/" target="_self">新浪</a> > 正文
    <h1>焦点访谈</h1>
    <hr>
    <span class="cls" id="time">2023年03月02日</span>    
    <span class="cls">21:50 <a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">新浪网</a></span>       
    <hr>
</body>
</html>

CSS

CSS (Cascading Style Sheet): 层叠样式表,用于控制页面的样式(表现)。

CSS 引入方式

  • 行内样式: 写在标签的style属性中(不推荐)
  • 内嵌样式: 写在style标签中(可以写在页面任何位置,但通常约定写在head标签中)
  • 外联样式: 写在一个单独的.css文件中(需要通过 link标签在网页中引入)

颜色表示方式

例子:

02.新浪新闻-标题-样式1.html :

html 复制代码
<!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: #4e4f53;
        }
     </style>
     <!-- 方式三:外联样式 -->
    <!-- <link rel="stylesheet" href="./css/news.css" -->
</head>
<body>
    <img src="img/news_logo.png" width="160px"> 新浪 > 正文
    <!-- 方式一:行内样式 -->
    <!-- <h1 style="color:rgb(77, 79, 83);">焦点访谈</h1> -->
    <h1>焦点访谈</h1>
    <hr>
    2023年03月02日 21:50 新浪网
    <hr>
</body>
</html>

new.css:

css 复制代码
h1 {
    color: #4e4f53;
}

CSS 选择器:用来选取需要设置样式的元素(标签)

三种选择器的优先级:id 选择器 > 类选择器 > 元素选择器

  • 元素选择器

  • id 选择器

  • 类选择器

CSS 属性

  • color : 设置文本的颜色
  • font-size : 字体大小 (注意:记得加 px)
  • text-decoration : 规定添加到文本的修饰,none表示定义标准的文本。

CSS 样式

  • line-height : 设置行高
  • text-indent : 定义第一个行内容的缩进
  • text-align : 规定元素中的文本的水平对齐方式

例子:

03.新浪新闻-标题-样式2.html :

html 复制代码
<!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: #4e4f53;
        }
        /* 元素选择器 */
        /* span {
                color: #8a8a8a;
        } */
        /* 类选择器 */
        /* .cls {
                color: #8a8a8a;
        } */
        /* id 选择器 */
        #time {
                color: #8a8a8a;
                font-size: 13px; /* 设置字体大小 */
        }
     </style>
</head>
<body>
    <img src="img/news_logo.png" width="160px"> 新浪 > 正文
    <h1>焦点访谈</h1>
    <hr>
    <span class="cls" id="time">2023年03月02日</span>    
    <span class="cls">21:50 新浪网</span>       
    <hr>
</body>
</html>

页面布局

  • 盒子 : 页面中所有的元素(标签),都可以看做是一个盒子,由盒子将页面中的元素包含在一个矩形区域内,通过盒子的视角更方便的进行页面布局。

  • 盒子模型组成 : 内容区域(content),内边距区域(padding),边框区域(border),外边距区域(margin)。

  • 标签 : <div> <span>

  • 特点 :

    • div 标签 :

      • 一行只显示一个(独占一行)
      • 宽度默认是父元素的宽度,高度默认由内容撑开
      • 可以设置宽高(width、height)
    • span 标签 :

      • 一行可以显示多个
      • 宽度和高度默认由内容撑开
      • 不可以设置宽高(width、height)

      注意 : 如果只需要设置某一个方位的边框、内边距、外边距,可以在属性名后加上 - 位置,如: padding-top、padding-left、padding-right .

例子:

06.新浪新闻-正文-布局.html :

html 复制代码
<!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: #4e4f53;
        }
        #time {
                color: #8a8a8a;
        }
        a {
                color:black;  
                text-decoration: none; 
        }
        p {
                text-indent: 35px; /* 设置首行缩进 */
                line-height: 40px; /* 设置行高 */
        }
        #plast{
                color: #8a8a8a;
                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" width="160px"> <a href="https://gov.sina.com.cn/" target="_self">新浪</a> > 正文
    <h1>焦点访谈</h1>
    <hr>
    <span class="cls" id="time">2023年03月02日</span>    
    <span class="cls">21:50 <a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">新浪网</a></span>       
    <hr>
    <!-- 正文 -->
     <!-- 视频 -->
    <video src="video/news.mp4" controls width="950px"></video>
     <!-- 音频 -->
        <!-- <audio src="audio/news.m4a" controls ></audio> -->
    <p>
        <b>新浪网消息</b>(焦点访谈):我们把饭碗牢牢端在自己手中,连续八年1.3万亿斤,这个沉甸甸的数据是如何取得的呢?
    </p>
    <p>
        人勤春来早,春耕农事忙。立春之后,由南到北,春天的田野处处生机盎然。
    </p>
    <img src="img/1.jpg" width="950px">
    <p>
        今年,人均粮食占有量始终稳稳高于国际公认的400公斤粮食安全线。从十年前的约12200亿斤到2022年的约13700亿斤,粮食产量提高了1500亿斤。
    </p>
    <img src="img/2.jpg" width="950px">
    <p>
       在极端天气事件多发、频发的情况下取得的,是在从事农业生产的人口减少的条件下取得的。
    </p>
    <img src="img/3.jpg" width="680px">
    <p>
        叶兴庆:"要实现这样一个目标,确保产能,适度进口,科技支撑。"
    </p>
    <p id="plast">
        责任编辑:王树淼 SN242
    </p>
    </div>
</body>
</html>

07.HTML-表单项标签.html :

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML-表单</title>
</head>
<body>
    <form action="" method="post">
        姓名:<input type="text" name="name"><br><br>
        密码:<input type="password" name="password"><br><br>
        性别:<label><input type="radio" name="gender" value="1">男</label>
              <label><input type="radio" name="gender" value="2">女</label><br><br>
        爱好:<label><input type="checkbox" name="hobby" value="java">java</label>
              <label><input type="checkbox" name="hobby" value="game">game</label>
              <label><input type="checkbox" name="hobby" value="sing">sing</label><br><br>
        图像:<input type="file" name="image"><br><br>
        生日:<input type="date" name="birthday"><br><br>
        日期时间:<input type="datetime-local" name="datetime"><br><br>
        邮箱:<input type="email" name="email"><br><br>
        年龄:<input type="text" 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="button" value="按钮">
        <input type="reset" value="重置">
        <input type="submit" value="提交">
        <br>
    </form>
</body>
</html> 
相关推荐
安之若素^10 分钟前
启用不安全的HTTP方法
java·开发语言
ruanjiananquan9916 分钟前
c,c++语言的栈内存、堆内存及任意读写内存
java·c语言·c++
chuanauc43 分钟前
Kubernets K8s 学习
java·学习·kubernetes
一头生产的驴1 小时前
java整合itext pdf实现自定义PDF文件格式导出
java·spring boot·pdf·itextpdf
YuTaoShao1 小时前
【LeetCode 热题 100】73. 矩阵置零——(解法二)空间复杂度 O(1)
java·算法·leetcode·矩阵
zzywxc7871 小时前
AI 正在深度重构软件开发的底层逻辑和全生命周期,从技术演进、流程重构和未来趋势三个维度进行系统性分析
java·大数据·开发语言·人工智能·spring
YuTaoShao3 小时前
【LeetCode 热题 100】56. 合并区间——排序+遍历
java·算法·leetcode·职场和发展
程序员张33 小时前
SpringBoot计时一次请求耗时
java·spring boot·后端
llwszx6 小时前
深入理解Java锁原理(一):偏向锁的设计原理与性能优化
java·spring··偏向锁
云泽野7 小时前
【Java|集合类】list遍历的6种方式
java·python·list