html+css基础课程总结1

一个html网页的hello world如下:




hello world

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。

2. CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

3. JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。

font-size:20px//字体大小

color:red//颜色

text-align:center//居中

标签:

内容

开始标签+内容+结束标签。标签之间可以嵌套。但是注意顺序。

标签:标签的作用。文档的头部描述了文档的各种属性和信息,包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

在中间可以插入的有:

 ...
    
    
    
    

html注释:
css注释:/*注释*/
ps:“ //”是没用的

在中的

为段落。其中中间的内容忽略空格、换行。两个段落中间自动换行。

是斜体强调,是加粗强调。

为选中部分文本,可在span的属性中调节属性。

表示引用,自动加引号,是小段文本的引用。

大段的文字引用,没有引号,但是自动缩进。


换行。单标签。

xhtml1.0写法:


html4.01写法:


大家注意,现在一般使用 xhtml1.0 的版本的写法(其它标签也是),这种版本比较规范。

 代表一个空格。


表示分界线。单标签。

html4.01版本 


xhtml1.0版本 


...一共有6个,逐级递减。表示标题。不唯一。

地址内容
 会换行 斜体

单行代码

多行,
 标签不只是为显示计算机的源代码时用的,在你需要在网页中预显示格式时都可以使用它,只是
标签的一个常见应用就是用来展示计算机的源代码。

pre能保存里面的格式,如空格,换行。

列表:

  • 插入无序列表信息 前面默认小圆点

    1. 有序 前面带1234的


    板块 使用id给予独一无二的名字


    表格:

    创建表格的四个元素:
    table、tbody、tr、th、td
    1、

    :整个表格以标记开始、
    标记结束。
    2、…:当表格内容非常多时,表格会下载一点显示一点,但如果加上标签后,这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。
    3、…:表格的一行,所以有几对tr 表格就有几行。
    4、…:表格的一个单元格,一行中包含几对...,说明一行中就有几列。
    5、…:表格的头部的一个单元格,表格表头。
    6、表格中列的个数,取决于一行中数据单元格的个数。
    1、table表格在没有添加css样式之前,在浏览器中显示是没有表格线的
    2、表头,也就是th标签中的文本默认为粗体并且居中显示

    摘要
    摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
    语法:


    标题
    用以描述表格内容,标题的显示位置:表格上方。
    语法:








    超链接:

    链接显示的文本 左边这是一个超链接

    click here!点击的页面在新的标签中打开

    标签还有一个作用是可以链接Email地址,使用mailto能让访问者便捷向网站管理者发送电子邮件。
    超链接的显示文本

    注意:如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。


    下载失败时的替换文本左边这是插入图片

    表单:

    1. :标签是成对出现的,以开始,以结束,表单里面的为传送的数据。
    2.action :浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
    3.method : 数据传送的方式(get/post),get在action后面加属性=value,而这是不安全的。

    左边这是输入框的格式们

    左边这是大段文本输入框,文本框的显示的长和宽(也可以用css来设置)

    下拉框:


    上边这是下拉框选择


    按钮:

    左边这是提交按钮

    左边这是重置按钮



    label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。


    placeholder 输入文本框内的提示灰色文字,具体可看这个链接
    http://www.cnblogs.com/snandy/p/4115883.html


    CSS:

    css可以规定格式,下面为简单举例
    p{
    font-size:12px;//字体大小
    color:red;//字体颜色
    font-weight:bold;//字体加粗
    }

    也可以定义选择的span部分的格式
    span{
    color:red;
    }

    p(选择符,表示选择了p){(这里面的就是声明)
    font-size:12px;(一般每个属性都会换行,后面也会加分号)
    color:red;(属性:值)
    }

    内联式css代码

    内容

    ,并且优先于其他的内嵌式和外部式,不过只针对当前的对象有效,下一次的p这个设置就没用了

    嵌入式css 一般在之间,如下



    一般写在head处,后面两个属性是固定写法不可更改。引用这个css,属于外部式css


    css
    内联式>嵌入式>外部式
    就近原则,当嵌入式比外部式更远,就采用外部式的css。
    权值会影响优先级

    每一条css样式声明(定义)由两部分组成,形式如下:
    选择器{
    样式;
    }

    你可能感兴趣的:(前端基础知识)

    标题文本