HTML知识点大全 + 部分CSS

时间:2019-01-10
本文章向大家介绍HTML知识点大全 + 部分CSS,主要包括HTML知识点大全 + 部分CSS使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

看到一段觉得比较励志的话:“当年我是个很普通的屌丝,一事无成,同学都很优秀,各种奖学金拿到天上去。终于发现一件可以做得来的事情,于是有了兴趣,然后在”follow your heart”这句话的激励下,披荆斩棘在前端这天路上走了出来。”现在的你,还不算晚,加油吧!

HTML:

1.<hr> 标签在 HTML 页面中创建水平线。希望在不产生一个新段落的情况下进行换行(新行)

2.<!-- 这是一个注释 -->   所有连续的空格或空行都会被算作一个空格。 <br>换行

3.<b>加粗文本</b>   <i>斜体文本</i>   通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。  <strong> 或者 <em>意味着你要呈现的文本是重要的,所以要突出显示  

4.<sub> 下标</sub> 和 <sup> 上标</sup>

5.<big>这个文本字体放大</big>  <small>这个文本是缩小的</small>

6.<pre>里面内容格式不变  包括空格</pre>

7.地址<address> </address>里面默认打出斜体

8.<bdo dir="rtl">该段落文字从右到左显示。</bdo>

9.删除文本和插入文本。<del>blue</del>中间有个横线     <ins>red</ins>下面有个横线  

10.target="_blank"链接将在新窗口打开

11.无边框的图片border="0"

12.书签 在当前页面链接到指定位置    <h2><a id="C4">章节 4</a></h2>  <a href="#C4">查看章节4</a>

13.使用 <meta> 元素来描述HTML文档的描述,关键词,作者,字符集等。

<meta name="description" content="免费在线教程">

<meta name="keywords" content="HTML,CSS,XML,JavaScript">

<meta name="author" content="runoob">  后面是前面的描述

14.<link> 标签定义了文档与外部资源之间的关系。

 <link rel="stylesheet" type="text/css" href="mystyle.css">

15.每30秒钟刷新当前页面:<meta http-equiv="refresh" content="30">

16.使用 style 属性制作一个没有下划线的链接 style="text-decoration:none;"

17.当特殊的样式需要应用到个别元素时,就可以使用内联样式。应用到很多页面的时候,

最好的方式是通过外部引用CSS文件.<link rel="stylesheet" type="text/css" href="mystyle.css">

18.font-family(字体),color(颜色),和font-size(字体大小)属性来定义字体的样式:

19.<h1 style="text-align:center;">居中对齐的标题</h1>

20.定义图像:<img src="url" alt="some_text" width="304" height="228">URL 指存储图像的位置。alt 属性用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。如果没有指定图片的大小,加载页面时有可能会破坏HTML页面的整体布局。

21.图片设置相同的大小尺寸会是相同的序列。使图片至段落的左边或右边。style="float:left"

22.创映射建图像。具体见http://www.runoob.com/try/try.php?filename=tryhtml_areamap可供点击区域的图像地图。

23.表格  <table> 标签。 <tr>行   <td>列 <th> 表头(在行标签里面可一个) 一般粗体居中。 无边框border="0"    <caption> ...</caption>带标题的表格    <th colspan="2">两列合并   <th rowspan="2">两行合并   <td>表格里面可以嵌套表格、列表。</td>      <table border="1" cellpadding="10">内容与边框之间有空白   <table border="1" cellspacing="10">单元格间距      <thead>、<tfoot> 和 <tbody> 也可以用。

24.无序列表<ul><li> 圆圈列表:<ul style="list-style-type:circle"> 圆点列表(黑色实心):<style="list-style-type:disc">  正方形列表:<style="list-style-type:square">   有序列表<ol start="50" /type="A"/"a"/"I">  <li>Coffee</li><li>Tea</li></ol>    50.Coffee51.Tea    自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

25.<span> 元素也没有特定的含义。可用于为部分文本设置样式属性。把 CSS 代码存放到外部样式表中,那么站点会更易于维护。通过编辑单一的文件,就可以改变所有页面的布局。由于创建高级的布局非常耗时,使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板(您可以使用这些预先构建好的网站布局,并优化它们)。

26.<form><input type="text" name="firstname" size="30">表单输入标签文本域长度   <input type="password">密码   <input type="radio" name="sex" value="male" >单选框  相同的name属性可以让name相同的单选框位于相同的组内  value提交到后台取的值是 value里的值       <input type="checkbox"> 定义了复选框. checked默认选中 <input type="submit"> 定义了提交按钮.会传送到action指定的位置

27.带有预选值的下拉列表。<form action=""> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </select>

28.文本域中写入文本。可写入字符的字数不受限制<textarea rows="10" cols="30">文本框。</textarea>

29.在数据周围绘制一个带标题的框。<fieldset> <legend>标题</legend> <input.....> </fieldset>

30.框架<iframe src="URL" width="200" height="200" frameborder="0"></iframe>URL指向不同的网页。移除边框。   使用iframe来显示目标链接页面<a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a>  点击后内部的网页跳转

31.0 是 hex code(十六进制编码)中最小的一个,它代表颜色的完全缺失。F 是 hex code(十六进制编码)中最大的一个,它代表最大可能的亮度。前两位表示颜色中红色的数量,第三四位代表绿色的数量,第五六位代表蓝色的数量。可以缩写成三位。另一个方法是使用 rgb 值。例如 body { background-color: rgb(0, 0, 0); }。

32.<script> 元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。<script>document.write("...")命令向页面输出文字</script>   只有在浏览器不支持脚本或者禁用脚本时,才会显示 <noscript> 元素中的内容<noscript>抱歉,你的浏览器不支持 JavaScrip</noscript>

33. 实体名称对大小写敏感!空格   <小于< ;    > 大于>

 

34.预定义文本。在input(输入)框输入任何东西之前放置在框中。<input type="text" placeholder="this is placeholder text">

35.action表单提交到服务器的地址。   <form action="/url-where-you-want-to-submit-form-data"></form>

36.submit(提交)表单中的数据将会被发送到你通过action属性指定的地址上。<button type="submit">button</button>

37.required把一个文本输入字段设置为必填项

<input type="text" required>

38.多选一radio。每一个单选按钮都应该嵌套在它自己的label(标签)元素中。单选按钮应该使用相同的name属性。<label><input type="radio" name="indoor-outdoor"> Indoor</label>

<label><input type="radio" name="indoor-outdoor"> Outdoor</label>

多选。checkbox规则同上。

39.按钮默认被选中。Checked。

<input type="radio" name="test-name" checked>

40.background-color 设置一个元素的背景颜色。.green-background {

  background-color: green;}

41.id 属性应该是唯一的。#

42.padding内间距 越大越高 负越大越低      margin外间距 越大越窄  负越大越宽

43.集中起来指定它们padding: 10px 20px 10px 20px;这四个值以顺时针方式排列:顶部、右侧、底部、左侧

44.其他元素将继承你的 body 元素的样式。

45.class="class1 class2"第二个声明总是比第一个具有优先权。<  同一行id 属性总是具有更高的优先级。<  行内样式将覆盖style="color: white" < 指定 关键字color: pink !important;

46.hex code 表示颜色0 是 hex code(十六进制编码)中最小的一个,它代表颜色的完全缺失。

F 是 hex code(十六进制编码)中最大的一个,它代表最大可能的亮度

前两位表示颜色中红色的数量,第三四位代表绿色的数量,第五六位代表蓝色的数量。

可以缩写成三位。另一个方法是使用 rgb 值。例如 body { background-color: rgb(0, 0, 0); }。

 

CSS:

1.选择器(h1)  一条或多条声明{属性:值;}  /*....*/注释

2.外部样式表 <head><link rel="stylesheet" type="text/css"href="mystyle.css"></head>   当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表   内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式

3.背景。默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体   只在水平方向平铺 background-repeat:repeat-x;    不平铺background-repeat:no-repeat;     改变图像在背景中的位置:background-position:right top;    右边距margin-right:200px不会打扰到文本   固定的背景图像 background-attachment: fixed;

4.文本。文本居中text-align:center;  当text-align设置为"justify",每一行被展开为宽度相等,左,右外边距是对齐   删除链接的下划线:text-decoration:none;underline;(带下划线)    可用于所有字句变成大写或小写字母,或每个单词的首字母大写。text-transform:uppercase;lowercase;capitalize;  文本的第一行的缩进。text-indent:50px;

5.增加或减少字符之间的空间。letter-spacing:2px;/-3px;   段落中行之间的空间更小/大行高line-height:70%/200%;     文本。从右到左的书写方向direction:rtl;    增加一个段落中的单词之间的空白空间word-spacing:30px;       文本的垂直对齐图像。文字与图形上/下面对齐vertical-align:text-top/bottom;        文本阴影。text-shadow:2px 2px red;

6.字体。设置文本的字体系列。不支持第一种字体,他将尝试下一种字体。如果字体系列的名称超过一个字,它必须用引号,p{font-family:"Times New Roman", Times, serif;}   斜体font-style:italic;    字体变淡或加粗font-weight:lighter;/bold;

7.链接。a:link {color:#000000;}      /* 未访问链接*/a:visited {color:#00FF00;}  /* 已访问链接 */a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */a:active {color:#0000FF;}  /* 鼠标点击时 */   a:hover 必须跟在 a:link 和 a:visited后面    a:active 必须跟在 a:hover后面     删除链接中的下划线:前两个text-decoration:none;    后两个text-decoration:underline;    指定链接背景色background-color:#B2FF99;     移动到链接上改变字体大小hover {font-size:150%;}

8.列表样式。{list-style-type:circle;/disc;/square;/upper-roman;/lower-alpha;}无序:小圆点、黑原点、黑方框、有序:罗马数字、字母。       作为列表项标记的图像list-style-image:url('sqpurple.gif');

9.设置垂直对齐vertical-align:bottom;/top;底部/顶部      内容与空格之间的边框:padding:15px;      边框的颜色border:1px solid green;   和th元素的文本color:red;和背景颜色background-color:green;:

10.盒子模型。总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距  

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

11.边框   可以指定不同的侧面不同的边框: border-style:dotted solid double dashed;上右底左

CSS 没有定义 3 个关键字的具体宽度,所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px,border-width" 属性 如果单独使用则不起作用。要先使用 "border-style" 属性来设置边框。border-style:solid;  border-width:5px;    border-color边框颜色

下边框的样式border-bottom-style:none;    左边框的宽度。border-style:solid1; border-left-width:15px;

12.轮廓。突出元素的作用。    用outline属性在元素周围画一条线。border:1px solid red outline:green dotted thick;边框外边有点线边框 。     轮廓的样式outline-style:dotted;   轮廓的颜色、宽度。outline-style:dotted;  outline-color:#00ff00 outline-width:thin;;

13.指定不同的侧面不同的边距:margin-top:100px;  可以不写top默认全选  上右底左

3个元素:上,左右,下        使用厘米值的文本的顶部margin。margin-top:10cm;   使用百分比值的下边距,相对于包含的元素的宽度。margin-bottom:50%;

14.分组选择器:每个选择器用逗号分隔。h1,h2,p{}   嵌套选择器:.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。

15.不同元素的高度。height:120px;/50%;    

上一页 下一页

原文地址:http://www.manongjc.com/article/42240.html