Java Web(三)HTML 和 CSS
HTML 和 CSS
什么是 HTML?
HTML 是一门语言,所有的网页都是用 HTML 这门语言编写出来的
HTML(HyperText Markup Language):超文本标记语言
超文本:超越了文本的限制,比普通文本更强大。除了文字 信息,还可以定义图片、音频、视频等内容 标记语言:由标签构成的语言
HTML 运行在浏览器上,HTML 标签由浏览器来解析
HTML 标签都是预定义好的。例如:使用<img>展示图片
W3C 标准:网页主要由三部分组成
结构:HTML 表现:CSS 行为:JavaScript
一.HTML
1.快速入门
1.新建文本文件,后缀名改为.html2.编写 HTML 结构标签 3.在<body>中定义文字
2.基础标签
html 表示颜色:1.英文单词:red,pink,blue...2.rgb(值 1,值 2,值 3):值的取值范围:0~255rgb(255,0,0)3.#值 1 值 2 值了:值的范围:00~FF
转义字符
3.图片、音频、视频标签
img:定义图片
src:规定显示图像的 URL(统一资源定位符)
height:定义图像的高度 width:定义图像的宽度
audio:定义音频。支持的音频格式:MP3、WAV、OGG
src:规定音频的 URLcontrols:显示播放控件
video:定义视频。支持的音频格式:MP4,WebM、OGG
src:规定视频的 URLcontrols:显示播放控件
4.超链接标签
href:指定访问资源的 URL
target:指定打开资源的方式
_seIf:默认值,在当前页面打开_blank:在空白页面打开
5.列表标签
有序列表
无序列表
type:设置项目符号
6.表格标签
table:定义表格
border:规定表格边框的宽度 width:规定表格的宽度 cellspacing:规定单元格之间的空白
tr:定义行
align:定义表格行的内容对齐方式
td:定义单元格
rowspan:规定单元格可横跨的行数
colspan:规定单元格可横跨的列数
7.表格标签
8.表单标签
表单:在网页中主要负责数据采集功能,使用<fom>标签定义表单
表单项(元素):不同类型的 input 元素、下拉列表、文本域等
form:定义表单
action:规定当提交表单时向何处发送表单数据,ULmethod:规定用于发送表单数据的方式
get:浏览器会将数据直接附在表单的 action URL 之后。大小有限制
post:浏览器会将数据放到 http 请求消息体中。大小无限制
9.表单项标签
二.CSS
什么是 CSS?
CSS 是一门语言,用于控制网页表现
CSS(Cascading Style Sheet):层叠样式表
W3C 标准:网页主要由三部分组成
结构:HTML 表现:CSS 行为:JavaScript
1.CSS 导入方式
CSS 导入 HTML 有三种方式:
1.内联样式:在标签内部使用 style 属性,属性值是 css 属性键值对
<div style="color:red">Hello CSS~</div>
2.内部样式:定义<style>标签,在标签内部定义 css 样式
<style type="text/css"> div{ color:red; } </style>
3.外部样式:定义 ink 标签,引入外部的 css 文件
<link rel="stylesheet"href="demo.css">
demo.css
div{ color:red; }
2.CSS 选择器
2.1 概念:选择器是选取需设置样式的元素(标签)
2.2 分类
2.2.1 元素选择器
2.2.2id 选择器
2.2.3 类选择器
版权声明: 本文为 InfoQ 作者【浅辄】的原创文章。
原文链接:【http://xie.infoq.cn/article/2e0141675caa1ff9d6e01d2be】。文章转载请联系作者。
评论