HTML&CSS

已于 2024-05-08 19:02:42 修改
阅读量1k 收藏 33
点赞数 27
分类专栏： 前端 文章标签： css 前端 html
于 2024-04-24 21:53:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69266818/article/details/138170684
版权
本文介绍了HTML的基本概念、标签使用、结构元素（如标题、字体、链接、列表、表格等）、CSS的基础样式设置（包括内联样式、选择器、盒子模型等），以及如何创建简单的网页表单。
摘要由CSDN通过智能技术生成

HTML

介绍

HTML是一门语言，所有的网页都是用HTML这门语言编写出来的
HyperText Markup Language 超文本标记语言
超文本：超越文本的限制，除了文字信息，还可以定义图片，音频，视频等内容
标记语言：由标签构成的语言
HTML运行在浏览器上，标签是由浏览器来解析，不需要编译
HTML标签都是预定义好的
在任何地方都可以创建html文件，后缀名是.htm或.html
W3C标准：网页主要由三部分组成：

  • 结构：HTML 人的骨骼
  • 表现：CSS 化妆师
  • 行为：JavaScript 唱跳rap

结构标签

标签描述
<html>定义HTML文档
<head>定义文档的信息
<title>定义文档的标题
<body>定义文档的主体

HTML标签不区分大小写
HTML标签属性值单双引皆可

基础标签

标签描述
<h1>~<h6>定义标题，h1最大，h6最小
<font>
color，size，face		定义文本的字体，字体尺寸，字体颜色
颜色也能用十六进制表示
<b>加粗
<i>倾斜
<u>文本下划线
<center>文本居中
<p>段落
<br>换行
<hr>水平线

转义字符
Snipaste_2024-04-24_17-30-18.png

图片，音频，视频标签

标签描述
<img>图片
<audio>音频
<video>视频
  • img：定义图片
    • src：规定图片的url
    • height：图片的高度 单位是px(默认)像素，也可以%表示
    • width：图片的宽度
  • audio：音频 支持的音频的格式：MP3,WAV,OGG
    • src：音频的url
    • controls：显示播放控件
  • video：视频 支持的音频格式：MP4,WebM,OGG
    • src：视频的url
    • controls：显示播放控件

注：

  1. src引入的路径不能是本地的路径
  2. 对于video和audio必须书写播放控件属性controls

超链接标签

标签描述
<a>定义超链接，用于链接到另一个资源
  • href：指定访问资源的url
  • target：指定打开资源的方式
    • _self：默认值，在当前页面打开
    • _blank：在空白页面打开

列表标签

标签描述
<ol>有序列表
<ul>无序列表
<li>列表项
  • 有序列表标签 order list
    • type：默认值为1，然后标签li依次递增
    • type属性值：1，A，a，i，I
  • 无序列表标签 unorder list
    • type属性值：cirecle 空心圆
    • square 实心方形; disc 实心圆(默认的)

表格标签

标签描述
<table>定义表格
<tr>定义行
<td>定义单元格
<th>定义表头单元格
  • table：定义表格
    • border：定义表格边框的宽度
    • width：规定表格的宽度
    • cellspacing：规定单元格之间的空白
  • tr：定义行
    • align：定义表格行的内容对齐方式
  • td：定义单元格
    • rowspan：规定单元格可横跨的行数
    • colspan：规定单元格可横跨的列数

布局标签

标签描述
<div>定义HTML文档中的一个区域部分
<span>用于组合行内

表单标签

标签描述
<form>定义表单
<input>定义表单项，通过type属性控制输入形式
<label>为表单项定义标注
<select>定义下拉列表
<option>定义下拉列表的列表项
<textarea>定义文本域
  • form：定义表单
    • action：规定当提交表单时向何处发送表单数据，url
    • method：规定用于发送表单数据的方式
      • get： http://www.jd.com?username=&password=1234(默认方式)
        1. 不安全
        2. 有大小限制
        3. 只能传输字符数据，传输格式：url?name=value&user=value
      • post：http://www.jd.com
        1. 安全
        2. 没有大小限制
        3. 可以传输任意数据

注：所有收集的数据必须放到form标签文本中

  • input：表单项，通过type属性控制输入形式
    • radio表示单选按钮，只能选择一个，通过name属性保证单选效果，要求name属性值必须一致
    • checkbox表示多选框或复用框
    • 如果单选框和复选框被选中，那么需要给input标签加checked属性
    • hidden用户在页面看不到，其实在页面是存在的，场景就是：某种需求不需要给用户看，但是后台服务器需要数据，就可以将数据放到隐藏域的标签中

Snipaste_2024-04-24_20-24-52.png

  • select ：下拉列表
    • 需要结合子标签option一起使用，有几个下拉项就有几个option
    • 提交到后台的数据是用户当前选择的下拉项的option的value的值
    • option的属性selected表示当前下拉项被选中
  • textarea：由行和列组成
    • cols：列
    • rows：行

查阅文档

  1. 百度：百度一下
  2. W3C：w3c
  3. MDN:mdn

CSS

介绍

Cascading Style Sheet：层叠样式表
是一门语言，控制网页表现

导入方式

  1. 内联样式：在内部使用style属性，属性值是css属性键值对

Snipaste_2024-04-24_21-27-54.png

  1. 内部样式：定义

Snipaste_2024-04-24_21-28-13.png

  1. 外部样式：定义link标签，引入外部的css文件

Snipaste_2024-04-24_21-30-31.png
2和3是在head标签中书写

选择器

  1. 元素选择器
  2. id选择器
  3. 类选择器

Snipaste_2024-04-24_21-32-45.png
在css文件中书写单位不能省略

盒子模型

我们可以把每一个标签都看成是一个盒子，每个盒子都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。而盒子模型的组成跟我们生活中也是一样的：例如在淘宝上买东西，我们的商品和快递盒子之间可能是有距离的。而快递盒子之间也可能是有距离的。
Snipaste_2024-04-25_16-58-32.png
说明：
1）元素的内容相当于快递盒子中的东西。内边距padding相当于盒子和东西之间的空隙。边框border相当于盒子的边框。外边距margin相当于当前盒子和其他快递盒子之间的距离。
2）能够影响当前某一个盒子的大小主要是：元素的内容、内边距padding、边框border。而外边距margin不会影响当前盒子的大小。
3）外边距影响在页面中的位置
Snipaste_2024-04-25_17-09-28.png

属性

可以查阅https://www.w3school.com.cn/h.asp
Snipaste_2024-04-24_21-45-11.png
Snipaste_2024-04-24_21-45-25.png

<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">

<head>
    <!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
    <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</title>
</head>

<body>
    <!-- 
        1.border属性：表示边框
            1)border-width: 10px 边框的宽度是10px
            2)border-style: dashed; 边框的样式   dashed 虚线  solid 实线
            3）border-color: blue; 边框颜色
        2.border:red solid 5px 是border-width: 10px;border-style: dashed;border-color: blue;的简写
     -->
     <div style="border:red solid 5px  ;background-color: aqua">div1</div>
     <!-- <div style="border-width: 10px;border-style: dashed;border-color: blue;">div1</div> -->

    <!--
      css的属性：display,属性值如下：
        none	此元素不会被显示。
        block	此元素将显示为块级元素，此元素前后会带有换行符。将行内标签变为块级标签
        inline	默认。此元素会被显示为内联元素，元素前后没有换行符。将块级标签变为行内标签
    -->
    <div style="display: none;">张三</div>
    <div style="display: block;">李四</div>
    <!-- 将块级标签变为行内标签 -->
    <div style="display: inline;">王五</div>


    <!-- 将行内标签变为块级标签 -->
    <span style="display: block;">哈哈</span>
    <span>呵呵</span>

</body>

</html>
@Zeal
关注
  • 27
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML & CSS 概述_1
qq_45370222的博客
04-10 3149
HTML & CSS 笔记_1
HTML&CSS登录界面及讲解
weixin_54627824的博客
04-20 1万+
PS:该源码非原创，原文章来自(2条消息) HTML+CSS登录界面_桐艾的博客-CSDN博客_登录页面 这里只做源码讲解 页面效果如下： 首先是login.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录</title> <link rel="stylesheet" href="./login.css"/>...
使用HTML&CSS创建一个网页课程表
热门推荐
qq_45915712的博客
11-05 1万+
使用HTML&CSS创建一个网页课程表整体布局加入表头数据合并上下单元格并加入课表信息美化页面最终效果 整体布局 对于课程表，其实就是一个表格，其中加入CSS样式。 因此，我们先创建一个九行八列的表格（以我的课表为例）。 <table border="1"> <tr> <td> </td> <td> </td> <td> </td> <td> </t
使用 HTML & CSS 编辑静态网页
weixin_60808029的博客
03-14 5992
文章目录一、HTML 概念概述二、HTML 语法使用说明三、CSS 概念概述四、CSS 中的选择器和属性 一、HTML 概念概述 HTML 是最基础的网页开发语言。是 Hyper Text Markup Language（超文本标记语言）的缩写，是一种用于创建网页的标准标记语言。 超文本 是指用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。 标记语言 是指由标签构成的语言。语法格式：<标签名称>。标记语言不是编程语言，是没有任何逻辑性的。 html文档后缀名 .html 或者.
html&css实现按钮图标样式
weixin_49596018的博客
08-30 2519
页面中按钮效果的实现 样式一：实心圆 HTML代码： css代码 样式二：圆环 html代码：
HTML & CSS设计与构建网站 完整中文版带目录.pdf
09-06
HTML & CSS设计与构建网站 完整中文版带目录.pdf 个人收集电子书，仅用学习使用，不可用于商业用途，如有版权问题，请联系删除！ 前言 v 第1章　结构 1 第2章　文本 29 第3章　列表 51 第4章　链接 63 第5章　图像 ...
HTML&CSS;设计与构建网站.zip
08-02
HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是网页开发的基石，它们共同决定了网页的结构和样式。本资源“HTML&CSS设计与构建网站”是一份全面的学习资料，旨在帮助用户深入理解和掌握这两项...
HTML&CSS 设计与构建网站_PDF电子书下载 带书签目录 完整版
09-12
HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是网页设计的基石，它们共同决定了网页的结构和外观。HTML是用于创建网页内容的标记语言，而CSS则负责定义这些内容的样式和布局。 HTML的基础...
HTML&CSS的思维导图笔记
04-12
HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是前端开发的基石，用于构建和呈现网页内容。这份“HTML&CSS的思维导图笔记”无疑是对这两个核心技术的全面梳理，对于初学者和进阶者都是极好的...
HTML&CSS; design and build websites.rar
01-10
HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是构建网页和网站的两个核心技术。HTML负责页面的内容结构，而CSS则负责页面的样式和布局。它们一起工作，为用户提供了丰富的视觉体验和易读的...
Web开发：四角线框效果（HTML、CSS、JavaScript）
m0_65029152的博客
07-17 905
本文主要记录前端给图片动态添加四角线框的相关内容和实现过程；
CSS 技巧与案例详解：开篇介绍
粉丝们务必加入微信粉丝群
07-14 4407
本系列文章分为多个部分，每个部分都详细解析了CSS的各种实用技巧和经典案例。CSS 单位速查表 & 自定义引用标记 & 重置所有样式：了解常见CSS单位，并学习如何创建自定义的引用标记和重置样式表。隐藏空元素 & 完美的嵌套边框圆角 & 排版比例基础知识：掌握隐藏元素的方法，实现嵌套圆角边框，以及排版比例的基本概念。自定义文本选择 & 流式排版：定制文本选择的样式，探索流式排版的奥秘。为什么line-height是无单位的 & 兄弟元素淡出效果 & 蚀刻文字效果。
CSS实现从上往下过渡效果
Rverdoser的博客
07-18 221
属性改变时（即鼠标悬停时），它会在0.5秒内完成平滑的从上往下移动50像素的变化。要在CSS中实现一个从上往下的过渡效果，你可以使用。类定义了一个方框，并指定了一个过渡效果，使得当。
css性能优化的方法
最新发布
jht_520的博客
07-21 151
避免使用过多的动画和过渡效果：过多的动画和过渡效果会占用更多的 CPU 和内存资源，降低性能。以上是一些常见的 CSS 性能优化方法，具体的优化策略和技巧还需要根据具体的项目和需求来确定。避免嵌套和选择器冗余：尽量避免使用过多的嵌套和冗余的选择器，这会增加解析和匹配的时间。使用标准字体：使用浏览器默认的字体，而不是使用自定义字体文件，可以减少请求和文件大小。），会消耗更多的性能。避免使用昂贵的选择器：某些选择器，如后代选择器和通用选择器（使用缩写和简写属性：尽量使用简写属性来减少代码量，例如使用。
Web前端-Web开发CSS基础7-网格
a15735748145a的博客
07-17 766
22. 在网格容器中，设置grid-template-areas: 'header header header header' 'left left right right' 'left left right right' 'footer footer footer footer'19. 在网格容器中，设置grid-template-areas: 'header header header' 'main main main' 'footer footer footer'grid-row-start: 2;
【CSS in Depth 2 精译_019】3.2 CSS 的盒模型
PeacefulWinter的博客
07-18 1420
本篇为《CSS in Depth》全新第二版第3.2小节内容，主要介绍了盒模型的相关概念及注意事项，并对第一版内容上做了大幅更新。建议基础薄弱的朋友先收藏起来，再跟着书中示例慢慢学习体会盒模型的用法。
前端学习（二）之HTML
2302_79795489的博客
07-18 928
在<input type="text" name="username" value="西瓜大侠">中，2、单选和多选：radio和checkbox（对应value为选项的值，当选中时，这个值会被提交）3、按钮：button、submit和reset（对应value为按钮上的标签文本）4、隐藏字段：hidden（对应value为隐藏在表单中的用户不可见的数值）段落格式标签：加粗b，斜体i，下划线u，删除线s，换行br，水平分割线hr。1、name：给表单控件起的名字，服务器靠这个名字来识别和获取输入的数据。
CSS基础学习之元素定位（6）
07-17 643
属性用于指定一个元素在文档中的定位方式。和属性则决定了该元素的最终位置。
只用 CSS 能玩出什么花样？
艾恩小灰灰的博客
07-17 1099
CSS 的潜力远远超出了日常布局和样式的范畴。通过巧妙运用其功能，我们不仅能够构建美观且功能性的网站，还能创造出令人赞叹的视觉艺术。从基本形状到复杂的动画，CSS 提供了无尽的可能性，等待着每一位前端开发者去探索和实现。以上代码示例展示了 CSS 的部分能力，但真正的乐趣在于实验和创造。所以，拿起你的代码编辑器，开始探索 CSS 的无限可能性吧！
W3School HTML&CSS教程：入门与基本标签详解
本篇HTML & CSS教程深入介绍了HTML（HyperText Markup Language，超文本标记语言）的基础概念以及其在网页构建中的关键作用。HTML并非一种编程语言，而是用于描述网页结构的标记语言，它通过一系列标记标签（如`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@Zeal

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值