Html5,Css初学总结

网页制作

HTML

一、通用模板:

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta  charset=”UTF-8”/>

<title>文档标题</title>

<link  rel="shortcut icon"  href="img\wujiaoxing.ico"/>        <!- -设置标签页图标- ->

<link  rel=”stylesheet”   href=”url”/>        <!--外接样式表-->

</head>

<body>

<header  role=”banner”>

<nav  role=”navigation”> 页眉  </nav>

</header>

<main  role=”main”>

<article>

<section>

<p>主要内容</p>

</section>

</article>

</main>

<aside  role=”complementary” >附注栏的其他内容</aside>

<footer  role=”contentinfo”>页脚(如:版权)</footer>

</body>

</html>

二、网页三要素:

1. 元素标签:

(1) 同行显示:

<a> (链接标签) </a>

<em>(斜体标签)</em>

<strong>(粗体标签)</strong>

<code> 标记代码</code>

(2) 换行显示:

1. <h1> (标题1标签) </h1>

2. <h2> (标题2标签) </h2>

3. <article> (文章标签)</article>

4. <p> (段落标签) </p>

5.<main></main>注:一个页面最多使用一次!不能放置header; footer ; aside; article中

6. <header> </header>

7. <footer> </footer>

8. <hr> (分隔线标签) </hr>

9. <div>容器标签换行是 <div> 固有的唯一格式表现</div>

10. <section> 区块 </section>

(3) 未知:

1.<img> (图像标签) </img>

2.<font> (字体标签) </font>

3.<b> (粗体标签) </b>

4.<i> (斜体标签) </i>

5.<u> (下划线标签) </u>

6.<sup>(上标标签) </sup>

7.<sub>(下标标签) </sub>

8.<audio>   </audio>

9.<video>    </video>

10.<li> 列表</li>

11.<ol type=”a ” start=” 3”>

<li>有序列表</li>

<li>有序列表</li>

<li>有序列表</li>

</ol>

12.<ul type=”disc/circle/square”>

<li>无序列表</li>

<li>无序列表</li>

<li>无序列表</li>

 

</ul>

13.<ins>添加内容(表现为加下划线)</ins>

14.<del>删除内容(表现为加删除线)</del>

15.<cite>标签通常表示它所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。按照惯例,引用的文本将以斜体显示。

</cite>

16. <figure>标签规定独立的流内容(图像、图表、照片、代码等等)。</figure>

2. 属性:

<a>: href; title;

<img>: src; width; height; alt

3. 值:

 

三、其他:

4. 注释:

如:<!-- 我是被注释内容,并且在浏览器中不会显示 -->

5.学习相关链接:

网页转义符号HTML代码大全:http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

         HTML 系列教程:http://www.w3school.com.cn/h.asp

  各类标签及其用法:http://www.w3school.com.cn/tags/tag_doctype.asp

6.链接锚链接:链接到某一页面的特定区域。

 

 

CSS

模板:Selector(选择器){

Attribute(属性): value(值) ;

}     //  各种元素。

Color:#000000(黑色)/#ffffff(白色)

注:单斜杆表示或者!

1.链接样式:

a:link{

color: blue;

}       /*链接激活前的外观*/

a:hover{

color: orange;

}      /*鼠标指向链接时的外观*/

a:hover{

color: red;

}      /*激活链接后的外观*/

 

2.文本样式:

字体:

font-family: Geneva,Tahoma,sans-serif;        /*字体类型,三选一*/

font-style: italic/normal;              /*斜体和正体二选一*/

font-weight: bolder/bold/normal/lighter;        *更粗/正常/更细/三选一*/

font-size: 16px/1em;        /*字体大小,默认1em=16px*/

line-height:16px        /*行高*/

字间距:word-space:length(4px或其他);

字偶距:  letter-space:length(4px或其他);

添加缩进:text-indent: length(2em或其他);

对齐文本:text-align: left/right/center/justify(两端对齐);

修改文本大小写:text-transform: uppercase(大)/lowercase(小)/none;

装饰文本::text-decoration: underline/overline/through/none;

(下划线/上划线/删除线/无)

3.元素显示方式:display: block/inline/;    (换行/行内显示)

4.元素可见性:visibility: visible/hidden;

5.边框:border-style :dashed/solid/dotted ;   (虚线/实线/点划线)

border -width:

border -color:

border:2px solid red;

border-radius:length;  //边框圆角半径

6.外/内边距:margin-top/-bottom:length;

Padding:length;

Padding-top/bottom/left/right:length;

7.元素浮动:float:left/right/none;

8.清除浮动:clear:left/right;

9.处理溢出:overflow: visible/hidden/scroll/auto;

10.修改指针形状:cursor: pointer/default/crosshair/move/wait/help;

11.列表标记:

list-style-type:disc/circle/square….;

/*

disc:圆点;circle:圆圈;square:方块;decimal:数字;

upper-alpha:大写字母。

*/

12.有序列表:

<ol start=”2”>从2开始编号</ol>

List-style-position: inside/outside;

  13.fieldset(表单):

表单字段(type属性值):text/email/password/url/submit/radio(单)/checkbook(复选)

                <input type=”text” placeholder=”提示信息”>

单选框:

<p>

<input type="radio" id="tankzx" name="school" value="T"/>

<label for="tankzx" >tk</label>

</p>

复选框:

<p>

<input type="checkbox" id="tank" name="学校" value="TZ"/>

<label for="tank" >tk</label>

</p>

列表框:

<p>

<label for="state">State(国家):</label>

<select id="state" name="state" size=” ”>

<optgroup label=”xx”>      /*分组列表*/

<option value="ch">China</option>

<option value="usa">American</option>

</optgroup>

<option value="en">England<option>

</select>

</p>

14.表格:

<table>

<tr>                      //行标记

<th></th>      //表头标记

<td></td>       //单元格标记

</tr>

<tr>

<td></td>     //单元格标记

<td></td>       //单元格标记

</tr>

</table>

Javascript

1. 函数调用:

直接调用  (functionname(形参))

事件响应调用(onclick=”check()”)

超链接调用 (<a href=”javascript:check()”)

时间: 2024-10-13 12:27:16

Html5,Css初学总结的相关文章

W3cschool编程实战学习HTML5&amp;CSS实战简介《一》

上周感兴趣想学习一下HTML基础入门.(虽然可能和自己就业没多大关系,但是多了解一点总没坏处.)我在W3cshool上学习编程实战学习中HTML5&CSS的课程,由于平时比较忙,我只能每天晚上抽半个小时做题,本周末又恰逢研究生考试现场确认,因此,目前只写了前面一部分.后续会继续更新. html简单示例分析 <!DOCTYPE html> <html> <body> <h1>我是第一个标题</h1> <p>我是第一个段落.<

HTML5 css链接添加不同的样式

可以用css的选择器来为不同链接添加不同的样式,但经过测试,不知道为什么用id选择器并未成功,经过测试发现用class选择器是可行的,相关案例如下: 本案例是为了实现链接的文本跳转(由页面底部调到首部)和为不同链接添加不同样式,其中,底端链接单独添加了样式,代码如下: HTML5代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <

酷炫,用Html5/CSS实现文字阴影

前两天有一个学html5前端小美女问我一个有关文字阴影的效果怎么去实现.她和我说文字阴影嘛,她也知道text-shadow,.但是却做不出想要的样子,其实css3的新功能是很强大的,不要把你的思想太过于局限化,好了,闲话也不多说,咱们就先来看看这个文本阴影. 一.文字阴影text-shadow 文字阴影参数:参数1 : 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 参数2 :第2个长度值用来设置对象的阴影垂直偏移值.可以为负值 参数3 :如果提供了第3个长度值则用来设置对象的阴影模糊值.

Python第五周前端学习之HTML5/ CSS / JS

<!-- html/head/body 文本 - h1-h6 p / br / hr / sub / sup / strong / b / em / del / ins / 列表 - ul(li) / ol(li) / dl(dt/dd) / 图像 - img / figure / figcaption 链接 - a(页面链接/锚链接/功能链接) 表格 - table / tr / td / th / thead / tbody / tfoot 表单 - form / input (text /

HTML5&amp;CSS挑战

地址:https://www.w3cschool.cn/codecamp/list?pename=html5_and_css_camp 开始学习HTML标签:欢迎来到编程训练营的第一个编程挑战!你可以在文本编辑器中编辑我们嵌入到此网页中的代码.界面说明:左边是课程内容区.中间是代码编辑区.右边是运行显示区.你在文本编辑器中看到代码 <h1>Hello</h1> 了吗?这是一个HTML 元素 .大多数HTML元素都有一个 开始标签 和一个 结束标签 .开始标签看起来像这样: <

HTML5+CSS:02用户注册表单

新的学期已开始接近两个月了,还记得是在国庆节那几天申请的博客账号,可过了一个月都还没开始写博客,(>_<)有点小偷懒了,不过,学习还是不能落下的,今写一个有点实践运用的关于表单网页的代码,希望能够帮助到跟我一样H5的小白们,也请各位大佬多多指教!! 首先,先上我们敲的表单样式(如下): 其次,代码接上吖,Html5代码如下: <!DOCTYPE html><html>    <head>        <meta charset="UTF-8

HTML5——css基础语法

1.了解CSS CSS是一种用来表现HTML等文件样式的计算机语言,是对HTMl文件中设置的各种标签添加各种各样的样式与表达方式,让网页更生动,更美观. 2.导入CSS的三种方式 1.行内样式表:直接在<body>主体的HTML标签中,使用style""的方式引用: 比如设置一个div的大小: <div style="height:100px width:100px"></div> 优点:使用灵活,优先级权重最高 缺点:不符合w3

【CSS初学】一些选择器

css构造文本选择器:    text-indent:数值;设置文本缩进.    text-align:center;设置文本对齐,可选参数:left,center,right.    line-height:数值;设置文字行间距.    word-spacing:数值;单词之间的间隔.    letter-spacing:数值;字母,文字之间的间隔.    text-decration:underline;可定义文字下划线,默认状态none.    font-famile:字体名称:设置字体.

html5 css选择器。 井号,句号的区别

.理解CSS的样式组成CSS里的样式表是有规则组成的,每条规则有三个部分组成:1.选择器(如下面例子中的:"body"),告诉浏览器文档的哪个部分受规则影响:2.属性(如实例中的font-family.color等),规定了布局的什么方面被设置了:3.值(如实例中的Arial,sans-serif,#333333等),给出了式样属性的值. 二.CSS式样中不同符号的区别 #是ID选择器 .是class选择器 *是通配符号 比如*{margin:0:padding:0:所有的元素都会沿用