html的初步入门(关于html和css的一些用法)
1.1 html是什么:html是前段的基石。html是超文本标记语言。超文本:可以显示文字,符号,图像,音频,视频等多种信息的文档。标记:计算机可以标记的符号如<br>就表示换行。html是实现web页面(基于浏览器)核心技术(基础语言)。因此没有html我们平时用的浏览器页面将不复存在。
1.2 主流浏览器:ie,edge,safa等。
1.3 html文本中包括html标签和head,title,body等。
如下所示:
<html>
<head>
<title>test</title>
</head>
<body>
my name is TangXiaochun。
</body>
</html>
通过上面认识标签:
每个标签都有特定的含义
标签是成对出现的
标签必须被尖括号包围
2. 表单标签的使用和注意点
单选按钮的互斥条件:name属性去做。
已经写好了指定功能的标签—重置标签。
网站建设中的相对路径与绝对路劲问题
Input type=”text”:文本框—单行文本
placeholder=”请输入” required=” required” autofocus=”autofocus”
Input type=”radio”:单选按钮—设置一个name属性形成互斥条件
Input type=”password”:密码框---不显示实际的内容。
Input type=”checkbox”:复选框—可以同时选择多个信息。
Input type=”button”:按钮
Input type=”reset”:配合form表单可以重置信息
input type=”date”:时间标签配合form表单,会判断当前的数据格式是否正确
input type=”url”:网址标签
input type=”tel”:电话标签
input type=”email”:邮箱标签
input type=”file”:文件标签
input type=”color”:取色器
input type=”password”:密码标签
input type=”number”:
input type=”week”:可以计算出当前日期属于哪个周。
Select+option:下拉框
Textarea:文本域—可以写多行多列信息
Button:按钮
Img:可以通过src去设置一个图片,在浏览器中显示出来。
Br;换行标签。
Form:表单标签,action写最终数据需要提交的地址。
<a></a>:超链接
3.什么是css
专门用来美化标签
层叠样式表:Cascading Style Sheets
样式表:一套分割的集合(长度,宽度,颜色。。)
层叠:多个分割可以给一个标签使用。
4.html——选择器
为标签起一个名字
选择内容的条件和方式
4.2
Id选择器
每次只能明确的选择一个,并且必须是惟一的。
类名选择器
Class:可以同时作用到多个标签中。名字可以重复
标签选择器
以标签的名字作为选择标签的方式
伪类选择器
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
文章出处:标准之路(http://www.aa25.cn)
其他选择器
:first-child:选择第一个
:last-child:选择最后一个
:nth-child(2):任意选择
5.div布局
div是块级元素,就是可以占用一部分独立空间的标签。
div的出现就是专门用户页面布局使用--将一个空间切割成多个不同的空间。
使用div的时候必须要给width,height,background-color
5.2块级元素和内联元素的特征
【块级元素】
说明:块状元素代表性的就是<div>
1、 默认占一行
2、可以改变宽度和高度
3、宽度没有设置时,默认为100%
4、块级元素中可以包含块级元素和行内元素
【内联元素】
说明:内联元素最常使用的就是<span>
1、和其他元素在一行中,不会自动换行
2、高度、宽度以及内边距都是不可控的(设置width和height无效)
3、宽高就是内容的高度,不可以改变
4、行内元素只能行内元素,不能包含块级元素
5、对margin仅设置左右方向有效,上下无效;
padding设置上下左右都有效,即会撑大空间
【内联块状元素】
说明:内联块状元素综合了前两种的特性却又各有取舍
1、不自动换行
2、能够识别width和height
3、默认排列方式为从左到右