web前端与html

最新推荐文章于 2024-08-08 23:04:40 发布
最新推荐文章于 2024-08-08 23:04:40 发布
阅读量94 收藏
点赞数
文章标签： 前端 html javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65435794/article/details/132630049
版权

web前端与html

web前端

万维网（World Wide Web），通常称为web，是一个信息系，可以通过Internet 访问文档和其他的网络资源，

什么是前端开发

Web前端开发是通过使用HTML、CSS和JavaScript开发网站的图形用户界面，以便用户可以查看该网站并与之交互。

HTML：超文本标记语言 (HyperText Markup Language) 是编写网页内容的标准语言，是任何网站开发过程的支柱。HTML定义了网页的内容和结构，HTML文件扩展名为 .html。

CSS： 层叠样式表（Cascading Style Sheets），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言。CSS 文件扩展名为 .css。

JavaScript：JavaScript (JS) 是一种轻量级、解释型或即时编译型的编程语言，它是最著名的网页脚本语言，主要用于为HTML页面提供动态效果，并实现用户与页面的交互。

HTML

HTML（超文本标记语言）是编写在Web浏览器中显示的文档的标准标记语言。

//html的基本结构
<!DOCTYPE HTML>
<html>
    <head>
        <tiltle></tiltle>
    </head>
    <body>
    </body>
</html>

HTML的基本标签

HTML标签

整个网页是从< html>这里开始的，然后到</ html>结束。

head标签

head标签代表页面的“头”，定义一些特殊内容，

< head>内部标签

内部标签说明
title定义网页的标题
m eta定义网页的基本信息（供搜索引擎）
style定义CSS样式
link链接外部CSS文件或脚本文件
script定义脚本语言
base定义页面所有链接的基础定位（用得很少）
body标签

body标签代表页面的“身”，定义网页展示内容，

段落标签

标签语义说明
h1~h6header标题
pparagraph段落
brbreak换行
hrhorizontal rule水平线
divdivision分割（块元素）
spanspan区域（行内元素）

文本格式化标签

标签语义说明
strongstrong（加强）加粗
ememphasized（强调）斜体
citecite（引用）斜体
supsuperscripted（上标）上标
subsubscripted（下标）下标

块元素和行内元素

HTML元素根据浏览器表现形式分为两类：①块元素；②行内元素；

块元素特点：

（1）独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素；
（2）块元素内部可以容纳其他块元素或行元素；
常见块元素有：h1~h6、p、hr、div等。

行内元素特点：

  • 可以与其他行内元素位于同一行；

  • 行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果；

  • 常见行内元素有：strong、em、span等。

标签的语意

div division 分割（块元素）
span span 区域（行内元素）
p paragraph 段落
ol ordered list 有序列表
ul unordered list 无序列表
li list item 列表项
dl definition list 定义列表
dt definition term 定义术语
dd definition description 定义描述
h1~h6 header1 ~header6 标题1~标题6
hr horizontal rule 水平线
a anchor 锚点，超链接
strong strong 强调（粗体）
em emphasized 强调（斜体）
sup superscripted 上标
sub subscripted 下标
br break 换行
fieldset fieldset 域集
legend legend 图例
caption caption （表格、图像等）标题
thead table head 表头
tbody table body 表身
tfoot table foot 表脚
th table header 表头单元格
td td 表身单元格

列表

olordered list有序列表
ulunordered list无序列表
dldefinition list定义列表

表格

tabletable（表格）表格
trtable row（表格行）行
tdtable data cell（表格单元格）单元格
<table>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
</table>

和
标记着表格的开始和结束，和标记着行的开始和结束，在表格中包含几组就表示该表格为几行。和标记着单元格的开始和结束。

图像标签

属性说明
src图像的文件地址
alt图片显示不出来时的提示文字
title鼠标移到图片上的提示文字

链接

target属性值说明
_self默认方式，即在当前窗口打开链接
_blank在一个全新的空白窗口中打开链接
_top在顶层框架中打开链接
_parent在当前框架的上一层里打开链接

HTML5

1、文档类型说明

基于HTML 5设计准则中的“化繁为简”原则，页面的文档类型<!DOCTYPE>被极大地 简化了。

2、标签不再区分大小写

上面这种写法也是完全符合HTML5规范的。但是在实际开发中，建议所有标签以及属 性都采用小写方式。

3、允许属性值不加引号

学习html5

上面这种写法也是完全符合HTML5规范的。但是在实际开发中，建议标签所有属性值 都加引号，单引号或双引号都可以。

  • checked
  • checked=“nchecked"
  • readonly
  • readonly=“readonly”
  • defer
  • defer=“defer”
  • ismap
  • ismap=“ismap”
  • nohref
  • nohref=“nohref”
  • noshade
  • noshade=“noshade”
  • nowrap
  • nowrap=“nowrap”
  • selected
  • selected=“selected”
  • disabled
  • ciisabled=“disableci”
  • multiple
  • multiple=“multiple”
  • noresize noresize=“disabled”

div和span

(1 ) div是块元素，可以包含任何块元素和行内元素，不会与其他元素位于同一行；span 是行内元素，可以与其他行内元素位于同一行。

(2 ) div常用于页面中较大块的结构划分，然后配合CSS来操作；span 一般用来包含文字等, 它没有结构的意义，纯粹是应用样式。当其他行内元素都不适合的时候，可以用span来配合CSS 操作。

其实，除了 div和span外，还有一个label标签。div和span是无语义标签，但label 是有语义标签。label 只适用于表单中，用于显示在输入控件旁边的说明性文字。
在这里插入图片描述

CSS基础

CSS（Cascading Style Sheets，中文称为层叠样式表）是一种样式表语言，主要用于描述HTML的文档的样式。CSS是Web前端开发的重要技术，与HTML和JavaScript并列。

CSS的添加方式及相应语法

内联：在标签的style属性中添加样式代码，仅对当前标签有效，不能复用。

内部：在里添加style标签，标签体内写样式代码，可以在当前页面范围复用。

外部样式表：在单独的CSS样式文件中写样式代码，在HTML页面中通过link标签引入。这种方式可以将HTML代码和CSS样式代码分离开，并且实现多页面复用

CSS的作用

  • 提高内容的可读性和可维护性
  • 使多个网页能够共享格式
  • 在不同设备上应用不同的样式来展示相同的页面内容

CSS选择器

当HTML内容和表示样式分离之后，需要有一种方法实现HTML内容和表示样式的关联，CSS选择器就是这种方法。

在CSS中，选择器是一种用于选择要应用样式的HTML元素的模式。CSS选择器可以分为基础选择器和扩展选择器两类，

CSS基础选择器

1、标签名选择器：匹配页面中所有同名标签
标签名 { 样式代码 }
2、id选择器: 当需要选择页面中某一个元素时使用，需要为该HTML标签添加id属性
#id { 样式代码 }
3、类选择器：当需要选择多个不相干的元素的时使用，需要目标HTML添加class属性
.className { 样式代码 }
4、属性选择器：通过HTML标签的属性来选择元素
标签名[属性名=‘值’] { 样式代码 }

CSS扩展选择器

1、分组选择器：将多个选择器用逗号分隔，合并成一个选择器

  • div, #id, .class { 样式代码 }

2、后代选择器：通过元素之间的层级关系选择元素

  • body div div p { 样式代码 }
  • 匹配的是body里面的div里面的div里面的所有p (包含后代)

3、子元素选择器：通过元素之间的层级关系选择元素

  • body > div > div > p {样式代码}
  • 匹配的是body里面的div里面的div里面的所有p子元素(不包含后代)
  1. 相邻兄弟选择器：通过选择器相邻兄弟关系，选择紧接在指定元素后面的同级元素。
  • h2 + p {样式代码}
  • 匹配的是h2相邻的p标签

5、伪类选择器：可以根据元素的状态进行选择，比如：未访问，访问过，悬停，点击

  • a:link { 样式代码 }
  • a:visited { 样式代码 }
  • a:hover { 样式代码 }
  • a:active { 样式代码 }

RGB色彩模式

RGB是从颜色发光的原理来设计定的，通俗点说它的颜色混合方式就好像有红、绿、蓝三盏灯，当它们的光相互叠合的时候，色彩相混，而亮度却等于三者亮度之总和，越混合亮度越高，即加法混合。

红、绿、蓝三个颜色通道每种色各分为256阶亮度，在0时“灯”最弱——是关掉的，而在255时“灯”最亮。当三色灰度数值相同时，产生不同灰度值的灰色调，即三色灰度都为0时，是最暗的黑色调；三色灰度都为255时，是最亮的白色调。

在CSS中指定颜色

CSS 中的颜色可以通过以下方法指定：

  • 十六进制颜色
  • 具有透明度的十六进制颜色
  • RGB颜色
  • RGBA颜色
  • 预定义/跨浏览器颜色名称
  • 使用 currentcolor 关键字
十六进制颜色

十六进制颜色指定方式为：#RRGGBB，其中 RR（红色）、GG（绿色）和 BB（蓝色）分别使用十六进制整数指定颜色的分量， 所有值都必须介于 00 和 FF 之间。

RGB颜色

使用 rgb() 函数指定 RGB 颜色值，其语法如下：RGB（红、绿、蓝）。

每个参数（红色、绿色和蓝色）定义颜色的强度，可以是 0 到 255 之间的整数或百分比值（从 0% 到 100%）。比如：rgb(0,0,255) 和 rgb(0%,0%,100%)定义了相同的颜色。

如果要增为颜色增加透明度，可以使用rgba(red, green, blue, alpha)的格式，alpha参数是介于0.0（完全透明）和1.0（完全不透明）之间的数字。

设置背景图片

在CSS中，常用的与设置背景图片相关的属性包括：

1、设置背景图片：background-image: url(“路径”)；

2、设置背景图片的尺寸：background-size: 200px 300px；

3、设置背景图片的重复：background-repeat: no-repeat/repeat；

4、设置背景图片的位置：background-position: 横向偏移值 纵向偏移值；

设置文本和字体的样式

  • text-align: left/right/center；设置水平对齐方式
  • font-size: 20px；设置字体大小
  • color: red；设置字体颜色
  • line-height: 20px；设置行高, 多行控制行间距, 单行控制垂直居中
  • font-family: xxx；设置字体
  • font-weight: normal/bold；设置加粗和去掉加粗
  • font-style: italic；设置斜体
  • text-decoration: overline/underline/line-through/none；文本修饰
  • text-shadow: 颜色 x偏移值 y偏移值 模糊度; 设置文本阴影
  • font: 20px xxx, xxx, xxx；设置字体大小+字体

ft/right/center；设置水平对齐方式

  • font-size: 20px；设置字体大小
  • color: red；设置字体颜色
  • line-height: 20px；设置行高, 多行控制行间距, 单行控制垂直居中
  • font-family: xxx；设置字体
  • font-weight: normal/bold；设置加粗和去掉加粗
  • font-style: italic；设置斜体
  • text-decoration: overline/underline/line-through/none；文本修饰
  • text-shadow: 颜色 x偏移值 y偏移值 模糊度; 设置文本阴影
  • font: 20px xxx, xxx, xxx；设置字体大小+字体

在这里插入图片描述

师院第一深情
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
web前端html代码,WEB前端--HTML(示例代码)
weixin_34335039的博客
06-10 4731
HTML基础一、基本概念1、简介HTML：网页超文本标记语言，不是编程语言，是描述性的标记语言。2、基本结构3、标记：html开头，表示网页文档的开始二、编写方法文档工具，如：记事本IDE三、浏览html文件1、运行效果如果用pycharm编写，不要直接运行，直接找到文件路径打开这个文件最快捷。因为pycharm直接运行是作为一个服务监听起来，比较慢。2、看源文件鼠标右键-->查看源文件HT...
web前端初级.pdf
05-23
Web 前端开发职业技能标准串讲教案初级，内共有四篇：第一篇web页面制作基础，第二篇html5和css3开发基础与应用，第三篇JavaScript程序设计，第四篇轻量级框架开发应用。
web前端开发（一）—HTML基础
热门推荐
mdxiaohu的博客
07-31 10万+
  目录 web前端简介 什么是HTML？ HTML标签 HTML基本结构 HTML 段落标签 HTML 换行标签 HTML标题 HTML 水平线 HTML注释 HTML 标签 HTML 列表标签 HTML表格 HTML超链接 HTML 图片 HTML表单 表单元素-文本、密码框 表单元素-多行文本框 表单元素-选择框 表单元素-下拉选择框 表单元素-按钮...
web前端html期末大作业实例 (1500套)
HTML网页设计
10-03 9万+
临近期末，大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等，简直让人头大。你还在为网页设计老师的作业要求感到头大？网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求, 废话不多说，直接看效果。📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确
Web前端与HTML5有什么区别，百分之八十的人分不清
xiaoxijinger的博客
11-23 3703
说到Web前端，很多人想到的就是HTML5，加上现在APP和小程序盛行，Web前端开发和HTML5开发都异常火热。外行人很容易将HTML5和Web前端划等号，那Web前端和HTML5是否一样？有些人已经搞不清了，想学习却不知道要学什么好，该怎样学习。今天小千就来详细说说Web前端和HTML5有什么区别，希望能对大家的认知有所帮助。一起来了解一下吧！ 一、什么是HTML5？ HTML5其实是一种技术的集合，它包括了HTML5，CSS3，JS等技术。而Web前端则是一种职业，国内从2005年开始发展的，是由网
Web前端 | HTML表单form
m0_61933976的博客
09-20 4142
Web前端 | HTML表单form
web前端与html5有什么区别
liuyingv8的博客
06-11 1万+
什么是html5？html5其实是一种技术的集合，它包括了html5，CSS3，JS等技术。而web前端则是一种职业，国内从2005年开始发展的，是由网页设计师演变过来的。如果从技术上说，web前端涉及到的技术有很多，包括html5，除此之外还有JSON，AJAX，DOM等。不过这也看具体的公司吧，不同的公司对WEB前端开发人员的技术要求也不一样。什么是web前端？再传统规的意义上来讲，网站是分为...
Web前端 html标签 html常用标签
qq_45830276的博客
03-22 2630
Web前端，html常用标签
web前端基础知识
qq_43375584的博客
02-28 6254
HTML&CSS基础经典版 HTML：结构（页面元素和内容） css：表现（网页元素的外观和位置等页面样式） 行为：JavaScript：行为（网页模型定义与页面交互） 排版标签 排版标签标题标签：h系列标签 重要程度依次递减 特点：独占一行、h1-h6文字逐渐减小 段落标签：p 特点：段落之间存在间隙、独占一行 换行标签： 水平分割线： 文本格式化标签 场景：让文字加粗b strong、下划线u ins、倾斜i em、删除线s del等 语义：突出重要
Web前端开发概述
weixin_57813136的博客
09-04 1908
它拥有着独特的选择器、链式操作、事件处理机制和封装，以及完善的异步JavaScript和XML ( Asynchronous JavaScript and XML ，Ajax )，这些都是其他JavaScript库所望尘莫及的。Web（World Wide Web，全球广域网）是指一种基于互联网的信息系统，通过超文本链接将全球各地的文档、图像、视频等资源相互关联起来，并通过Web浏览器进行交互浏览和访问。它由协议、主机名、路径和可能的查询参数组成，可以通过浏览器访问和获取特定的资源。
【Web前端】怎样用记事本写一个简单的网页-html
成长之路
07-05 2万+
EditPlus: 简单起见，接下来就使用记事本来编写我们的网页。 3. 更丰富一点 标签 功能 < !doctype html > 标识文件的语言标准，这里指的是html5 < title > 网页的标题，即浏览器中页面的名字 < h1 > 一级标题 < p > 一个段落的开始 下面是新的网页：🌎我们的第一个网页讲到这里就讲完啦。 🌏那博主在这里求个三连不过分吧？.........
淘宝首页web前端课设（HTML+css+js）
06-10
本web前端课设主要用到html，css知识点和一些少量的js语言编写的轮播图。适合于大一、大二正在做课设的同学进行参考。(我的博客里有做成的效果图和每个模块的解说内容，没有了解的同学可以先去看看做成功的页面效果...
web前端，HTML，豆瓣网
06-12
HTML（HyperText Markup Language）作为Web前端的基础，是创建网页内容的标记语言，而豆瓣网作为一个知名的在线社区和媒体服务平台，其前端实现包含了许多高级技术与最佳实践。在这个大学课设或作业中，你将有机会...
WEB前端开发技术与HTML基础
12-05
《Web前端开发技术》是一门专业基础性课程，是后续计算机语言程序和软件开发类课程的基础，也是为了让大学一年级学生提早学会的一门入门级技术操作性课程。
ASP.NET Core Web API 使用Autofac框架
鲤籽鲲的博客
08-08 210
ASP.NET Core Web API 使用Autofac框架
WEB渗透Web突破篇-SSRF
qq_59468567的博客
08-03 956
转码服务 在线翻译 获取超链接的标题等内容进行显示 请求远程服务器资源的地方，图片加载与下载(通过URL地址加载或下载图片) 图片、文章收藏功能 对外发起网络请求的地方，网站采集、网页抓取的地方。 头像 (远程加载头像) 一切要你输入网址的地方和可以输入ip的地方。 数据库内置功能(mongodb的copyDatabase函数) 邮件系统 文件处理 在线处理工具 从URL关键字中寻找：share、wap、url、link、src、source、target、u、3g、display、sourceURl、im
Element学习（布局组件、案例操作）（4）
最新发布
m0_74363339的博客
08-08 97
value：表示输入的值，提交表单后传给服务器的值——>"男"表示1，"女"表示2。定义数据模型时，对象要使用大括号。像这里searchForm: {....}3、这一步之后的效果展示（只是空有一个布局——>目前还没有任何的内容）2、找到这种布局对应的代码（复制——>粘贴到标签<div>中）5、 在主展示区域的上方添加"员工查询"的（且独占一行）表单。还有一个当点击"查询"按钮时，会触发一个方法，也要去声明。7、给表格增加一个边框——>加入border属性即可。6、日期选择器——>(官网中组件中找)
探索WebKit之巅：开启现代网页应用的高效与兼容之旅
weixin_67239318的博客
08-03 510
随着现代网页应用的快速发展，WebKit作为先进的浏览器引擎，其在高效性和兼容性上的表现显得尤为重要。本文深入探讨了WebKit的架构和渲染机制，揭示了其在支持Web标准和提升浏览体验方面的关键技术。通过分析WebKit如何处理DOM操作、JavaScript执行与图形渲染等挑战，我们了解到优化WebKit性能不仅关乎算法和硬件的优化，还涉及网络协议和安全框架的理解。此外，本文讨论如何通过WebKit应对多设备和分辨率下的兼容性问题。掌握这些关键因素，对于开发者来说，是打造高效、兼容的现代网页应用的基础。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值