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、默认排列方式为从左到右