文档章节

1) html+css

烤个鸡翅
 烤个鸡翅
发布于 2015/12/04 13:11
字数 2299
阅读 12
收藏 0

从 慕课网《HTML+CSS基础课程》 学习整理。

------------------------------------------正文---------------------------------------

Html和CSS的关系

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

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

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

----------------------------------------------------------------------------------------------

认识html文件基本结构

<html>
    <head>...</head>
    <body>...</body>
</html>

<html></html>称为根标签,所有的网页标签都在<html></html>中。

<head> 标签用于定义文档的头部,它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签。

在<body>和</body>标签之间的内容是网页的主要内容,如<h1>、<p>、<a>、<img>等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。

----------------------------------------------------------------------------------------------------

认识head标签

<head>
    <title>...</title>
    <meta>
    <link>
    <style>...</style>
    <script>...</script>
</head>

<title>标签:在<title>和</title>标签之间的文字内容是网页的标题信息,它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么,

搜索引擎可以通过网页标题,迅速的判断出网页的主题。每个网页的内容都是不同的,每个网页都应该有一个独一无二的title。

用css样式,为表格加入边框

<style type="text/css">
    table tr td,th{border:1px solid #000;}
</style>

上述代码是为th,td单元格添加粗细为一个像素的黑色边框。用 css 样式代码。

---------------------------------------------------------------------------------------------

<body>标签,网页上显示的内容放在这里

<hx>标签,为你的网页添加标题

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

<p>标签,添加段落,有几段文字,就要把几段段落分别放到数个<p>标签中

<p>文章第一段</p>
<p>文章第二段</p>
<p>文章第三段</p>

<strong>和<em>,加强语气

<em>默认斜体</em>  
<strong>默认粗体</strong>

<span>标签,为文字设置单独样式。需要在<head></head>里定义

<style>
    span{
    color:blue;
    }
</style>

<q>标签,短文本引用

浏览器会自动显示双引号,但不是它的默认样式双引号(如果这样我们不如自己在键盘上输入双引号就行了)           它的语义:引用别人的话。

<blockquote>标签,长文本引用

引用文本比较长,就使用<blockquote>,文本的两边会缩进

&nbsp; ,Html中的空格

在HTML的代码中输入N个空格网页中只会显示一个

需要空格就必须 &nbsp; 

<br>标签,分行显示文本

相当于word文档中的回车

html 中, 回车和空格是会被忽略的

没有HTML内容的标签就是空标签,空标签只需要写一个开始标签

如 <br />、<hr />和<img />。

<hr>标签,添加水平横线

默认样式线条比较粗,颜色为灰色

学习了css样式表之后,可以对其修改

<address>标签,为网页加入地址信息

<address>联系地址信息</address>,默认斜体

想加入一行代码吗?使用<code>标签

在文章中一般如果要插入多行代码时不能使用<code>标签了。

<pre>标签,为你的网页加入大段代码

<pre> 标签的主要作用:预格式化的文本。展示计算机的源代码。

被包围在 pre 元素中的文本通常会保留空格和换行符。

需要在网页中预显示格式时也可以使用它

使用ul,添加新闻信息列表

        ul-li在网页中显示的默认样式一般为:每项li前都自带一个圆点列表使用ul-li标签来完成。

        ul-li是没有前后顺序的信息列表。

<ul>
    <li>信息</li>
    <li>信息</li>
    ......
</ul>

使用ol,添加图书销售排行榜

语法同ul-li

用于在网页中展示有前后顺序的信息列表

<div>标签,为网页划分独立的版块

在网页制作过程过中,可以把一些独立的逻辑部分划分出来,

        放在一个<div>标签中,这个<div>标签的作用就相当于一个容器。

        给div命名,使逻辑更加清晰

<div  id="版块名称">…</div>

        用id属性来为<div>提供唯一的名称

<table>标签,认识网页上的表格

table表格在没有添加css样式之前,在浏览器中显示是没有表格线的

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

table:整个表格以<table>标记开始、</table>标记结束。

tbody:加上<tbody>标签后,就要等表格内容全部下载完才显示。

tr:表格的一行,所以有几对tr 表格就有几行。

td:表格的一个单元格,一行中包含几对<td>...</td>,说明一行中就有几列。

th:表格的头部的一个单元格,表格表头。 表头,也就是th标签中的文本默认为粗体并且居中显示

<body>
<table>
    <tbody>
        <tr>
          <th>班级</th>
          <th>学生数</th>
          <th>平均成绩</th>
        </tr>
        <tr>
          <td>一班</td>
          <td>30</td>
          <td>89</td>
        </tr>
        <tr>
          <td>二班</td>
          <td>35</td>
          <td>85</td>
        </tr>
    </tbody>
</table>
</body>

<caption>标签,为表格添加标题和摘要

表格需要添加一些标签进行优化,可以添加标题和摘要。

摘要:摘要的内容是不会在浏览器中显示出来的。

        它的作用是增加表格的可读性(语义化)

语法:<table summary="表格简介文本">

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

<table>
    <caption>标题文本</caption>
    <tr>
        <td>…</td>
        <td>…</td>
        …
    </tr>
    …
</table>

使用<a>标签,链接到另一个页面

<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>

title属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容。

<a href="目标网址" target="_blank">click here!</a>

加入target之后将在新建浏览器窗口中打开链接

使用mailto在网页中链接Email地址

如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,

后面的参数每一个都以“&”分隔。

完整实例:<a href="邮件收件人地址?cc=抄送人地址&bcc=密件抄送&subject=主题&body=邮件内容">发送</a>

<img>标签,为网页插入图片

<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

src:标识图像的位置。图像可以是GIF,PNG,JPEG格式的图像文件

使用表单<form>标签,与用户交互

表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。

<form   method="传送方式"   action="服务器文件"></form>

<form    method="post"   action="save.php">
    <label for="username">用户名:</label>
    <input type="text" name="username" />
    <label for="pass">密码:</label>
    <input type="password" name="pass" />
</form>

action :浏览者输入的数据被传送到的地方

method : 数据传送的方式(get/post)

        0.form表单中的label标签

<label for="控件id名称">

标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

1.文本输入框、密码输入框

<input type="text/password" name="名称" value="文本" />

type:当type="text"时,输入框为文本输入框;

        当type="password"时, 输入框为密码输入框。

name:为文本框命名,以备后台程序ASP 、PHP使用。

value:为文本输入框设置默认值。(一般起到提示作用)

2.文本域,支持多行文本输入

<textarea  rows="行数" cols="列数">文本</textarea>

3.使用单选框、复选框,让用户选择

单选框中的选项用户只能选择一项,

而复选框中用户可以任意选择多项,甚至全选

<input   type= " radio(单选)/checkbox(复选)"   

value=" 值 "name="名称"   checked="checked"/>

checked:当设置 checked="checked" 时,该选项被默认选中

value:提交数据到服务器的值(后台程序PHP使用)

name:为控件命名,以备后台程序 ASP、PHP 使用

同一组的单选按钮,name 取值一定要一致

4.使用下拉列表框,节省空间

<form action="save.php" method="post" >
    <label>爱好:</label>
    <select>
        <option value="看书">看书</option>
        <option value="旅游">旅游</option>
        <option value="运动">运动</option>
        <option value="购物">购物</option>
    </select>
</form>

若将<select>改写成<select multiple="multiple">,

则让“爱好”下拉列表框具有多选功能

5.提交,重置按钮

<input type="submit"   value="提交">

<input type="reset" value="重置">    value:按钮上显示的文字

-------------------------------------------------------------

HTML的代码注释:   <!--注释文字 -->


© 著作权归作者所有

共有 人打赏支持
烤个鸡翅
粉丝 0
博文 13
码字总数 7269
作品 0
私信 提问
初学HTML

本人打算学习HTML+css,是看HTML+css好还是HTML5+css3好,还有一般的学习路径是怎么样的

指间流沙
2015/12/05
173
2
北京东方网力诚聘HTML+CSS,Rails,js,as,java程序员

北京东方网力公司(http://www.netposa.com)诚聘HTML+CSS前端设计人员,Rails程序员,javascript程序员,actionscript程序员,java程序员等进行企业软件开发,包括办公自动化、项目管理、视频会议...

Imy
2011/02/13
439
0
兼职网页设计师招聘

兼职网页设计师招聘要求: 1)熟悉html+css,能熟练使用流行的网页设计工具如dreamweaver; 2) 美感好,能熟练使用photoshop; 3)懂javascript优先考虑;...

Duke_zeng
2013/02/28
99
0
兼职网页设计师招聘

兼职网页设计师招聘要求: 1)熟悉html+css,能熟练使用流行的网页设计工具如dreamweaver; 2) 美感好,能熟练使用photoshop; 3)懂javascript优先考虑; QQ:543942825...

Duke_zeng
2013/02/28
170
0
北京招前端兼职,位置不限,按页面付费

现在有一个项目,需要找前端兼职 您需要具备的技能: 1: 熟悉W3C标准,熟练使用HTML+CSS进行各种网页布局,兼容主流浏览器 2:熟悉基本的javascript 您的业务: 1:将设计图转换为html 我们...

北京冰帆科技
2015/05/05
1K
5

没有更多内容

加载失败,请刷新页面

加载更多

Java Sound Programmer Guide

Introductory Material Preface For Whom This Guide Is Intended What this Guide Describes For More Information Chapter: 1 Introduction to the Java Sound API Design Goals Who is th......

祖冲之
13分钟前
1
0
HTTP协议状态码304和200区别

当浏览器第一次加载资源的时候,返回一般为200,意思是成功获取资源,并会在浏览器的缓存中记录下max-age; 当第二次访问的时候:如果只是用浏览器打开,那么浏览器会去判断这个资源在缓存里...

晚风0623
13分钟前
2
0
阿里云物联网平台体验(树莓派+Python篇)

虽然对阿里云物联网平台比较熟悉了,从一开始就有幸参与了飞凤平台(Link Develop 一站式开发平台的前身)的一些偏硬件接入的工作。但是同时也见证了阿里云物联网团队从几十人到数百人的迅速...

阿里云云栖社区
26分钟前
0
0
java单例设计模式

实现方法一 package com.hs.pattern.singleton;/** * 优点:实现简单 * 缺点:线程不安全 * 例如:当两个线程都运行到if( singleton == null ),而singleton确实为空,则两个线程都...

yangyangyyyy
31分钟前
1
0
MacOS下安装MongoDB数据库

官方链接:Install MongoDB Community Edition on macOS 推荐大家使用Homebrew安装 ##1.更新 Homebrew’s 包版本 brew update 2.安装MongoDB brew install mongodb 休息片刻,等他安装完就...

凌宇之蓝
31分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部