html+css基础课程总结1
2015-07-21 01:11
549 查看
一个html网页的hello world如下：
. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
3. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。
font-size:20px//字体大小
color:red//颜色
text-align:center//居中
标签：<p>内容</p>开始标签+内容+结束标签。标签之间可以嵌套。但是注意顺序。
<head>标签：
在<head></head>中间可以插入的有：
html注释：<!--注释-->
css注释：/*注释*/
ps:“ //”是没用的
在<body></body>中的
<p></p>为段落。其中中间的内容忽略空格、换行。两个段落中间自动换行。
<em></em>是斜体强调，<strong></strong>是加粗强调。
<span></span>为选中部分文本，可在span的属性中调节属性。
<q></q>表示引用，自动加引号，是小段文本的引用。
<blockquote></blockquote>大段的文字引用，没有引号，但是自动缩进。
<br />换行。单标签。
xhtml1.0写法：
html4.01写法：
大家注意，现在一般使用 xhtml1.0 的版本的写法（其它标签也是），这种版本比较规范。
代表一个空格。
<hr>表示分界线。单标签。
html4.01版本
xhtml1.0版本
<h1></h1>...一共有6个，逐级递减。表示标题。不唯一。
<address>地址内容</address> 会换行 斜体
<code></code>单行代码
<pre></pre>多行，<pre>
标签不只是为显示计算机的源代码时用的，在你需要在网页中预显示格式时都可以使用它，只是<pre>标签的一个常见应用就是用来展示计算机的源代码。
pre能保存里面的格式，如空格，换行。
列表：
<ur><li>插入无序列表信息
前面默认小圆点</li></ur>
<ol><li>有序
前面带1234的</li></ol>
<div>板块
使用id给予独一无二的名字
表格：
创建表格的四个元素：
table、tbody、tr、th、td
1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。
2、<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。
3、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
4、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。
5、<th>…</th>：表格的头部的一个单元格，表格表头。
6、表格中列的个数，取决于一行中数据单元格的个数。
1、table表格在没有添加css样式之前，在浏览器中显示是没有表格线的
2、表头，也就是th标签中的文本默认为粗体并且居中显示
摘要
摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
语法：<table summary="表格简介文本">
标题
用以描述表格内容，标题的显示位置：表格上方。
语法：
<table>
<caption>标题文本</caption>
<tr>
<td>…</td>
<td>…</td>
…
</tr>
…
超链接：
<a
href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a> 左边这是一个超链接
<a
href="目标网址" target="_blank">click here!</a>点击的页面在新的标签中打开
<a>标签还有一个作用是可以链接Email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件。
<a href="mailto:发送到的地址？cc=抄送地址&bcc=密件抄送地址;第二个密件抄送地址（cc和mailto也可以用";"）&subject=邮件主题&body=内容">超链接的显示文本<a>
注意：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。
<img
src="图片地址" alt="下载失败时的替换文本" title = "提示文本">左边这是插入图片
表单：<form
method=post;action=save.php>
1.<form>
：<form>标签是成对出现的，以<form>开始，以</form>结束,表单里面的为传送的数据。
2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
3.method ： 数据传送的方式（get/post），get在action后面加属性=value，而这是不安全的。
<input type="text/password（text输入/密码输入自带遮蔽）" name="名称" value="初始文本" />左边这是输入框的格式们
<textarea
rows="行数" cols="列数">文本</textarea>左边这是大段文本输入框，文本框的显示的长和宽（也可以用css来设置）
下拉框：
<select>
<option value="值" selected="selected"//此项被默认选择 >选项名</option>
</select>
上边这是下拉框选择
<select
multiple="mutiple">
多选，window用ctrl加单击多选，mac用Command加单击多选。。不过界面有点丑的，而且要多按一个键，感觉有点不友好呢。。。
</select>
按钮：
<input
type="submit" value="按钮上的显示" name="按钮的名字">左边这是提交按钮
<inpuut
type="reset" value="重置按钮的显示的文字">左边这是重置按钮
<laber
for="关联的id">
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 style="color:red">内容</p>，并且优先于其他的内嵌式和外部式，不过只针对当前的对象有效，下一次的p这个设置就没用了
嵌入式css
一般在<head></head>之间，如下
<style type="text/css">
span{
color:red;
}
</style>
<link
href="base.css" rel="stylesheet" type="text/css" />
一般写在head处，后面两个属性是固定写法不可更改。引用这个css，属于外部式css
css
内联式>嵌入式>外部式
就近原则，当嵌入式比外部式更远，就采用外部式的css。
权值会影响优先级
每一条css样式声明（定义）由两部分组成，形式如下：
选择器{
样式;
}
<html> <head> </head> <body> <h1>hello world</h1> </body> </html>
. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
3. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。
font-size:20px//字体大小
color:red//颜色
text-align:center//居中
标签：<p>内容</p>开始标签+内容+结束标签。标签之间可以嵌套。但是注意顺序。
<head>标签：
<head>标签的作用。文档的头部描述了文档的各种属性和信息，包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
在<head></head>中间可以插入的有：
<title>...</title> <meta> <link> <style>...</style> <script>...</script>
html注释：<!--注释-->
css注释：/*注释*/
ps:“ //”是没用的
在<body></body>中的
<p></p>为段落。其中中间的内容忽略空格、换行。两个段落中间自动换行。
<em></em>是斜体强调，<strong></strong>是加粗强调。
<span></span>为选中部分文本，可在span的属性中调节属性。
<q></q>表示引用，自动加引号，是小段文本的引用。
<blockquote></blockquote>大段的文字引用，没有引号，但是自动缩进。
<br />换行。单标签。
xhtml1.0写法：
<br />
html4.01写法：
<br>
大家注意，现在一般使用 xhtml1.0 的版本的写法（其它标签也是），这种版本比较规范。
代表一个空格。
<hr>表示分界线。单标签。
html4.01版本
<hr>
xhtml1.0版本
<hr />
<h1></h1>...一共有6个，逐级递减。表示标题。不唯一。
<address>地址内容</address> 会换行 斜体
<code></code>单行代码
<pre></pre>多行，<pre>
标签不只是为显示计算机的源代码时用的，在你需要在网页中预显示格式时都可以使用它，只是<pre>标签的一个常见应用就是用来展示计算机的源代码。
pre能保存里面的格式，如空格，换行。
列表：
<ur><li>插入无序列表信息
前面默认小圆点</li></ur>
<ol><li>有序
前面带1234的</li></ol>
<div>板块
使用id给予独一无二的名字
表格：
创建表格的四个元素：
table、tbody、tr、th、td
1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。
2、<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。
3、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
4、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。
5、<th>…</th>：表格的头部的一个单元格，表格表头。
6、表格中列的个数，取决于一行中数据单元格的个数。
1、table表格在没有添加css样式之前，在浏览器中显示是没有表格线的
2、表头，也就是th标签中的文本默认为粗体并且居中显示
摘要
摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
语法：<table summary="表格简介文本">
标题
用以描述表格内容，标题的显示位置：表格上方。
语法：
<table>
<caption>标题文本</caption>
<tr>
<td>…</td>
<td>…</td>
…
</tr>
…
超链接：
<a
href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a> 左边这是一个超链接
<a
href="目标网址" target="_blank">click here!</a>点击的页面在新的标签中打开
<a>标签还有一个作用是可以链接Email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件。
<a href="mailto:发送到的地址？cc=抄送地址&bcc=密件抄送地址;第二个密件抄送地址（cc和mailto也可以用";"）&subject=邮件主题&body=内容">超链接的显示文本<a>
注意：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。
<img
src="图片地址" alt="下载失败时的替换文本" title = "提示文本">左边这是插入图片
表单：<form
method=post;action=save.php>
1.<form>
：<form>标签是成对出现的，以<form>开始，以</form>结束,表单里面的为传送的数据。
2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
3.method ： 数据传送的方式（get/post），get在action后面加属性=value，而这是不安全的。
<input type="text/password（text输入/密码输入自带遮蔽）" name="名称" value="初始文本" />左边这是输入框的格式们
<textarea
rows="行数" cols="列数">文本</textarea>左边这是大段文本输入框，文本框的显示的长和宽（也可以用css来设置）
下拉框：
<select>
<option value="值" selected="selected"//此项被默认选择 >选项名</option>
</select>
上边这是下拉框选择
<select
multiple="mutiple">
多选，window用ctrl加单击多选，mac用Command加单击多选。。不过界面有点丑的，而且要多按一个键，感觉有点不友好呢。。。
</select>
按钮：
<input
type="submit" value="按钮上的显示" name="按钮的名字">左边这是提交按钮
<inpuut
type="reset" value="重置按钮的显示的文字">左边这是重置按钮
<laber
for="关联的id">
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 style="color:red">内容</p>，并且优先于其他的内嵌式和外部式，不过只针对当前的对象有效，下一次的p这个设置就没用了
嵌入式css
一般在<head></head>之间，如下
<style type="text/css">
span{
color:red;
}
</style>
<link
href="base.css" rel="stylesheet" type="text/css" />
一般写在head处，后面两个属性是固定写法不可更改。引用这个css，属于外部式css
css
内联式>嵌入式>外部式
就近原则，当嵌入式比外部式更远，就采用外部式的css。
权值会影响优先级
每一条css样式声明（定义）由两部分组成，形式如下：
选择器{
样式;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Web布局连载——两栏固定布局（五）
- [div+css]晒晒最新制作专题推广页模板
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- 通过Mootools 1.2来操纵HTML DOM元素
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页
- css 兼容性问题this.style.cursor=''hand''
- IE6不能正常解析CSS文件问题的解决方法及原因分析
- 欲练CSS ，必先解决IE的一些细节分析
- CSS文字截取功能实现代码
- 支持IE6 IE7 Firefox 的纯CSS的下拉菜单
- WEB标准网页布局中尽量不要使用的HTML标签
- 不同版本IE使用不同css(css条件注释语句用法)