HTML 笔记大全.docx

HTML的简介HTML: 超文本标记语言，网页语言。超文本标记语言：超出文本的范畴。 标记：HTML所有操作都是通过标签实现的。标签就是标记。标签 HTML的后缀.htm 或者.html 。 HTML规范：开始html结束/html。成对出现。特殊的标签单个出现br/换行。 内容：1.head设置相关内容/head title标题/title 2.body显示在页面上的内容/body 3.标签成对出现head/head 4.标签不区分大小写。 5.有些标签没有结束标签，在标签内结束，hr/水平线。 HTML的核心思想（*****） 网页很多数据，不同的数据需要显示的效果不一样，这个时候需要使用标签把要操作的数据（包装起来），通过修改标签的属性值实现标签数据样式的变化。 一个标签相当于一个容器，想要修改容器内的样式，只需要改变容器的属性值，就可以实现容器内数据的样式变化。 HTML最常用的标签 文字标签和注释标签 *文字标签：修改文字的样式 - font/font 属性 size:文字的大小范围1-7 超出默认为7。 color：文字颜色 两种表示：1.英文单词：red green 。 2.使用16进制表示#ffffff *注释标签：!-- html的注释 -- 。 标题标签，水平线标签和特殊字符 标题标签：大小依次变小自动换行h1/h1h2/h2…… 水平线标签：hr/ 属性：**Size:水平线粗细 **Color:颜色 代码hr size=”5” color=”blue”/ br/br/换2行。 特殊字符: :lt; :gt; 空格：nbsp; : amp; 列表标签 展示效果 dl 传智播客 dt传智播客/dt 财务部 dd财务部/dd 学工部 dd学工部/dd 人事部 dd人事部 /dd /dl ***dl/dl:表示列表范围 ***dt/dt:表示上层内容 ***dd/dd:表示下层内容 ***dd/dd:表示下层内容 ***……………………………???……….. ****ol/ol:有序列表的范围 属性type:设置排序方式 1（默认）a i。 **在ol标签里面li具体内容/li 代码： ol li财务部/li li学工部/li li人事部/li /ol ****ul/ul:有序列表的范围 属性type: 实心圆circle 空心圆disc 实心方块square ,默认disc 图像标签（******） img src=”图片的路径” width=”” height=”” alt=” 图片上显示的文字”/ --src:图片的路径 --width:图片的宽度 –height：图片的高度 –alt：图片上显示的文字。 路径的介绍 **绝对路径 ： 完整的路径。 **相对路径： 一个文件相对于类外一个文件的位置。 **html文件和图片在同一个路径下，直接把名字写在路径下。 **图片在html下一层的路径， 把后面的路径拿过来用。 **图片在html上一层的路径， ../加上图片的名字。../../ 表示上2层路径。 案例联系 *pre原样输出标签/pre 超链接标签（*****） ***链接资源 a href=”链接到资源的路径” 顶部/a href: 链接的资源的地址，里面的如果是空链接时”#”表示。 target:设置目标打开的方式，默认在当前页打开。 _blank : 在新的页面打开。 _self : 在当前页面打开。 ***定位资源 ***如果想定位资源：定义一个位置 a name=”top”顶部/a **回到这个位置 a href=”#top”回到顶部/a 表格标签（*****重要的很******） table表格的范围 属性：border=”1” bordercolor=”blue” cellspacing=”0”width=”40”height=”40”. border:表格线 bordercolor:表格线颜色 cellspacing:单元格之间的距离。 tr align=”left”表示行/tr td在行标签的里面表示行里面的单元格/td 在tr和td标签下属性：显示方式 align: left center right ***th表格实现居中加粗标签/th ***表格标题写着table里面 ***caption表格标题标签/ caption