HTML CSS 基础语法总结
HTML & CSS 初学者必知必会
本文档适合前端初学者学习HTML与CSS时参考
还可以看看博主其他的总结:
MySQL超详细使用总结:传送地址:MySQL超详细使用总结
JavaScript小白必看:传送地址:JavaScript小白必看
文章目录
- HTML & CSS 初学者必知必会
- HTML
- 一、网页的组成部分
- 二、HTML简介
- 三、创建HTML文件
- 四、HTML文件的书写规范
- 五、HTML 标签介绍
- 六、常用标签介绍:
- 1.font字体标签:
- 2. 特殊字符:
- 3.标题标签:
- 4.超链接:网页中点击之后可以跳转的内容
- 5.列表标签
- 6. img标签(单标签):可以在html页面上显示图片
- 7. 表格标签
- 8. 跨行跨列表格
- 9. iframe框架标签(内嵌窗口)
- 10. 表单标签
- 七、其他标签
- CSS
- 一、CSS技术介绍
- 二、CSS语法规则
- 三、CSS和HTML结合的方式
- 四、CSS选择器
- 五、查阅CSS手册
HTML
一、网页的组成部分
- 内容:网页中可以看到的数据,使用HTML技术实现
- 表现:内容在页面上的展示形式,如布局、颜色等,使用CSS技术实现
- 行为:页面中元素与输入设备交互的响应,使用javascript 技术实现
二、HTML简介
- 名称:Hyper Text Markup Language (超文本标记语言)
- 简介:HTML 通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通 过在文本文件中添加标签,可以告诉浏览器如何显示其中的内容
三、创建HTML文件
- 选择浏览器执行
注意:java文件需要先编译,再由java虚拟机跑起来,而HTML文件无需编译,直接由浏览器 进行解析执行
四、HTML文件的书写规范
- HTML中注释的写法:
<!-- 注释的内容 -->
- HTML文件最基本的要素:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title></head>
<body></body>
</html>
要素详解:
(1) <!DOCTYPE> 告诉浏览器当前HTML是用什么版本编写的,html标签表示HTML的开始
(2) 向搜索引擎表示该页面是html语言,并且语言为英文网站,其"lang"的 意思就是“language”的意思,而“en”即表示english,如果需要的是中文页面,可将其 改为
(3) 表示头部信息,一般包含三部分内容:title标签,css样式,js代码
(4) 表示当前页面使用UTF-8字符集
(5) 表示浏览器标签页的标题
(6) 表示头部信息结束
(7) 标签中的内容是整个html页面显示的主体内容
(8) 主体内容结束
(9) 表示整个HTML页面结束
五、HTML 标签介绍
标签的格式:<标签名>标签中的内容</标签名>
标签名不区分大小写
标签可以拥有自己的属性
(1) 基本属性:可以修改简单的样式效果
(2) 事件属性:可以设置事件响应后的代码标签分为单标签和双标签
单标签中br/代表换行,hr/代表水平线标签的语法(HTML代码有时标签不闭合也不报错):
代码演示:基本的HTML要素的使用
<!DOCTYPE html>
<html lang="zh_CN">
<head><meta charset="UTF-8"><title>我的第一个网页</title>
</head>
<body bgcolor="#deb887"> <!-- bgcolor是页面的背景颜色属性 -->hello!这是我的第一个网页!<hr/>有一个按钮<br/><button onclick="alert('提示!')">按钮</button><!-- onclick表示点击事件,alert()是javaScript语言提供的一个警告框函数,它可以接收任意参数,参数就是警告框内出现的信息 -->
</body>
</html>
运行结果:
点击按钮之后出现含有“提示”的警告框
六、常用标签介绍:
1.font字体标签:
可以用来修改文本的字体、颜色、大小等,常用的属性:
(1) color属性:修改字体颜色
(2) face属性:修改字体
(3) size属性:修改字体大小
代码示例:在网页上显示:我是字体标签,并修改字体为宋体,颜色为红色
<!DOCTYPE html>
<html lang="zh_CN">
<head><meta charset="UTF-8"><title>字体标签的测试</title>
</head>
<body><font face="宋体" , color="red", size="8">我是字体标签</font>
</body>
</html>
运行结果:
2. 特殊字符:
字符实体有三部分:一个和号 (&),一个实体名称(或者 # 和一个实体编号),以及一个分号
代码示例:把换行单标签以文本的形式输出在页面中,并演示空格的使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>特殊字符的使用</title>
</head>
<body> < br >
</body>
</html>
运行结果:
注意:如果未使用特殊字符则HTML对于连续的空白字符(如回车、制表等)只保留一个空格
3.标题标签:
标题标签是从h1到h6,h1最大,h6最小,其中的属性:
align属性是对齐属性,其值:
(1) left 左对齐(默认)
(2) center居中对齐
(3) right右对齐
注意:HTML会自动的在标题上下添加一个空行
代码示例:演示标题的不同等级
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>标题标签</title>
</head>
<body><h1 align="left">标题1</h1><h2 align="right">标题2</h2><h3 align="center">标题3</h3><h4 >标题4</h4><h5 >标题5</h5><h6 >标题6</h6>
</body>
</html>
运行结果:
4.超链接:网页中点击之后可以跳转的内容
a标签代表超链接,其中的属性:
href属性设置链接的地址
target属性可以定义被链接的内容在何处显示:
(1) _self 属性值表示链接在当前页面中打开(默认)
(2) _blank属性值表示链接在新页面中打开
代码示例:演示超链接的使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>超链接的测试</title>
</head>
<body><a href="http://www.google.com">谷歌</a><br/><a href="http://www.google.com", target="_self">谷歌_self</a><br/><a href="http://www.google.com", target="_blank">谷歌_target</a><br/>
</body>
</html>
运行结果:
三个链接均可点击并呈现相应效果
5.列表标签
(1) ul标签是无序列表,ol标签是有序列表
type属性可以修改列表前面的符号
(2) li标签是列表项
代码示例:演示列表标签的使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表标签的使用</title>
</head>
<body><ol type="none"><li>周杰伦</li><li>昆凌</li><li>海瑟薇</li></ol> <ul type="none"><li>周杰伦</li><li>昆凌</li><li>海瑟薇</li></ul>
</body>
</html>
运行结果:
6. img标签(单标签):可以在html页面上显示图片
(1) src属性可以设置图片的路径:
相对路径:
. 表示当前文件所在的目录
… 表示当前文件所在的上一级目录
/ 表示进入目录或打开文件
绝对路径:
http://ip:端口号/工程名/资源路径
(2) width属性可以设置图片的宽度
(3) height属性可以设置图片的高度
(4) border属性可以设置图片边框大小
(5) alt属性可以设置当指定路径找不到图片时,用来代替图片显示的文本内容
代码示例:演示img标签的使用
5.jpg在My Test文件夹下的photo文件夹下
19.jpg在My Test文件夹下
17.jpg在MyTest文件夹的上层目录下
即:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>照片代码演示</title>
</head>
<body><img src="19.jpg" border="1" height="200" width="200"/><img src="./photo/5.jpg" alt="图片找不到"/><img src="../17.jpg" alt="图片找不到">
</body>
</html>
运行结果:在页面上成功加载出三张图片
7. 表格标签
- table标签是表格标签
(1) border属性设置表格最外层边框的大小,如果不设置或值为0则无表格外层边框,亦 无单元格边框,仅有数据,且按照表格方式排列
(2) width属性设置表格宽度
(3) height属性设置表格高度
(4) align属性设置表格相对于页面的对齐方式
(5) cellspacing属性设置单元格间距,设置为0单元格的边重叠,会加粗
(6) cellpadding属性设置单元格内容距离单元格边框的距离大小 - tr标签是行标签,其中的内容都在一行
- th标签是表头标签,其中的内容在单元格中(自动的加粗并居中)
- td标签是单元格标签,其中的内容在单元格中,写几个td标签一行中就有几个单元格
align属性设置单元格文本对齐方式 - b标签是加粗标签
代码示例:演示制作一个两行三列的表格
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格标签测试</title>
</head>
<body><!-- 1.做一个带表头的两行三列的表格--><table align="center" border="10" width="30" height="30" cellspacing="5"><tr><th>1.1</th><th>1.2</th><th>1.3</th></tr> <tr><td><b>2.1</b></td><td align="center">2.2</td><td>2.3</td></tr></table>
</body>
</html>
运行结果:
8. 跨行跨列表格
单元格的 colspan属性设置跨几列
rowspan属性设置跨几行
代码示例:演示表格跨行跨列
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>跨行跨列测试</title>
</head>
<body><table border="1"><tr><td colspan="2">1.1</td><td>1.3</td></tr><tr><td rowspan="2">2.1</td><td>2.2</td><td>2.3</td> </tr><tr><td>3.2</td><td>3.3</td></tr></table>
</body>
</html>
运行结果:
9. iframe框架标签(内嵌窗口)
iframe标签可以在页面上开辟一个区域显示一个单独的页面
iframe和a标签组合使用的步骤:
- 在iframe标签中使用name属性自定义一个名称
- 将a标签中的target属性值设置为第1步iframe标签的name属性值
代码示例:演示iframe标签的使用:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>iframe标签的使用</title>
</head>
<body><iframe src="跨行跨列测试.html" width="200" height="70" name="go"></iframe><br/><ul><li><a href="表格标签测试.html" target="go">切换至表格标签测试</a></li></ul>
</body>
</html>
运行结果:
点击之后:
10. 表单标签
表单:HTML页面中用来让用户输入信息的所有元素集合,然后把这些信息发送给服务器
(1) form标签代表表单标签
1.action属性设置提交的服务器地址
2. method属性设置提交的方式:get(默认)或post
注意:
A. 表单提交时数据没有发给服务器的三种情况:
1.表单项没有name属性值
2.单选、复选(option标签)没有添加value属性
3.表单项不在提交的form标签中
B. get请求的特点:
1 浏览器地址栏中的地址是action的属性值[?请求参数(表单中的数据)]
2 请求参数的格式是:name=value&name=value,不同数据使用&连接
3 不安全,提交密码会出现在浏览器地址栏中
4.有数据长度的限制:表单值包含非ASCII字符或者超过100个字符,get方式 不可再用,必须使用method=“post”
C. post请求的特点:
1.浏览器地址栏中只有action的属性值
2. 相对于get请求更安全
3. 理论上没有数据长度的限制
(2) input标签代表输入标签,用来读取用户的输入
①value属性:
②name属性:自定义input元素的名称,用于对提交到服务器后的表单数据进行标识
③type属性:
1.text属性值代表文本域:value属性设置默认内容
2. password属性值代表密码输入框(输入的内容以掩码形式显示):
3. radio属性值代表单选框:checked=”checked”表示默认选中,自定义name
属性可对其进行分组,同名组内只可选中一个
4. checkbox属性值代表复选框:
checked=”checked”表示默认选中
5. reset属性值代表重置按钮:value属性可以修改按钮上的默认文本,
reset按钮可重置表单中的内容,恢复为默认值
6. submit属性值代表提交按钮:value属性可以修改按钮上的默认文本,
submit按钮可将表单数据提交到服务器
7. button属性值代表按钮:value属性可以修改按钮上的默认文本
8. file属性值代表文件上传域:可选择本地的文件上传到服务器
9. hidden属性值代表隐藏域:在页面无任何内容,这些内容不需要用户参与,提交的时候 同时发给服务器
(3) select标签代表下拉列表框:
option标签是下拉列表框中的选项,selected="selected"设置默认选中
(4) textarea标签代表多行文本输入框(框中默认值是此标签中的内容):
1.rows属性可以设置显示几行的高度
2. cols属性可以设置每行可以显示几个字符
代码示例:创建如图所示的表单
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单的测试</title>
</head>
<body><form action="http://locolhost:3306" method="get"><input type="hidden" name="action" value="login"/><h1 align="center">用户注册</h1><table align="center" border="1"><!--之后单元格的内容都要放在td中,否则内容就不在表格中了--><tr><td>用户名称:</td><td><input type="text" name="username" value="默认值"/></td></tr><tr><td>用户密码:</td><td><input type="password" name="password" value="***"/></td></tr><tr><td>性别:</td><td><input type="radio" name="sex" value="boy"/>男<input type="radio" name="sex" checked="checked" value="girl"/>女</td></tr><tr><td>兴趣爱好:</td><td><input name="hobby" type="checkbox" checked="checked" value="Java"/>Java<input name="hobby" type="checkbox" value="JavaScript"/>JavaScript<input name="hobby" type="checkbox" value="C++"/>C++</td></tr><tr><td>国籍:</td><td><select><option value="none">--默认值是第一个option的内容--</option><option value="China">中国</option><option value="Japan">中华</option></select></td></tr><tr><td>自我评价:</td><td><textarea rows="10" cols="20" name="Describe">默认值为空</textarea></td></tr><tr><td><input type="reset"/></td><td><input type="submit"/><input type="file"></td></tr></table></form>
</body>
</html>
此表单点击提交之后浏览器地址栏的内容是:
http://locolhost:3306/?action=login&username=%E9%BB%98%E8%AE%A4%E5%80%BC&password=***&sex=girl&hobby=Java&Describe=%E9%BB%98%E8%AE%A4%E5%80%BC%E4%B8%BA%E7%A9%BA
七、其他标签
1.div标签:字符无论多少独占一行
2.span标签:其长度是封装数据的长度,即字符有多长标签就有多长
3.p标签:段落标签,默认会在字符的上下行各空出一行(如果有空行就不再多留空行)
代码示例:测试其他标签的使用
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span><!--有一个空格的原因:与下一段字符有大量空白-->
<span>span标签2</span>
<p>p标签1</p>
<p>p标签2</p>
运行结果:
CSS
文章目录
- HTML & CSS 初学者必知必会
- HTML
- 一、网页的组成部分
- 二、HTML简介
- 三、创建HTML文件
- 四、HTML文件的书写规范
- 五、HTML 标签介绍
- 六、常用标签介绍:
- 1.font字体标签:
- 2. 特殊字符:
- 3.标题标签:
- 4.超链接:网页中点击之后可以跳转的内容
- 5.列表标签
- 6. img标签(单标签):可以在html页面上显示图片
- 7. 表格标签
- 8. 跨行跨列表格
- 9. iframe框架标签(内嵌窗口)
- 10. 表单标签
- 七、其他标签
- CSS
- 一、CSS技术介绍
- 二、CSS语法规则
- 三、CSS和HTML结合的方式
- 四、CSS选择器
- 五、查阅CSS手册
一、CSS技术介绍
CSS用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言
二、CSS语法规则
- 浏览器根据选择器决定受CSS样式影响的HTML元素(标签)
- 属性是需要更改的样式名,每个属性都有一个值。属性和值使用冒号分开,并被大括号包围
- 如果要定义多个属性的声明,需要使用分号将每个声明分开
- 一般每行只描述一个属性
- CSS注释:/注释的内容/
三、CSS和HTML结合的方式
- 在标签的style属性上设置”属性:值”
代码示例:使用style属性修改标签的样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--定义一个div标签,修改标签的样式为:边框1个像素,实线,红色--><div style="border: 1px solid red">div</div>
</body>
</html>
运行结果:
此种方式的缺点:
(1) 若标签过多,代码量巨大
(2) 无复用性可言
(3) 可读性较差
- 在head标签中使用style标签来定义各种自己需要的CSS样式:
代码示例:在head标签中使用style标签定义CSS样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--style标签专门用来定义CSS样式--><style type="text/css">/*分别定义div、span标签,修改二者样式为边框1个像素,实线,红色*/div{border: 1px solid red;}span{border: 1px solid red;}</style>
</head>
<body><!--在head标签中定义了某种标签的样式,则使用此标签时标签中的内容自动使用所定义的样式--><div>div</div><span>span</span>
</body>
</html>
运行结果:
此种方式的缺点:只能在同一页面内复用代码,需要到每个页面修改样式,维护起来不方便
- 把CSS样式写成一个单独的CSS文件,再通过link标签引入
(1) 创建CSS文件:
(2) 在HTML文件的head标签中使用:
<link rel = “stylesheet” type = “text/css” href = “创建的CSS文件路径”/>
代码示例:演示link标签的使用
①创建mycss.css文件
div{border: 1px solid red;
}
span{border: 1px solid #433cfa;
}
②在html文件中使用link标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="mycss.css"/>
</head>
<body><div>div</div><span>span</span>
</body>
</html>
运行结果:
四、CSS选择器
1.标签名选择器:相当于HTML和CSS结合的方式二
2. id选择器:可以通过id属性选择性的使用某个样式(id是唯一的,每个id值在一个页面中只能使用一次),格式:
#id名称{
属性:值;
}
代码示例:演示id选择器的使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">#id001{color: burlywood;border: 1px solid red;}#id002{color: aqua;border: 3px yellow; }</style>
</head>
<body> <div id="id001">div1</div><div id="id002">div2</div><!--再次使用id报错:<div id="id002">div3</div> -->
</body>
</html>
运行结果:
3. class选择器(类选择器):可以通过class属性选择性的使用某个样式(class值在一个页面中可以使用多次),格式:
.class名称{
属性:值;
}
代码示例:演示类选择器的使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">.class01{color: aqua; font-size: 30px;}</style>
</head>
<body><div class="class01">div1</div><div class="class01">div2</div> <!--可重用-->
</body>
</html>
运行结果:
4. 组合选择器:可以让多个选择器共用同一个CSS样式
格式:
选择器1,选择器2…选择器n{
属性:值;
}
代码示例:演示组合选择器的使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">.class01,#id01{color: #433cfa;font-size: 20px; }</style>
</head> 运行结果:
<body><div class="class01">div1</div><div id="id01">div2</div>
</body>
</html>
五、查阅CSS手册
其余的用法差不多,这么多样式也记不住,需要查阅手册,手册文件可以私聊我获取
HTML CSS 基础语法总结相关推荐
- css html 语法,CSS基础语法
CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式.CSS在Web设计领域是一个突破.利用它可以实现修改一个小的样式更新与之相关的所有页面元素.关于css语法你知道有哪些?下面yjb ...
- CSS基础语法和盒模型
CSS基础语法和盒模型 CSS简介 Cascading Style Sheet 层叠样式表 用于给HTML标签添加样式 CSS3是CSS的最新版本 增加了大量的样式/动画/3D特效以及移动端特性 前端 ...
- HTML+css 基础语法
title: HTML+css 基础语法 categories: HTML tags: [语法,HTML,css] 一.HTML 什是么网站? 网站(Website)开始是指在因特网上根据一定的规 ...
- CSS基础语法与选择器扫盲
一.CSS基础语法; 1.1 语法解释 selector {declaration1; declaration2; ... declarationN } 选择器通常是您需要改变样式的 HTML 元素. ...
- 【CSS基础语法】CSS基础语法知识学习笔记汇总
CSS基础语法 前言 一.样式定义方式 1.html 2.css 二.选择器 1.html 2.css 三.颜色 1.html 2.css 四.文本 1.html 2.css 五.字体 1.html ...
- css基础语法与注释,简述CSS注释
你知道什么是css注释?你了解CSS注释有什么作用?你知道为什么要进行注释?不知道?没关系,下面小编就为大家慢慢解释一下. 一.什么是CSS注释 Css注释又被称作CSS注解,是在css文件代码间加入 ...
- CSS从零开始(1)--CSS基础语法
1.CSS语法 CSS规则有两个主要部分构成:选择器,以及一条或多条说明. 例如:selector{declaration1;declaration2;declaration3;......;} 注: ...
- 静态资源Css基础语法
1.css的引入方式 <1>内联样式 <!DOCTYPE html> <html lang="en"> <head><meta ...
- CSS基础语法(三) CSS的6种特性
样式表常用写法及特性(组合.继承.关联性.权值性.层叠性.重要性) 1.样式的组合:把具有相同声明定义的选择符组合在一起,并用逗号隔开.-例如:段落元素p.单元格元素td和类c1可以使用相同样式: p ...
最新文章
- 使用Python,OpenCV+OCR检测护照图像中的机器可读区域(MRZ Machine-Readable Zones)
- 当了十年 IT 程序员,我转型做自动驾驶开发的这五年”_《新程序员》编辑部的博客-CSDN博客
- 高端网站建设css3动画响应式模板_网站建设中整站定制与模板建站存在着什么差异...
- PCM设备在电网系统中的应用介绍
- 华为荣耀20s云服务_华为荣耀20和20s的区别
- windows和linux文件输 - ftp
- 计算机学科技术前沿:INFOCOM和SIGCOMM会议信息
- Autodesk Eagle入门之-开启旅程
- UCF101视频分类之CNN-LSTM-Code总结
- 使用FFmpeg命令合并音视频
- Best Android Remote Desktop Apps?
- RHEL Linux 8.3 通过 BIND 实现 DNS 基本功能
- C语言函数while的用法
- 完美的alert美化
- 《职业教育研究》(月刊)投稿经验分享
- 如何在Release状态下进行调试
- python微博评论情感分析_Python采集微博热评进行情感分析祝你狗年脱单
- TLD(Tracking-Learning-Detection)一种目标跟踪算法
- 安全网站域名是什么样的?有什么作用?
- UI组件库的引用方式
热门文章
- python出租车计费标准_使用Python实现租车计费系统的两种方法
- 图像压缩编码与JPEG压缩编码标准简介
- 函数sleep、nanosleep和clock_nanosleep(UNIX环境高级编程笔记)
- servlet入门与进阶
- Apple iOS MDM service 简介
- python中的utils模块_python学习笔记-import utils报错
- 婚恋交友网站大量吸引风险投资
- 弘辽科技:淘宝国庆节活动什么时候结束?活动力度大吗?
- RationalDMIS2023平面度评价算法选择2023
- Elasticsearch教程(6) ES桶聚合Query DSL-Terms Aggregation