Css 及 Html5之初学者基础教程【前端语言基础】
12个月前 (05-31) / 187 次围观 / 0 次吐槽前端语言基础:HTML5 & CSS
(一) HTML5:超文本标记语言
1) :基本概念
Ω是由一系列成对出现的元素标签(标记)嵌套组合而成 ( XML也是标签构成的 )
Ö这些标签以<标签名称>的形式出现,用于标记文本内容的含义
Ð浏览器通过元素标签解析文本内容并将结果显示在网页上,而元素标签本身并不会被浏览器显示出来
2): 基本结构
HTML5元素的内容一般以起始标签<元素名>开始,以结束标签</元素名>终止
<!Doctype html> <html> <head> <title>这里是一个网页的标题</title> ...... </head> <body> 这里是一个网页的主体内容 </body> </html>
DOCTYPE是Document Type的简写,含义为文档类型。
HTML5文档基础结构中第一行就是HTML5的DOCTYPE声明
<html> </html> Html文件开始标签和结束的标签——文档的根标签
<head> </head> 指定html文档的一些属性,例如页面标题,字符集和关键字等-
<title> </title> 网页标题标签,即被收藏以及搜索引擎中搜索出的名称
<meta.../> 元数据标签,不显示,但是机器可读,常用于搜索引擎索引(SEO优化)
⊗字符集声明(网页编码声明) <meta charset="utf-8">
⊗关键词声明 <meta name="keywords" content="Xx,Xx,Xx" />
⊗页面描述声明 <meta name="description" content="This is a page about html5" />
<style> </style>
⊗可用于定义文档中指定区域的字体风格、背景颜色、对 齐方式等各类样式信息
⊗Eg:<style> p{color:read} </style>
<link.../> 链接标签
⊗标签用于连接外部资源和当前HTML5文档,它只出现在首部标签 <head> </head>中,通常用于连接外部样式表
⊗Eg:<head> <link rel="stylesheet" hred="test.css"/> </head>
<script> </script>
⊗此标签为可选,取决于当前页面是否需要使用脚本内容,比如JavaScript。该标签可以直接引用外部脚本文件,也可以直接将脚本命令写在<script> </script>标签中
⊗<head> <script src="test.js"></script> </head>
<body> </body>显示在页面上的内容都写在body里面
3) 基本规范
♠ HTML5使用<!--...-->标签为文档进行注释 (多行或者单行)
♠ 早期的HTML规范中,标签的大小写是不敏感的,可能存在大写标签的情况
万维网联盟(W3C)明确规定了在新版本HTML5中必须使用小写格式,包括元素标签本身和其中可能出现的属性均需要遵守此规范
♠ 一些标签,没有结束标签 ,在标签内结束
→比如 换行 <br/>(一般来说加上/更加标准)
→XML规范中,所有的标签都必须有结束标签
♠ 在HTML5文档中存在一些特殊字符无法直接使用。例如小于符号(<)和大于符号(>)是无法直接输出的,因为它们会被误认为是元素标签的组成部分;而连续空格也无法正确显示,会被浏览器缩减为单个空格。存在此类情况的一系列特殊字符在HTML5中称为字符实体(Character Entities)
html的操作思想 (理解即可)
网页中有很多数据,不同的数据可能需要不同的显示效果,这个时候需要使用标签把要操作的数据包起来(封装起来),通过修改标签的属性值实现标签内数据样式的变化。一个标签相当于一个容器,想要修改容器内数据的样式,只需要改变容 器的属性值,就可以实现容器内数据样式的变化。
4) 常用标签
1. 文字标签:修改文字样式
<font> </font> 属性: size: 文字的大小 取值范围 1-7,超出了7,默认还是7 face: <font face="字体名称:">文字</font> color: 文字颜色 (两种表示方式) 英文单词:red green blue black white yellow 使用十六进制数表示 #ffffff : RGB
2. 标题标签、段落标签、换行标签、水平线标签和特殊字符
A:标题标签
<!-- h1 到 h6 大小依次变小,同时自动换行--> <h1></h1> <h2></h2> <h3></h3> .......<h6></h6>
B:段落标签
p元素有多种属性,比较常用的是对齐方式align属性
<P align="center">一段居中的文字</P> <P align="right">一段居右的文字</P>
C:换行标签
<br> 换行标签<br>用于在当前位置产生一个换行,相当于一次回车键所 产生的效果。该标签单独使用,无结束标签 建议使用该标签代替回车键,因为回车键所产生的多个连续换行会被浏览器自动省略 <br>标签每次只能换一行,如需多次换行,必须写多个<br>标签
D:特殊字符
< < > > 空格 & &
3. 文本格式标签
A. 字体标签 <font> B. 斜体字标签 <i> C. 粗体字标签 <b> 和 <strong> D. 上标标签、下标标签 <sup> 和 <sub> E. 修订标签 <del> 和 <ins> F. 预格式化标签 <pre>
4. 列表标签
<!-- 无序列表 --> <ul> <li>无序列表项1</li> <li>无序列表项2</li> </ul> <!-- 有序列表 --> <ol> <li>有序列表项1</li> <li>有序列表项2</li> </ol>
TYPE取值 | 设置的符号样式 |
---|---|
1 | 以数字进行排列 ,系统默认 |
a | 以小写字母排列 |
A | 以大写字母排列 |
i | 以小写的罗马数字排列 |
I | 以大写的罗马数字排列 |
disc | 圆点符号,系统默认 |
circle | 空心原点 |
square | 空心方块 |
<!-- 定义列表 --> <dl> <dt>第一个词条 <dd>第一个词条的定义 ...... </dt> </dl>
5. 图像标签
<img src="图片的路径"/> 语法结构为: <img src="url" alt="替代文本" name="名字" width="宽度" height="高度" border="边框” > src:图片的路径 width: 图片的宽度 height:图片的高度 alt: 图片上显示的文字,把鼠标移动到图片上,停留片刻显示内容 有些浏览器下不显示(没有效果)
6. 绝路径和相对路径
相对位置 | 输入方法 | 举例 |
---|---|---|
同一目录 | 直接输入链接的文件 | a.html |
链接上一目录 | 先输出 “../” 再输入文件名 | ../b.html |
链接下一目录 | 输入目录和文件名,之间以 “/" 分隔 | test/c.html |
7. 超链接标签
A: 链接资源
<a href="链接到资源的路径"> 显示在页面上的内容 </a> href: 链接的资源的地址 target:设置打开的方式 ,默认是在当前页打开 可以取四个值
属性值 | 表示的含义 |
---|---|
_parent | 在上一级窗口打开(常在框架页面中使用) |
_blank | 新建一个窗口打开 |
_self | 在同一窗口打开,是默认取值 |
_top | 忽略所有的框架结构,在浏览器的整个窗口打开 |
B: 定位资源
<!-- 如果想要定位资源:定义一个位置 --> <a name="top">顶部</a> <!-- 回到这个位置 --> <a href="#top">回到顶部</a>
8. 移动文字标签
<marquee>移动文字内容</marquee>
属性 | 功能说明 | 属性取值 | 各属性值的功能 |
---|---|---|---|
behavior | 设置文字的移动方式 | Scroll、Slide、alternate | 循环移动、移动一次停止、来回交替移动 |
direction | 设置文字的移动方向 | left、right、up、down | 从右向左移动、从左向右移动、从下向上移动、从上向下移动 |
bgcolor | 设置文字的背景颜色 | 英文颜色名称 | 表示所用颜色 |
width | 设置文字背景的宽 | 数字 (或者百分比) | 设置背景的绝对宽度 |
heigth | 设置文字背景的高 | 数字 (或者百分比) | 设置背景的绝对高度 |
hspace和vspace | 设置文字背景和周围其他元素的空白间距 | 数字 | 设置文字背景和周围其他元素的空白间距的绝对值 |
loop | 设置移动文字的循环次数 | infinite、正整数 | 文字移动无限次、文字移动n次 |
sscrollmount | 设置移动文字每次移动的距离 | 数字(默认单位px) | 文字每次移动的距离 |
scrolldelay | 设置移动文字每次移动后的间歇时间 | 数字(默认单位px) | 文字每次移动后的间歇时间 |
9. 表格标签
可以对数据进行格式化,使数据显示更加清晰,可用于静态页面和动态页面的排版
<table></table>: 表示表格的范围 width:宽度 border:边框 cellpadding:定义内容和单元格的距离 cellspacing:定义单元格之间的距离。如果指定为0,则单元格的线会合为一条、 bgcolor:背景色 align:对齐方式 tr:定义行 bgcolor:背景色 align:对齐方式 td:定义单元格 colspan:合并列 rowspan:合并行 <caption></caption>:表格的标题
10. 表单标签
概念:用于采集用户输入的数据,用于和服务器交互,例如登录或者注册界面
<form></form>: 定义一个表单的范围 属性 action 指定提交数据的URL,默认提交到当前页面 method 指定表单提交方式,常用的有两种,get(默认)和post
简单说一说: get和post区别?
1、get请求地址栏会携带提交的数据,post不会携带
2、get请求安全级别较低,post较高
3、get请求数据大小的限制,post没有限制
输入项:可以输入内容或者选择内容的部分
大部分的输入项 使用 <input type="输入项的类型"/> 在输入项里面需要有一个name属性 普通输入项:<input type="text"/> 密码输入项:<input type="password"/> 单选输入项:<input type="radio"/> 复选输入项:<input type="checkbox"/> <!-- 在里面需要属性 name name的属性值必须要相同 必须有一个value值 实现默认选中的属性 checked="checked" --> 文件输入项 <input type="file"/> (后面上传时候用到) 下拉输入项 (不是在input标签里面的) <select name="birth"> <option value="1991">1991</option> <option value="1992">1992</option> <option value="1993">1993</option> </select> - 默认选择 selected="selected" 文本:<textarea cols="10" rows="10"></textarea> 隐藏项(不会显示在页面上,但是存在于html代码里面):<input type="hidden" /> 提交按钮:<input type="submit"/> <input type="submit" value="注册"/> 使用图片提交:<input type="image" src="图片路径"/> 重置按钮: 回到输入项的初始状态:<input type="reset"/> 普通按钮:<input type="button" value=""/>
11. 容器标签
A. <div>标签 标签<div>可将网页页面分割成不同的独立部分,通常用于定义文档中的区域或节。 该标签是一个块级元素(block level element),浏览器会自动在<div>和</div>所标记的 区域前后自动放置一个换行符。每个标签可有一个独立的id号。 同样属于块级元素的还有段落标签<p>、表格标签<table>、标题标签<h1>-<h6>等。 B. <span>标签 标签<span>通常作为文本的容器,它没有特定的含义和样式,只有与CSS同时使用才可以为指定文本设置样式属性。 该标签是一个内联元素(inline element),与块级元素相反,内联元素不会自动在前后自动放置换行符,因此内联元素会默认在同一行显示。
(二) 层叠样式表
多个样式可以作用在同一个html元素上,使得页面效果更加好,CSS将网页内容和显示样式进行分离,降低耦合度,提高了开发效率
(1) CSS和html结合的方式
内联样式在每个html标签上面都有一个属性 style,把css和html结合在一起
<div style="background-color:red; color:green;">
内部样式使用html的一个标签实现<style>
标签,写在head里面
<style type = "texy/css"> div{ background-color:blue; color:red; } </style>
补充样式style标签里面 使用语句(在某些浏览器下不起作用)
<style type="text/css"> @import uel(div.css); </style>
外部样式使用头标签 link,引入外部css文件,第一步 ,创建一个css文件
<link rel="stylesheet" type="text/css" href="css文件的路径"/>
一般使用第四种方式
优先级(一般情况)
由上到下,由外到内。优先级由低到高。
后加载的优先级高
(2) CSS的基本选择器
含义:要对哪个标签里面的数据进行操作
Θ标签选择器
使用标签名作为选择器的名称
div { background-color:gray; clolr:white; }
Θ class选择器(div.ideal)
每个html标签都有一个属性 class
<div class="ideal">test</div> .ideal { background-color:orange; }
Θ id选择器 (div#ideal)
每个html标签上面有一个属性 id
<div id="ideal">test</div> #ideal { background-color:#333300; }
优先级:style > id选择器 > class选择器 > 标签选择器
(3) CSS的扩展选择器
Θ 关联选择器(调用加空格)
<div><p>test</p></div> 设置div标签里面p标签的样式,嵌套标签里面的样式 div p { background-color:orange; }
Θ组合选择器
<div>aaa</div> <p>bbb</p> 把div和p标签设置成相同的样式,把不同的标签设置成相同的样式 div,p { background-color:orange; }
ΘCSS的盒子模型
在进行布局前需要把数据封装到一块一块的区域内(div)
—边框
border: 2px solid blue; border:统一设置 上 border-top 下 border-bottom 左 border-left 右 border-right
—内边距
padding:20px; 使用padding统一设置 也可以分别设置 上下左右四个内边距
—外边距
margin: 20px; 可以使用margin统一设置 也可以分别设置 上下左右四个外边距
—float:浮动
left:文本流向对象的右边 right:文本流向对象的左边
—布局定位
position: 属性值 absolute : 将对象从文档流中拖出 可以是top、bottom等属性进行定位 relative : 不会把对象从文档流中拖出 可以使用top、bottom等属性进行定位
∉ 到这里没有了∋
相關 软件应用
Url : 【 http://uuucd.cn/software/1824.html 】
额~ 本文暂时没人评论 来添加一个吧 …
发表评论