html,css学习笔记（一）

最新推荐文章于 2022-07-16 17:19:56 发布

fusangdi

最新推荐文章于 2022-07-16 17:19:56 发布

阅读量274

点赞数

分类专栏： html 文章标签： html css

本文链接：https://blog.csdn.net/fusangdi/article/details/10617899

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

由于之前工作需要，即学即用了一段时间的html，css。但是出于拿来就用的思想，学习的很是混乱，现在有时间静下心，准备重新系统的归纳提炼所学。若有不准确的地方，望大家指出，谢谢。

html作为一种标记语言，直观地对web内容——文本，视频，图像等进行了描述，比如，文本的排版，视频，图像的来源等。描述的方法就是html标记，也就是我们平时常见的<...>...</...>。举一个最简单的例子

<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 <head>
  <title>hello</title>
 </head>
 <body>
  <p>helloworld!</p>
 </body>
</html>

这个例子能在页面上显示最简单的helloworld了，而title属性中的描述会显示在页面标签上，也作为页面收藏书签时默认的名字。

html开始和结束标签之间内容通常称为html元素，这些元素大多数都拥有属性。class，id是比较常见的属性，而对于一些特别的标签来说也拥有一些特别的属性。

1.<a>

<html>
 <body>
  <a href="http://www.w3school.com.cn">W3School</a>
 </body>
</html>

这个例子中的<a>标签定义的锚，也是我们常见的链接——

未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的

2.<button>

<html>
 <body>
  <button type="button">Click Me!</button>
 </body>
</html>

页面中的按钮也是非常常用的,对于按钮我们会想到去悬停，点击等触发事件，所以这个元素相应的也存在一些事件属性如，onclick，onmouseover等，当对应的事件发生时便会执行相应的javascript代码。

3.<input>

<input type=“button”>与<button>存在一些相同,但input可以有单选框"radio"，多选框"checkbox"，文本域"text"，密码域"password"等更多特性

ps:<textarea>是用于多行输入的标签

4.表格标签

<html>
<body>
<caption>burget</caption>
<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

</body>
</html>

<caption>	标题
<table>	表格
<tr>	表格中的行
<th>	表头
<td>	表格中的单元格

5.<img>

<img src="/i/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" />

载入图像有两个重要的属性，一个是图像的来源src，另一个是在图像无法加载时显示的文本alt

6.<frame><frameset>

在我看来frame就是将页面划分为几块，不同的块显示不同的页面，在导航框架中经常采用这种方法

<html>
 <frameset cols="120,*">
   <frame src="/example/html/html_contents.html">
   <frame src="/example/html/frame_a.html" name="showframe">
 </frameset>
</html>

其中html_contents.html为

<html>
 <body>
  <a href ="/example/html/frame_a.html" target ="showframe">Frame a</a><br />
  <a href ="/example/html/frame_b.html" target ="showframe">Frame b</a><br />
  <a href ="/example/html/frame_c.html" target ="showframe">Frame c</a>
 </body>
</html>

7.<script> 定义脚本

<script type="text/javascript" src="js/calendar.js"></script>

8.<link>连接css库常用

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

以上是我曾经使用过的标签，其他的以后再写吧。^_^

对于html还有一个分类——块元素，内联元素（行内元素），可变元素，我也是上次面试的时候被问倒了，摘下来留作纪念了

内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素"a"。块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素cite加上display:block这样的属性，让他也有每次都从新行开始的属性。让他也有每次都从新行开始的属性即成为块元素,同样我们可以把块元素加上display:inline这样的属性，让他也在一行上排列。

block（块）元素的特点：

①总是在新行上开始；

②高度，行高以及外边距和内边距都可控制；

③宽度缺省是它的容器的100%，除非设定一个宽度。

④它可以容纳内联元素和其他块元素

inline元素的特点：

①和其他元素都在一行上；

②高，行高及外边距和内边距不可改变；

③宽度就是它的文字或图片的宽度，不可改变

④内联元素只能容纳文本或者其他内联元素

◎ address – 地址

◎ blockquote – 块引用

◎ center – 举中对齐块

◎ dir – 目录列表

◎ div – 常用块级容易，也是css layout的主要标签

◎ dl – 定义列表

◎ fieldset – form控制组

◎ form – 交互表单

◎ h1 – 大标题

◎ h2 – 副标题

◎ h3 – 3级标题

◎ h4 – 4级标题

◎ h5 – 5级标题

◎ h6 – 6级标题

◎ hr – 水平分隔线

◎ isindex – input prompt

◎ menu – 菜单列表

◎ noframes – frames可选内容，（对于不支持frame的浏览器显示此区块内容

◎ noscript – 可选脚本内容（对于不支持script的浏览器显示此内容）

◎ ol – 排序表单

◎ p – 段落

◎ pre – 格式化文本

◎ table – 表格

◎ ul – 非排序列表

内联元素(inline element)

◎ a – 锚点◎ abbr – 缩写

◎ acronym – 首字

◎ b – 粗体(不推荐)

◎ bdo – bidi override

◎ big – 大字体

◎ br – 换行

◎ cite – 引用

◎ code – 计算机代码(在引用源码的时候需要)

◎ dfn – 定义字段

◎ em – 强调

◎ font – 字体设定(不推荐)

◎ i – 斜体

◎ img – 图片

◎ input – 输入框

◎ kbd – 定义键盘文

◎ label – 表格标签

◎ q – 短引用

◎ s – 中划线(不推荐)

◎ samp – 定义范例计算机代码

◎ select – 项目选择

◎ small – 小字体文本

◎ span – 常用内联容器，定义文本内区块

◎ strike – 中划线

◎ strong – 粗体强调

◎ sub – 下标

◎ sup – 上标

◎ textarea – 多行文本输入框

◎ tt – 电传文本

◎ u – 下划线

◎ var – 定义变量