Web-HTML-CSS基础

已于 2022-06-21 14:06:03 修改
阅读量190 收藏
点赞数
分类专栏： html Web 文章标签： html css
于 2022-06-21 13:49:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48865614/article/details/125373211
版权
Web 同时被 2 个专栏收录
7 篇文章 0 订阅
订阅专栏
html
1 篇文章 0 订阅
订阅专栏

文章目录

HTML

网页的构成

B/S与C/S

  1. B/S指浏览器与服务器之间工作方式
    1. 优势：无需占用本地存储空间
    2. 不足：所有请求与相应占用大量网络带宽
  2. C/S指客户端与服务器之间工作方式
    1. 优势：无需占用大量网络带宽
    2. 不足：需要占用本地存储空间

网页的构成（三要素）

摘要说明
结构（HTML）HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
表现（CSS）CSS样式是表现。就像是网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现
行为（JavaScript/jQuery）JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有购物网站中图片的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的

HTML简介

  • HTML是用来描述网页的一种语言
  • HTML指的是超文本标记语言（Hyper Text Markup Language）
  • 超文本就是指页面内可以包含图片、连接、甚至音乐、程序等非文字元素
  • HTML不是一种编辑语言，而是一种标记语言
  • 标记语言是一套标记标签（markup tag），由一组<>包围的关键字
  • HTML网页的后缀名一般为.html或.htm
  • HTML使用标记标签来描述网页

HTML语法

  • 标签的分类
    HTML标签分为两类：
    1. 一类叫有开始有结束标签（成对标签），
    2. 另一类叫自结束标签
  • 标签不区分大小写
    浏览器引擎解析后均为小写
  • 标签可以嵌套，但不能交叉嵌套
    如果交叉嵌套也不会报错（原因：浏览器自动补齐了代码，有一定的容错能力）
  • 标签必须正确关闭
    如果不正确关闭，也不会报错，浏览器会自动补齐
  • 关于元素节点中的属性
    属性不许有值，且必须用双引号括起来
  • 注释
    注释不能嵌套

HTML常用标签

标题标签

  • 作用：标题
  • 特点：自带换2行效果
<h1></h1>~<h6></h6>

换行标签

  • 作用：换行
<br>或<br/> 注：h5/可省略

分区布局标签

  1. div
    作用：div本身无实际语义，主要用于分区布局
    特点：自带换1行效果【块级元素】
<div></div>
  1. span
    作用：span本身无实际语义，主要用于分区布局
    特点：不自带换行效果【内联元素】
<span></span>

段落标签

  • 作用：区分段落
  • 特点：自带换2行效果
<p></p>

实体字符（转义字符）

  • 语法：以&开头，以;结尾
  • 常用字符如下
空格：&nbsp;
中文空格：&emsp;
大于号：&gt;
小于号：&lt;
版权号(©)：&copy;

分割线

  • 作用：分隔
<hr>

HTML重点标签

关于路径

  • 相对路径：相对当前文件路径，进行查找目标路径
    1. 如果目标文件与当前文件，在同一目录下，可以直接查找使用
    2. 如果目标文件与当前文件，不在同一目录下
      • 先找目标文件的上一级目录，在找目标文件
      • ./：当前目录
      • …/：当前目录的上一级目录
  • 绝对路径：基于服务器下的某种特定路径
  • 真实路径：基于本地盘符的路径

插入图片

  • 属性：
    1. src：设置插入图片路径
    2. title：设置（鼠标移入时）文本提示
    3. alt：设置（当图片路径有误时）文本提示
<img src="" title="" alt="">

超链接

  • 属性：
    1. href：设置连接的路径
    2. target：设置连接目标路径的方式（_self【默认值】或_blank）
      • _self：以当前选项卡打开目标路径
      • _blank：以新的选项卡打开目标路径
<a href="" target=""></a>

列表

  • 无序列表
    1. 列表类型：type属性值（disc【默认值】：实心圆、square：实心方、circle：空心圆）
<ul>
	<li></li>
</ul>
  • 有序列表
    1. 列表类型：type属性值（1、a、A、I、i）
<ol>
	<li></li>
</ol>
  • 自定义列表
<dl>
	<dt></dt>
	<dd></dd>
<dl>

表格

  • 表格跨行跨列
    1. colspan：跨列
    2. rowspan：跨行
<table border = "1"><!--table标签定义表格-->
	<tr><!--tr标签定义行-->
		<th></th><!--th标签定义表头-->
	</tr>
	<tr>
		<td></td><!--td标签定义表格-->
	</tr>
</table>

表单

  • 属性：<form action=“” method = “”></form>
    1. action：设置表单提交的路径
    2. method：设置表单的提交方式（get或post）
  • 表单项：
  1. input表单项： <input type=“” name=“” value=“”/>
    1. type：设置表单项类型
    2. name：设置表单项名称
    3. value：设置表单项数值
    4. checked：设置单选框或复选框默认选中
    5. selected：设置在复选框中默认选中
  2. 下拉列表：<select name=“”><option value=“”></option></select>
  • 注意：
    1. 表单项需要提交数据时，必须指定表单项name属性值
      1. 如需将单选框或复选框设置为一组时，需要设置name属性值一致
    2. 在设置表单项value属性时：
      1. 如设置的是文本框和密码框时，设置value属性值时是：默认值
      2. 如设置的是submit等按钮时，设置value属性值时是：文本值
    3. 一般情况：使用单选框和复选框时，需要设置value属性值作为数据
    4. 如未指定下拉列表的value属性值时，默认将文本值作为value属性值
<form action="" method = "">
	账号:<input type="text" name="username" phaceholder="请输入用户名"/><br>
	密码:<input type="password" name="password"/><br>
	性别:<input type="radio" name="gender" value="男" checked/>男
	<input type="radio" name="gender" value="女"/>女<br><!--radio单选框，checked默认选项-->
	爱好:<input type="checkbox" name="hobby" value="篮球"/>篮球
	<input type="checkbox" name="hobby" value="排球"/>排球
	<input type="checkbox" name="hobby" value="足球"/>足球<br><!--checkbox复选框-->
	国籍:<select name="country"><!--下拉列表-->
			<option value="China" selected>中国</option>
			<option>美国</option><!--不加value属性会将文本值作为value属性-->
			<option>法国</option>
		</select>
	<input type="submit" value="登录"/>
	<input type="reset"/><!--重置-->
	隐藏域:<input type="hidden"/><br>
	文件域:<input type="file"/>
</form>

CSS

CSS简介

  • CSS全称为“层叠样式表(Cascading Style Sheets)”
  • CSS作用：主要用于美化HTML页面，如：文字大小、颜色、字体、边框、位置等

CSS基本语法

基本格式

	<style>
/*选择器*/p{
		/*样式名:样式值;*/
			color:red;
			font-size: 36px;
		}
	</style>

嵌入方式

行内样式表（不推荐使用）
<p style="color:blue">第一段</p>
内部样式表
  • 书写在<style></style>标签内（<style>标签一般建议书写位置：<head></head>标签内）
外部样式表（推荐使用）
  • 定义外部样式表：demo.css
  • 引入外部样式表：
    1. href：设置引入文件路径
    2. type：设置引入文件与当前文件关系
    3. rel：设置文件类型
    <link href="demo.css" type="text/css" rel="stylesheet">
总结：
  • CSS嵌入方式的优先级（行内>内部>外部）

CSS常用选择器

标签选择器

  • 定义
标签名{}

类选择器

  • 定义
.类名{}
  • 使用
<div class="类名"></div>

ID选择器

  • 定义
#id名称{}
  • 使用
<div id="id名称"></div>

总结

  • 选择器优先级：ID选择器>类选择器>标签选择器

CSS颜色

CSS颜色值

  • 颜色名：red
  • 十六进制：#ff0000（#f00）红色
  • rgb()：reb(255,0,0)红色
I会飞的鱼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端 html+css+javascript (三剑客) 未完待续~~~
m0_57642521的博客
11-20 427
网页最主要由3部分组成：结构、表现和行为。网页现在新的标准是W3C，目前模式是HTML、CSS和JavaScript。 （1）HTML HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。 （2）CSS CSS，全称“（层叠样式表）”。以后我们在别的地方看到“层叠样式表”、“CSS样式”，指的就是CSS。 内部样式 <style></style>..
HTMLCSS基础知识
weixin_46602653的博客
06-20 105
继承 子元素可以继承父元素的样式 text font line 这些元素开头的 以及color 行高可以跟单位可以不跟单位 例如20px 例如 1.5这个1.5是当前元素文字大小的1.5背border-collapse：collapse； 合并相邻边框行内元素和行内块元素水平居中 给父亲添加text-align：center即可 块级 margin 0 auto解决嵌套元素垂直外边距塌陷 为父元素定义上边框 为父元素定义上内边距 为父元素添加overflow：hieend行内元素为了照顾兼容性，尽
Web之html、css
TH_guan的博客
07-08 515
本文主要讲述后端开发者需要的基本web知识点，讲述了html、css的一些基本内容。
浏览器及内核
kzwsa的博客
07-11 416
- web浏览器是用于读取HTML文件，并将其作为网页显示- 浏览器最重要的部分或其核心是渲染引擎，我们一般称为内核；- 内核的作用负责对网页语法的解释并渲染网页；- 五大浏览器：chrome、safari、Firefox、Opera、IE 1.chrome 谷歌浏览器 生产商：Google 内核：webkit、blink 2.Firefox 火狐浏览器 生产商：Mozilla 内核：gecko 3.Safari 苹果浏览器 生产商：苹果公司 内核：webkit 4.opera 欧朋浏览
web之CSS基础指南
广阔天地，大有作为的博客
07-13 2447
css基本语法 css主要由两部分组成：选择器+一条或多条声明 选择器一般为要设置的html样式标签，声明为属性和值，属性之间用“：”分隔。 css中的注释以“ /* ”开始，以“ */ ”结束。 css样式选择器 id选择器： 写在head中，id选择器通过“ # ”来指定特定id的样式 &amp;lt;style&amp;gt; #id { color:red; } &amp;l...
web前端 HTML、CSS、JavaScript
weixin_43561610的博客
05-25 889
我们说，Web前端三剑客：HTML、CSS、JavaScript，它们看上去是三种不同的技术，但在实际中却是相互搭配使用的。 HTML是用来标记内容的（重在内容组织上） HTML是超文本标记语言的简称，它是一种不严谨的、简单的标识性语言。它用各种标签将页面中的元素组织起来，告诉浏览器该如何显示其中的内容。 为什么说HTML是不严谨的呢？因为HTML标签即使不闭合，也并不会影响页面内容的组织。 CSS是用来修饰内容样式的（重在内容样式美化展示上） CSS是层叠样式表的简称，它用来表现HTML文件样式的，简单说
Web CSS基础
iphuoob的博客
10-30 118
文章目录前言一、CSS概念二、CSS的优点三、CSS与html结合方式四、CSS语法五、选择器：筛选具有相似特征的元素六、属性七、案例：注册界面（CSS） 前言 根据最近几天对Web前段CSS的学习，做出了以下的总结。 一、CSS概念 概念： Cascading Style Sheets 层叠样式表 * 层叠：多个样式可以作用在同一个html的元素上，同时生效 二、CSS的优点 1. 功能强大 2. 将内容展示和样式控制分离 * 降低耦合度。解耦 * 让分工协作更容易 * 提高开发效率 三
Web-前端html+css从入门到精通 142. animation动画基础语法.zip
05-23
Web-前端html+css从入门到精通 142. animation动画基础语法.zip
Web-前端html+css从入门到精通 135. transition过渡基础语法.zip
05-23
Web-前端html+css从入门到精通 135. transition过渡基础语法.zip
html-css:Web开发基础
05-25
html-css 使用html＆css的简单简历（基本） 用法 HTML CSS
Web-Learning-HTML_CSS:分享所学之HTML与CSS基础网页设计知识，供社区中文使用者浏览，学习
03-28
HTML与CSS网页设计学习手札一点说明目录1.网站，浏览器与日常（1）浏览器（浏览器）浏览器（Browser）是我们用来浏览网站的软件，著名的浏览器有Google Chrome，Firefox，Safari，Opera，Microsoft Edge与Internet ...
Web-101:探索 Web 的基础知识，包括 HTML、CSS 和 JavaScript
08-03
我们将从 HTML、CSS 和 JavaScript 的基础开始。 而且，到本周末，参与者可以使用 HTML、CSS 和 JavaScript 创建自己的网页。议程否要涵盖的主题资源1. Web 基础知识和 HTML 简介2. HTML 实践实验室3. CSS 和 ...
web第一讲：html与css
connly的博客
10-24 173
本次归纳html与css是什么以及初步了解并使用它们
web前端(HTML+CSS+JS)
zjpp2580369的博客
07-09 1262
http://www.php.cn/js-tutorial-396813.html 前端开发三剑客HTML+CSS+JS之名是如雷贯耳，是前端入门的基础之基础，前端程序员们用这三个组件构成了数量众多的网页。然而在初学的时候，由于无法迅速了解全部知识点，所以在学习的时候往往会有盲人摸象的感觉——就是对于各个组件的功能和分工不甚了解，无法从整体上把握学习方向，因而较难构成完整的知识体系，这是比较头疼的...
web前端html+css基础 项目实例
热门推荐
路漫漫其修远兮，吾将上下而求索
03-02 5万+
三毛                                       设为首页                   收藏本站                      时间2016年3月1日      天气晴朗
web前端html+css
可爱的鹬啊
08-09 581
  1.利用伪元素清除浮动方法 清除浮动的样式，放在外层div的最后，:after上就可以了。 例：     .wrapper::after{        content:"";        clear:both;   //如果想clear生效，必须是块级元素；        display:block; } 2.溢出容器，要打点展示     2.1 单行文本，三件套 ...
Web-HTML+CSS练习
weixin_45988242的博客
01-23 221
目录一.练习1.图片列表2.导航栏3.新闻第一部分第二部分第三部分 一.练习 1.图片列表 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>First</title> <link rel="stylesheet" href="/css/reset.css"> <style> .li
JavaWeb之HTML和CSS
qq_38596491的博客
06-22 3353
一、概述 1、B/S软件结构 JavaSE中，C/S结构：客户端（Client）——服务端（Server） JavaWeb中，B/S结构：浏览器（Browser）——服务器（Server） 2、前端开发流程 PS制作效果图——>前端工程师：做成静态网页——>Java程序员：将静态网页改为动态网页 3、网页的组成部分 内容（结构，页面中的内容，使用HTML展现）、表现（布局，颜色，大小等，使用CSS实现）、行为（页面中元素与输入设备交互的响应，一般使用JS技术实现） 4、HTML简介 （Htper
html实现粘贴excel数据，在页面表格中复制
最新发布
weixin_43805439的博客
06-13 272
Html table 实现Excel多格粘贴
web html css js 网站
06-12
如果您想要制作一个网站，可以先学习 HTML、CSS 和 JavaScript 的基础知识，然后选择适合的工具和框架进行开发。您可以使用代码编辑器（如 Visual Studio Code、Sublime Text 等）编写代码，使用浏览器进行页面预览...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值