HTML+CSS基础复习

重新温故了一遍慕课网的HTML+CSS基础课程,总结了以下知识点:

web前端开发基础技术: HTML、CSS、JavaScript语言

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

CSS样式是表现。比如标题字体、颜色变化、为标题加入背景图片、边框等等。

JavaScript是用来实现网页上的特效效果。如鼠标滑过弹出下拉菜单,滑过表格的背景颜色变化,与动画和交互相关。

HTML标签:

标题标签

段落标签

img图片标签

标签的语法、基本结构:
标签是由英文尖括号<>括起来;标签一般是成对出现的,分开始标签和结束标签。结束标签比开始标签多一个/;标签与标签之间是可以嵌套的,但先后顺序必须保持一致;HTML标签不区分大小写,

是一样的,但建议小写。

        …

        ...

称为根标签,所有的网页标签都在中

标签用于定义文档的头部,是所有头部元素的容器。
头部元素有、<script>、<style>、<link>、<meta>等标签。<br></p> <p><body>标签之间内容时网页的主要内容,有<hx>、<p>、<a>、<img>等网页内容标签,在这标签中的内容会在浏览器中显示出来。<br></p> <p>HTML代码注释:<!--注释文本--></p> <p><span style="font-size:14px;">head标签</span></p> <p>文档的头部描述了文档的各种属性和信息,包括文档的标题,但绝大多数文档头部包含的数据都不会真正作为内容显示给读者。<br>有以下标签<title>、<script>、<style>、<link>、<meta><br></p> <pre><code class="language-html"><head> <title>...

标签:<title>和标签之间的文字内容是网页的标题信息,出现在浏览器的标题栏中。

body标签

标签,网页上显示的内容放在这里,有

等网页内容标签。

标签,文章的段落放在

标签中。
语法:

段落文本


标签,文章的标题放在标签中。
语法:标题文本(x为1-6)。

是最高的等级。

加入强调语气,使用标签,语义是强调。
表示强调,默认用斜体表示;表示更强烈的强调,用粗体表示。
语法:需要强调的文本需要强调的文本

标签,作用是为文字设置单独样式,没有语义。
语法:文本
标签,短文本引用。语义:引用别人的文本。注意要引用的文本不用加双引号,浏览器会对标签自动添加双引号。
语法:引用文本
标签,长文本引用。语义:引用别人的文本。浏览器对
标签的解析是缩进样式,注意要引用的文本不用加双引号,浏览器会对
标签自动添加双引号。
语法:
引用文本


标签,分行显示文本。若想让句子换行,可以用
标签,相当于回车。
 相当于空格。

标签,添加水平横线。

标签,为网页加入地址信息,可以定义一个地址(E-mail)、签名或文档的作者身份。
语法:
联系地址信息

标签,加入一行代码。
语法:代码语言

标签,加入大段代码,被包围在pre元素中的文本通常会保留空格和换行符。
语法:
语言代码段

    标签,添加新闻信息列表。,可以用ul-li标签来完成,没有前后顺序的信息列表。
    语法:

    • 信息
    • 信息
    • ......

      标签,添加图书销售排行榜。如果想在网页中展示有前后顺序的信息列表,可以用
        标签来制作。
        语法:

        1. 信息
        2. 信息
        3. ......
        标签,在网页制作过程中,可以把一些独立的逻辑部分划分出来,相当于一个容器。语法:
        ...

        为了使逻辑更加清晰,我们可以为这一个独立的逻辑部分设置一个名称,用id属性来为
        提供唯一的名称。
        语法:
        ...

        标签,在网页中创建表格,有四个元素:table、tr、th、td。
        tr元素定义表格行,th元素定义表头、td元素定义表格单元。更复杂的HTML表格可能包括caption、col、colgroup、thead、tfoot以及tbody元素。

        1、

        ...
        :整个表格以标记开始、
        标记结束。
        2、...:表格的一行,所以有几对tr表格就有几行。

        3、...:表格的一个单元格,所以有几对td表格就有几列。

        4、...:表格的头部的一个单元格,表格表头。(文本默认为粗体居中)

        CSS样式

        caption标签,为表格添加标题和摘要。
        摘要:摘要的内容是不会在浏览器中显示出来的,它的作用是增加表格可读性,使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助用户读取表格内容。
        语法:


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

        标题文本

标签,可以实现超链接。
语法:
链接显示的文本
例如:click here!
上面的例子作用是单击click here!文字,网页将链接到http://www.imooc.com这个网页。
title属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大,主要方便搜索引擎了解链接地址的内容(语义化更友好)
因为标签在默认情况下,链接的网页是在当前浏览器窗口中打开的,如果想要新的浏览器窗口中打开:
click here!
标签还有一个作用是可以链接Email地址,使用mailto能让访问者便捷向网站管理者发送电子邮件。
HTML+CSS基础复习_第1张图片
注意:如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。

标签,为网页插入图片。
语法:下载失败时的替换文本
举例:My Image

1、src:标识图片的位置;
2、alt:指定图像的描述性文本,当图像不可见时,可看到该属性指定的文本;
3、title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);

4、图像可以是GIF、PNG、JPEG格式的图像文件。

标签,实现网站与用户进行交互,可以把浏览器输入的数据传送到服务器端,这样的服务器端程序可以处理表单传过来的数据。
语法:
标签是成对出现的。
action:浏览者输入的数据被传送的地方。
method:数据传送的方式。(get/post)

文本输入框、密码输入框
语法:

举例:

姓名:
密码:

1、type: 
    当type="text"时,输入框为文本输入框; 
    当type="password"时, 输入框为密码输入框。 
2、name:为文本框命名,以备后台程序ASP 、PHP使用。
3、value:为文本输入框设置默认值。(一般起到提示作用)


标签是成对出现的
cols:多行输入域的列数;rows:多行输入域的行数。
举例:

在使用表单设计调查表时,需用到单选框、多选框。
语法:

1、type:   

            当 type="radio" 时,控件为单选框

            当 type="checkbox" 时,控件为复选框 
2、value:提交数据到服务器的值(后台程序PHP使用)
3、name:为控件命名,以备后台程序 ASP、PHP 使用 
4、checked:当设置 checked="checked" 时,该选项被默认选中
HTML+CSS基础复习_第2张图片
注意:同一组的单选按钮,name 取值一定要一致,比如上面例子为同一个名称“radioLove”,这样同一组的单选按钮才可以起到单选的作用。

你可能感兴趣的:(前端)