一、HTML+CSS基础知识学习笔记

最新推荐文章于 2024-10-07 21:54:14 发布

chovel

最新推荐文章于 2024-10-07 21:54:14 发布

阅读量5.8k

点赞数 22

文章标签： html 前端

本文链接：https://blog.csdn.net/u013047859/article/details/51485496

版权

注：如果早点了解那率性的你或者晚一点遇见成熟的我。学计算机的应该早点确定自己的技术方向，一定要有一个擅长的能够用来吃饭的，其他的能掌握多少就是多少，像我这样的什么都学，什么都不知道没什么卵用的。

1.HTML：Hyper Text Markup Language(超文本标记语言.)

文本:就是一个文件，包含一部分的文本内容.

标记语言：标记语言都是由标签组成. 一般情况下，标签分为开始和结束标签.

<font></font>

也有个别的标签：不需要结束. 例如<br/>

HTML的特点：
- 不区分大小写. <Font></font>
- 个别的标签可以没有结束.
HTML的结构

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

写在head的title中内容会显示到标题栏.写在body标签中的内容会显示到页面的内部.

2.meta 标记：
meta标记用于定义文件信息，是对网页文件进行说明，便于搜索引擎查找。放置于<head></head>之间。
用meta设置关键字：
<meta name = "keywords" content = "关键字">多个关键字用“,”分隔。
设置描述：<meta name = "description" content = "对关键字的扩展说明">
设置作者：<meta name = "author" content = "作者名">
设置字符集：<meta http-equiv = "content-type" content = "text/html;charset = gb2312">
编码格式：GB2312编码占用2个字节，UTF-8占用3个字节，如果网页文字较多，选择GB2312编码。
设置页面定时跳转：<meta http-equiv = "refresh" content = "2;URL = http://www.baidu.com"/>里面的2，代表2秒
上面的几个地方需要特别注意：
1.http-equiv之间不能加空格，否则没用，也就是不能写成“http - equiv”！
2.content-type也是一个整体，不能以空格分隔。

3.图片标记：
图片标记使用<img>标签就可以在页面中引入一张图片.

<img src=”4.jpg”>

src: 就代表的是图片的路径
* Src 要注意图片的路径问题 .
图片与文件在同一层路径！
图片与文件不在同一层路径！
Width ：代表图片的宽度
Height: 代表图片的高度
Alt: 图片的提示

<img src="../img/4.jpg" width="100" height="150" border="10" alt="美女!!!">

4.语义标签

<span>没有语义的标签，作用为设置单独的样式</span>

<q>简短文本的引用</q>

<blockquote>缩进文本，引用长段落</blockquote>

<br />换行

<hr />水平分割线

  空格

无序列表：<ul><li> 无序列表 </li></ul>

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

有序列表：<ol><li> 有序列表 </li></ol>

<ol>
  <li>信息1</li>
  <li>信息2</li>
   ......
</ol>

<div id="版块名称">给网页独立板块增加ID标记</div>

html注释

5.表格

eg:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>认识table表标签</title>
<style type="text/css">
table tr td,th{
    border:1px solid #000;
}
</style>
</head>
<body>
<table summary="本表格记录2012年到2013年库存记录，包括U盘和耳机库存量">
  <caption>2012年到2013年库存记录</caption>
  <tr>
    <th>产品名称 </th>
    <th>品牌 </th>
    <th>库存量（个） </th>
    <th>入库时