HTML与CSS入门经典笔记
HTML与CSS入门经典笔记
第五章
1、三种HTML列表：①、带编号的列表称为有序列表。
有序列表以<ol>标签开始，以</ol>标签结束。
②、带项目符号的列表称为无序列表。
无需列表以<ul>标签开始，以</ul>标签结束。
③、术语及其定义组成的列表称为定义列表。
定义列表以<dl>标签开始，以</dl>标签结束。
在每个要定义的术语前都加上<dt>标签，每个定义前都加上<dd>标签。
术语和定义自动缩进和分行。
（定义列表符号样式：list-style-type）
2、文本对齐方式：text-align；<strong>标签的作用与<b>标签相同，而<em>标签的作用与
<i>标签相同；字体大小：font-weight；字体类型：font-style；设置字体：font-family；设置字号：font-size；。
html-css上课笔记
HTML语言剖析Html简介-目录全写： HyperText Mark-up Language译名：超文本标识语言简释：一种为普通文件中某些字句加上标示的语言，其目的在于运用标签（tag）使文件达到预期的显示效果。
由文字（字母，数字、标点符号）及标签组合而成。
任何文字编辑器都可以，这里推荐用：Dreamweaver。
1. Html特点：►描述性语言，结构语言，用于决定网页内容以什么样的形式显示；►通过标签来控制网页的文档、字符和段落等的格式，以及对脚本语言等的调用；►纯文本文件，可以使用各种文本编辑器编写； (Dreamweaver是首选)►文件扩展名： .htm 或 .html；►html文件必须在Web浏览器上运行；（运行环境）►具有跨平台性。
2.HTML语法结构：►HTML文件是由一系列的元素和标签（tag）组成的；►元素：网页中的内容；►标签：用于规定元素的属性和它在文件中的位置；►格式：<元素名称属性="值"...>元素资料</元素名称>,<元素名称属性="值"...> ►不区分大小写。
3.HTML文件结构：►起始标记：<html> </html> 表示HTML网页的起始；►文件头部：<head> </head> 设置初始化文档信息和文档管理标注；►文件主体：<body> </body> 设置格式化的浏览器显示的文档（内容）；►注释部分：<!-- --> 可以放在任何位置；►<! >※例:<html><head><title>Html简介</title><meta http-equiv="Content-Type" content="text/html;charset=gb2312"></head><body bgcolor="#FFFFFF" text="#000000"><!--网页内容--></body></html>⏹标签写法：►任何标签皆由"<>"所包含，如 <b>►标签名与小于号之间不能留有空白字符。
html+css笔记
注意：1、css样式文件名称以有意义的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
<img>：显示图片，语法：<img src="图片地址" alt="下载失败时的替换文本" title = "鼠标滑过图片时显示的文本"> ；图像可以是GIF，PNG，JPEG格式的图像文件。
交互：
<form> : 表单，标识与浏览者交互数据，获取浏览者输入，并传送到服务器上。
1.标签选择器，在<style> 内声明标签(也即选择器)及其样式；
2.类选择器： <style> 内声明，以 . 开头，任意名称的选择器(除中文外)，如：.haha{color:red } ；在<body> 内匹配内容时要用< span class="haha"> 来选择内容。
css:
基础语法：在html文件的<style>标签体内，做一个选择样式标签的选择器及其声明，声明由属性和值组成，多条属性间用；隔开。
比如： <style> a{ color:bule;font-size:12px} </style>
然后在<body>内用标签<a></a>选择需要样式a匹配的内容。
<caption> : 表格标题，一般紧接着<table> 标签之后。
html和css快速重点学习笔记
1.基本结构这一节中我们来学习html文件的结构：一个HTML文件是有自己固定的结构的。
<html><head>...</head><body>...</body></html>2.语义化。
那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理）语义化的好处：1.更容易被搜索引擎收录。
2.更容易让屏幕阅读器读出网页内容。
3.如果想在网页上显示文章，这时就需要<p>标签了，把文章的段落放到<p>标签中。
语法：<p>段落文本</p>4.我们将使用<hx>标签来制作文章的标题。
标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。
并且依据重要性递减。
<h1>是最高的等级。
语法：<hx>标题文本</hx> (x为1-6)5.想在一段话中特别强调某几个文字这时候就可以用到<em>或<strong>标签。
但两者在强调的语气上有区别:<em> 表示强调，<strong> 表示更强烈的强调。
并且在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。
两个标签相比，目前国内前端程序员更喜欢使用<strong>表示强调。
语法：<em>需要强调的文本</em> <strong>需要强调的文本</strong>6.<span>标签是没有语义的，它的作用就是为了设置单独的样式用的。
语法：<span>文本</span>7.想在你的html中加一段引用比如在你的网页的文章里想引用某个作家的一句诗，这样会使你的文章更加出彩，那么<q>标签是你所需要的。
html+css学习笔记
课程安排Html+css 网页版游戏制作花生壳将内网IP映射到外网IP 飞秋局域网即时通讯Httpwatch 插件一，Html开发工具记事本Zend studioEditplus vimDwFrontpage其他二，html的基本结构<html><head></head><body><元素属性1 = “属性值”..>内容</元素 ><元素属性= “属性值“/></body></html>三，html的标记用尖括号<>括起来。
标记通常是成对出现的，单标记 <br/>.四，Html的属性后缀html和htm的区别？答：1，如果一个网站有index.html和index.htm默认情况下，优先访问.html2, htm后缀为了兼容以前dos系统8.3命名规范、手册。
W3school教程（第一天课程，7.18.）传智播客。
一，html的符号实体。
网页上显示一些特殊的符号。
二，html的超链接。
1)基本语法：<a href= “url”>………</a><a href = “mailto :电子邮箱地址”></a><a href= “”>跳转到百度</a>2)跳转到页面的另一个地方<a href = “#name”>…..</a><a name = “name”>…..</a>3)跳转到另一个页面的某个地方<a href = “URL#name”>…..</a><a href =”name”>…</a>超链接的案例：Demo1.html<br/><a href = "a.html">连接到a.html</a><br/><br/><!--如果我们希望再点击该超链接后，就跳转到外网的某个地址，则应当写完整得url--><a href = "">跳转到百度</a><a href ="mailto:veaglefly@">联系管理员</a><br/>A．htmla.html<!--如果你希望跳转的页面实在网落上，则在href属性写完整的url--><a href = "demo1.html">返回demo1页面</a> 图片： <img src =”图片的路径/该图片也可以是一个url”width = “宽度” height = “高度”>Html的表格元素在以前对网页布局要求不高的情况下，使用table布局（即使用表格来显示数据）表格太多搜索引擎不喜欢。
HTML+css课程基础课程笔记(1)
9.<img src="/qyl_anikin/blog/图片地址" alt="下载失败时的替换文本" title = "提示文本">title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
10.使用表单标签与用户交互：语法：<form method="传送方式" action="服务器文件">action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。method ： 数据传送的方式（get/post）。
19. 为这三种样式是有优先级的，记住他们的优先级：de>内联式 > 嵌入式 > 外部式de>
de>20.de> 类选择器在css样式编码中是最常用到的，.类选器名称{css样式代码;}。
第一步：使用合适的标签把要修饰的内容标记起来，如下：<span>胆小如鼠</span>
第二步：使用class="类选择器名称"为标签设置一个类，如下：
</form>
12. 使用单选框、复选框，让用户选择: <input type="radio/checkbox" value="值" name="名称" checked="checked"/> value：提交数据到服务器的值（后台程序PHP使用）name：为控件命名，以备后台程序ASP、PHP使用. 同一组的单选按钮，name取值一定要一致
7.在新建窗口打开：<a href="/qyl_anikin/blog/目标网址" target="_blank">click here!</a>
html和css笔记
4. 关闭：一次web服务操作结束后，关闭此次连接；或用户根据需要进行下次请求2. HTMLHTML标签转义字符：html中的转义字符以&开始，以分号；结束。
<img/>标签：常用属性：src、width、height、title、alt.<a></a>标签：href属性指定URL，target指定链接打开方式。
target属性为_blank时在新窗口打开链接，省略target属性时在当前窗口打开。
列表标签1. 无序列表无序列表用<ul></ul>表示。
列表项用<li></li>表示。
项目符号用<ul>的type属性表示，默认值为disc，对应实心圆；square对应实心方框；circle对应空心圆。
2. 有序列表有序列表用<ol></ol>表示。
列表项用<li></li>表示。
项目符号用<ol>的type属性表示，默认值为1，对应阿拉伯数字；a对应小写字母；A对应大写字母；I对应大写罗马数字；i对应小写罗马数字。
若列表项不从1开始计数，应用<ol>的start属性指定开始数，其值只能是1，2，……，不能用a、A 等。
1. 定义列表定义列表用来展示术语及其解释，用<dl></dl>表示。
术语项用<dt></dt>表示，解释用<dd></dd>表示。
表格标签1. <table></table>定义表格，<tr></tr>定义行，<td></td>定义单元格。
<th></th>定义表头（特殊样式的单元格）。
<caption></caption>定义表格标题，只能放在<table>标签之后。
html+css笔记
HTML#dsadasdsadasddacursor: pointer; //鼠标的指针变成一只手!important权重最高。
strong标签加粗有强调语义；b标签 也是加粗，但没有语义；em标签倾斜标签，具有强调语义；i标签倾斜标签font-style: italic; 给字体添加斜体font-style: normal; 消除字体斜体strong标签的强调语义比em标签更强；sup上标标签sub下标标签del删除线标签文字中间添加和横线text-decoration: none; 去掉下划线text-indent：2em; 首行缩进2字符 空格> 大于号< 小于号© 版本" 单引号® 已注册™ 商标vertical-align:middle; //用户来指定行内样式的对齐方式:text-top; text-bottomtext-overflow:ellipsis;white-space:nowrap;overflow:hidden; 未显示的文字呈...显示import$clamp from'clamp-js'//插件可以解决多行文本内容//可以在规定的行数进...显示，并且不能给盒子设置高度，完全靠内容进行填充；//是一个不规范的属性，兼容性不好建议使用伪元素来模拟...号overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3; //指定在第几行进行省略-webkit-box-orient:vertical;textarea,input,select:focus{outline: 0;} //取消输入框的默认边框隐藏滚动条>ul {width: 100%;height: 765px;font-size: 18px;color: white;scrollbar-width: none; /* firefox */-ms-overflow-style: none; /* IE 10+ */overflow-x: hidden;overflow-y: auto;}>ul::-webkit-scrollbar {display: none; /* Chrome Safari */}图像标签<img src=""/>有绝对路径和相对路径有 wight 图片宽度height 图片高度title 图片点击显示信息src 导入图片地址./ 代表同级同目录的图片../ 返回当前目录的上一级目录/ 根目录指向C盘alt 为图片无法加载时的显示内容有序列表<ol type="A">是有序列表<li><li/>是列表的每一个项目<ol/>type的常见设置属性有： A I a i无序列表<ul type=""><li><li/><ul/>type的常见属性有：circle 空心圆圈disc实行圆圈square实心方块list-style:none;消除实心点定义列表<dl>是定义列表<dt><dt/>分组的列表 dt之间同级<dd><dd/>分组的条目<dl/>超链接<a><a/>href 表示跳转的地址或是路径、图片、也可以跳转到本地的一个指定id位置如".html#xx"target 表示页面的打开方式_self 在本页面窗口打开_blank 新创建一个窗口打开代码效果：<a href="demo-02.html"target="_blank">本页面跳转</a><a href="demo-02.html"target="_self">第三方跳转</a><a href="javascript:;">伪函数，禁止a链接的跳转</a>表格1.表格:<table><thead> //表格的行首<tr> //行<th></th> * xx 行首的列，文字为自动居中和加粗</tr></thead><tbody> //表格的主题<tr><td></td> * xx //主题的单元格；</tr></tbody><table/><label for="x1"></label>//让表格的标签对应输入框<input id="x1">表格常用的属性border="1" 设置表格的边框width="80%" 设置表格的宽度align="center" 设置表格的对齐方式cellspacing="0px" 设置单元格与单元格的间距cellpadding="0px" 设置单元格与文本内容的间距bgcolor="blue" 设置表格的背景颜色colspan="2" 跨列rowspan 跨行border-collapse:collapse;合并单元格相邻边框被合并border-sapcing 设置单元格之间的距离有两个参数值，第一个值代表横向间距第二个值代表纵向间距有一个参数值，作用于横向和纵向的间距语义化（面试题）1、需要使用一些合理的HTML标签和属性去规定网页上内容，比如段落内容使用p标签，网页上的标题就使用h1-h6，或者给一些重要的图片添加alt属性等。
HTML5与CSS3技术学习笔记
HTML5与CSS3技术学习笔记HTML5和CSS3是现在在网页设计中使用最多的技术。
HTML5用于结构和内容标记，而CSS3则用于设计和排版。
本文将探讨这两门技术的基础知识和一些常用技巧。
一、HTML5的基础HTML5是HTML的第五个版本。
它的发展是为了更好地支持移动设备和多媒体内容。
与HTML4相比，HTML5添加了一些新的元素来标记网页的内容。
其中最突出的几个元素是article、section、header、footer和nav。
1. articlearticle元素用于表示独立的、自包含的文章，比如博客文章、新闻报道等。
2. sectionsection元素可以用于分组相关的内容。
3. headerheader元素用于表示网页的头部，包含导航、品牌标识等内容。
4. footerfooter元素用于表示网页的底部，包含版权信息等内容。
5. navnav元素用于表示导航栏，包含链接到其他网页的链接。
除了这些新元素之外，HTML5还添加了一些新的属性，比如data-属性用于存储自定义数据。
二、CSS3的基础CSS3是CSS的第三个版本。
它的发展是为了更好地控制网页的样式和布局。
CSS3添加了一些新的特性来增强CSS的功能。
其中最突出的特性是渐变、阴影、圆角边框和过渡效果。
1. 渐变CSS3允许创建渐变背景，从而使网页更漂亮。
2. 阴影CSS3允许添加文本和框的阴影，从而使网页更有深度感。
3. 圆角边框CSS3允许创建圆角边框，从而使网页看起来更加和谐。
4. 过渡效果CSS3允许添加过渡效果，比如在鼠标悬停元素时改变元素的样式。
三、HTML5和CSS3的结合HTML5和CSS3可以很好地结合在一起来创建漂亮的网页。
以下是一些常用的HTML5和CSS3技巧。
1. 响应式设计响应式设计是一种可以自适应不同屏幕尺寸的网页设计方法。
它可以使用CSS3的媒体查询来控制不同屏幕尺寸下网页的样式。
2. 动画效果CSS3允许使用关键帧动画来创建动画效果。
HTML+CSS学习笔记
HTML部分笔记一、 HTML基础部分 (5)1. 基本的 HTML 标签 (5)(1) HTML段落 (5)(2) HTML链接 (5)(3) HTML图像 (5)(4) HTML标题 (5)(5) HTML水平线 (5)(6) HTML注释 (5)(7) HTML折行 (5)2. HTML属性 (5)(1) HTML属性的作用 (5)(2) 始终为属性值加引号 (5)(3) HTML元素的核心属性(每个标签都有) (5)3. HTML文本格式化标签 (5)(1) 文本格式化标签 (5)(2) “计算机输出”标签 (5)(3) 引用和术语定义 (5)4. HTML超链接 (5)(1) HTML超链接target属性 (5)(2) HTML超链接name 属性 (5)5. HTML表格 (6)(1) 表格的定义 (6)(2) 使用colSpan和rowspan (6)(3) cellpadding属性设置边距 (6)(4) cellspacing属性设置单元格间距 (6)(5) background属性 (6)(6) align属性设置对齐方式 (6)(7) frame属性 (6)(8) 表格标签 (6)6. HTML 列表 (7)(1) 定义列表的标签 (7)(2) 无序列表 (7)(3) 有序列表 (7)(4) 自定义列表 (7)(5) type属性 (7)7. HTML表单和输入 (7)(1) 各种表单标签 (7)(2) 包含各种表单元素的示例 (7)8. HTML颜色 (7)(1) HTML颜色名 (7)(2) HTML颜色值 (8)二、 HTML高级部分 (8)1. HTML框架 (8)(1) 框架的作用 (8)(2) 框架结构标签（<frameset>） (8)(3) 框架标签（Frame） (8)(4) 框架的注意事项 (8)(5) 混合框架结构(框架的嵌套) (8)(6) 内联框架(<iframe>) (8)(7) 使用框架导航(点导航框架里的超链接，使其到内容框架显示) (8)(1) 外部样式表 (9)(2) 内部样式表 (9)(3) 内联样式 (9)(4) 样式标签 (9)3. HTML字符实体 (9)(1) 字符实体说明 (9)(2) 最常用的字符实体 (9)(3) 其他一些常用的字符实体 (9)4. HTML头部 (10)(1) 头元素内的信息 (10)(2) Head标签 (10)5. HTML元信息 (10)(1) Meta元素说明 (10)(2) 针对搜索引擎的关键字 (10)6. URL(统一资源定位器) (10)(1) URL说明 (10)(2) URL Schemes (10)7. HTML 4.0 事件属性 (10)(1) 窗口事件 (Window Events) (10)(2) 表单元素事件 (Form Element Events) (10)(3) 图像事件 (Image Events) (10)(4) 键盘事件 (Keyboard Events) (11)(5) 鼠标事件 (Mouse Events) (11)8. XHTML文档类型 (11)(1) STRICT（严格类型） (11)(2) TRANSITIONAL（过渡类型） (11)(3) FRAMESET（框架类型） (11)CSS部分笔记三、 CSS基础 (11)1. CSS 基础语法 (11)(1) 层叠次序 (11)(2) CSS 语法 (11)(3) 值的不同写法和单位 (12)(4) 空格和大小写 (12)2. CSS选择器 (12)(1) 选择器的分组 (12)(2) 继承及其问题 (12)(3) CSS 派生选择器 (12)(4) CSS 子元素选择器 (12)(5) CSS 相邻兄弟选择器 (12)(6) CSS id 选择器 (13)(7) CSS 类选择器 (13)(8) CSS 属性选择器 (13)(9) CSS 伪类 (Pseudo-classes) (13)(10) CSS 伪元素 (Pseudo-elements) (13)3. 如何创建 CSS (14)(1) 外部样式表 (14)(2) 内部样式表 (14)(3) 内联样式 (14)四、 CSS样式 (14)(1) 背景色 (14)(2) 背景图像 (14)(3) 背景重复 (14)(4) 背景定位 (15)(5) 背景关联(防止背景图滚动) (15)(6) CSS 背景属性 (15)2. CSS 文本 (15)(1) 缩进文本 (15)(2) 水平对齐 (15)(3) 字间隔 (15)(4) 字母间隔 (15)(5) 字符转换 (15)(6) 文本装饰 (16)(7) 处理空白符 (16)(8) 文本方向 (16)(9) CSS 文本属性 (16)3. CSS 字体 (16)(1) 指定字体系列 (16)(2) 使用引号 (16)(3) 字体风格 (16)(4) 字体变形 (16)(5) 字体加粗 (16)(6) 字体大小 (17)(7) CSS 字体属性 (17)4. CSS 列表 (17)(1) 列表类型 (17)(2) 列表项图像 (17)(3) 列表标志位置 (17)(4) CSS 列表属性(list) (17)5. CSS 表格 (17)(1) 表格边框 (17)(2) 折叠边框 (17)(3) 表格宽度和高度 (17)(4) 表格文本对齐 (17)(5) 表格内边距 (17)(6) 表格颜色 (17)(7) CSS Table 属性 (17)6. CSS 轮廓 (17)(1) 轮廓说明 (17)(2) CSS 轮廓属性 (17)五、 CSS框模型 (18)1. CSS 框模型概述 (18)(1) 框模型说明 (18)(2) 框模型图解 (18)(3) 术语翻译 (18)2. CSS 内边距 (18)(1) CSS padding 属性 (18)(2) 单边内边距属性 (18)3. CSS 边框 (18)(1) 元素边框说明 (18)(2) 边框与背景 (18)(3) 边框的样式 (18)(4) 边框的宽度 (18)(5) 边框的颜色 (19)(6) CSS 边框属性 (19)4. CSS 外边距 (19)(1) CSS margin 属性 (19)(2) 单边外边距属性 (19)(3) CSS 外边距属性 (19)5. CSS 外边距合并 (19)(1) 外边距合并说明 (19)(2) 外边距合并说明图解 (19)六、 CSS定位 (20)1. 定位概述 (20)(1) CSS 定位和浮动 (20)(2) 一切皆为框 (20)(3) CSS 定位机制 (20)(4) CSS position 属性 (20)(5) CSS 定位属性 (20)2. CSS 相对定位 (21)(1) 相对定位说明 (21)(2) 相对定位图解 (21)3. CSS 绝对定位 (21)(1) CSS 绝对定位 (21)(2) CSS 绝对定位图解 (21)4. CSS 浮动 (21)(1) 浮动说明 (21)(2) CSS 浮动图解 (21)(3) CSS float 属性 (22)(4) 行框和清理 (22)(5) CSS clear 属性 (23)七、 CSS高级 (23)1. CSS 尺寸 (Dimension) (23)(1) CSS尺寸说明 (23)(2) CSS 尺寸属性 (23)2. CSS 分类 (24)(1) CSS 分类说明 (24)(2) CSS 分类属性 (24)作者：李志伟编写完成时间：2013-11-14一、HTML基础部分1.基本的 HTML 标签(1)HTML段落<p>第一个段落</p><p>第二个段落</p>(2)HTML链接<a href=""title="百度首页">百度</a>(3)HTML图像<img src="w3school.jpg"width="104"height="142"/><img> 定义图像。
最全HTML与CSS基础总结
最全HTML与CSS基础总结HTML（超文本标记语言）是一种用来创建网页结构的标记语言，而CSS（层叠样式表）则是用来控制网页外观的样式表语言。
下面是关于HTML和CSS基础知识的详细总结。
1.HTML基础知识：- HTML文档以`<!DOCTYPE html>`开头，然后是`<html>`元素，其中包含`<head>`和`<body>`元素。
`<head>`元素用于指定文档的元数据，如标题、引用的外部样式表和脚本；`<body>`元素用于定义文档的主要内容。
-在文档中可以使用各种HTML元素来展示不同的内容，如标题（`<h1>`到`<h6>`）、段落（`<p>`）、链接（`<a>`）等。
2.CSS基础知识：-CSS样式由选择器和一组属性-值对构成。
选择器用于选择要应用样式的元素，而属性-值对则用于定义具体的样式。
- 可以使用CSS属性来修改元素的背景颜色、字体样式、大小、间距等。
例如，可以使用`color`属性修改文本颜色，`font-size`属性修改字体大小等。
- CSS还支持盒子模型，用于控制元素的布局和空间分配。
其中包括外边距（`margin`）、内边距（`padding`）和边框（`border`）等属性。
3.HTML和CSS的结合使用：-可以使用HTML和CSS共同创建具有良好外观和结构的网页。
- 可以将CSS样式直接应用于HTML元素，通过给元素添加`class`或`id`属性来选择器元素并应用样式。
-也可以使用CSS选择器来选择特定的HTML元素，并应用样式。
例如，可以通过选择所有`<h1>`元素来修改所有标题的样式。
- 可以使用CSS框模型属性来控制元素之间的空间和布局关系，从而创建自定义的页面布局。
例如，可以通过设置`margin`和`padding`属性来调整元素之间的间距。