HTML、CSS学习笔记

最新推荐文章于 2024-05-04 14:33:04 发布

VIP文章 HTTAO

最新推荐文章于 2024-05-04 14:33:04 发布

阅读量577

点赞数

分类专栏：知识点文章标签： html css

本文链接：https://blog.csdn.net/qq_43364212/article/details/83009486

版权

#一、HTML

##1.名词解释：
   WWW：Word Wide Web，万维网
   W3C：World Wide Web Consortium，万维网联盟/W3C理事会。
   HTML：Hyper Text Markup Language，超文本标记语言。
   CSS：Cascading Style Sheet，级联样式表。
   XHTML：eXtensible HyperText Markup Language，可扩展超文本标记语言。
##2.参考网页的源代码。右击，查看源文件。
##3.HTML不是编程语言，而是一种描述性的标记语言。标记：就是用来描述网页内容的一些特定符号。
##4.html标记的语法：标记分为两种，单标记、双标记
   <标记符>没有结束的标记—单标记
   <开始标记符></结束标记符>—双标记
##5.需要注意的：
   在xhtml中规定，所有html标记，都要小写
   所有的标记，都是要有关闭符号的。如下：
   html-------xhtml
   <br>------<br />
   <标记名称属性 = " 属性值 ">……</标记名称>
   所有html都有一个基本结构。
   网页的head信息，标识网页文件的头部信息，如标题、搜索引擎关键字等。
6.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也是一个整体，不能以空格分隔。
7.<body>标记的详解：
   【1】<body>是网页的主体标记。
   【2】注释的写法：。
   【3】<body>的属性：
       <body bgcolor = "背景颜色" backgroud = "背景图片的路径" text = "文本颜色" link = "链接文本颜色" vlink = "访问过的链接颜色" alink = "激活的链接颜色" leftmargin = "左边界" rightmargin = "右边界" topmargin = "上边界" bottommargint = "下边界">。上面的边界的单位都是像素。
   【4】html元素、html标签、html标记都是一样的。
   【5】有些html元素，有默认的值，比如margin，它不是直接靠在页面的边缘或顶端的，而是空了一点距离，如果想取消这个可以把leftmargin或者topmargin都设置为0。
8.标记语义的应用：
   【1】font标记没有语义上的作用。
   【2】普通加粗标记：<b>文字内容</b> 普通倾斜标记：<i>文字内容</i>，二者都没有在语义上突出是重点的意思。
   【3】语义加强加粗标记：<strong>文本内容</strong> 语义加强的倾斜标记：<em>文本内容</em>，二者都告诉了浏览器，加粗或倾斜的是重点。
   【4】各个标记之间的权限不同，当控制比较重要的内容时，可以用<strong>，标题部分，一般都用<h1>标记。
   【5】下划线<u>文本</u>；删除线<s>文本</s>；上标<sup>文本<sup>；下标<sub>文本<sub>，<br />换行标记。
   【6】段落(paragraph)标记<p></p>：
       格式：<p align = "对齐方式(left、center、right)">……</p>
   【7】用适合的html标记，去描述网页内容，这才是网页优化的核心。
9.标题：
   【1】<hn align = “对齐方式”>标题内容<hn> ，标题标记，n的取值范围是1 - 6。标题标记内的文本会以加粗方式显示，hn针对的是段落，font标记针对的是任意对象的文字。
   【2】align属性。
10.<br />换行标记：
   【1】<br />换行不分段，在一个段落里面换行。
11.<hr /> 水平分割线：
   【1】主要属性：
       align属性，分割线的对齐方式；
       size属性，像素值和百分比，数值越大，线越粗；
       width属性，像素值和百分比，决定线的长度。其中，像素值是一个绝对的值，不会随着窗体大小的改变而改变。
       noshade属性，不带阴影，纯色的实体线。
       color属性，颜色。
11.在xhtml中，所有的标签都必须有属性值，如果没有，就是用属性名，例如：<hr noshade = "noshade" />，在html中，可以直接写成<hr noshade>。
12.特殊标记：
   【1】定义一个块应用：文本缩进标记<blockquote>...</blockquote>
       属性：cite url被引用的地址。如：
       <blockquote cite = "http://www.baidu.com">
       引用的正文……
       </blockquote>
   【2】<center>……</center> 居中(在xhtml中已被废弃的标记)。

   【3】预格式化：<pre></pre>
13.特殊字符（转义符）的输入：
   【1】特殊字符   转义码
       空格： 
       版权号©：©
       注册商标®：®
       引号"："
       and符号＆：&
       小于符号（＜）：<
       大于符号（＞）：>
14.网页中信息的排序显示：
   【1】列表的标记：
       1、无序列表<ul>...</ul> [Unordered List 无序列表]
           语法：<ul type = "项目符号类型">
                   <li type = "项目符号类型">列表内容1</li>
                   <li>列表内容2</li>
                   ……
               </ul>
           说明：<li>...</li>表示一个列表。项目符号类型有三种，disc是实心圆圈，circle是空心圆○，square是正方形。
       2、有序列表<ol>...</ol> [Order List（有序列表），li = list]
           语法：<ol start = "列表起点" type = "项目符号类型">
                   <li>列表内容1</li>
               </ol>
           说明：start属性，表示列表从哪个数字开始，type属性的值有：1、a、A、i、I。也可用上面无序列表的符号。
           1 表示编号从阿拉伯数字1开始依次往后。
           a 表示小写英文字母开始，a、b、c、d
           A 表示大写的英文字母。
           i 表示小写的罗马数字，i、ii、iii、iv
           I 表示大写的罗马数字，I、II、III、IV
       3、定义列表<dl>...</dl> [define list 定义列表]
           语法：<dl>
                   <dt>标题1</dt>
                   <dd>内容1</dd>
                   <dd>内容2</dd>
                   <dt>标题1</dt>
                   <dd>内容1</dd>
                   <dd>内容2</dd>
               </dl>
           说明：
               <dl>...</dl>定义一个列表；
               <dt>...</dt>表示一个项目（标题）；
               <dd>...</dd>表示一个项目（标题）下更详细的内容的解释。
15.图片：
   【1】语法：<img src = "图片路径" />。注：src = source。
   【2】网页常用图片格式：
       GIF：最多只能保存256种颜色，支持透明色，支持动画；
       JPEG：不支持透明及动画，颜色可达1670万种。
       PNG：支持透明色，不支持动画，颜色从几种到1670万种。
   【3】路径：
       绝对路径：提供文档全部主机名、路径及文档名称。
       相对路径：当前文档开始的路径。一般都用相对路径，把图片和网页放在同一个文件夹内。../向上一级目录。
       根相对路径：

   【4】标记属性：
       ■src：图片的路径，URL。
       ■alt：规定图片的替代文本（图片无法显示时），文本。
       ■title：鼠标悬停时显示的内容，文本。
       ■width：设置图片宽度，像素值和百分比，设置成百分比的时候，是相对于浏览器窗口的。
       ■height：设置图片高度，像素值和百分比。
       ■border：设置图像的边框，像素值。
       ■align：对齐方式。
           ●left：图片靠左，文字靠右
           ●right：图片靠右，文字靠左
           ●top：文字垂直居上，文字在右边。
           ●middle：文字垂直居中，文字在右边。
           ●bottom：文字垂直居下（默认值），文字在右边。
       ■vspace：定义图像顶部和底部的空格（垂直边距），像素值。
       ■hspace：定义图像左侧和右侧的空白（水平边距），像素值。
16.网页布局思想：
   【1】传统的table标记，发展到DIV+CSS。
   【2】从大到小排列。
   【3】从左到右，从上到下。
17.网页布局之table标记：
   【1】基本结构：
       ●<table>...</table>定义表格
       ●<tr>...</tr>定义表行，是table row的缩写，row，“行”的意思。
       ●<td>...</td>定义单元格，是table data cell的缩写，cell，“单元格”。
       ●<th>...</th>定义标题栏（文字加粗）。
   【2】属性：
       ●<table bgcolor = "">，设置表格的背景颜色。
       ●<table

最低0.47元/天解锁文章

HTTAO

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML、CSS学习笔记

#一、HTML##1.名词解释： WWW：Word Wide Web，万维网 W3C：World Wide Web Consortium，万维网联盟/W3C理事会。 HTML：Hyper Text Markup Language，超文本标记语言。 CSS：Cascading Style Sheet，级联样式表。 XHTML：eXtensible Hyp...
复制链接

扫一扫