宇宙第一帅的HTML笔记

1.h标签(标题标签）　　h1~h6

2.br标签（换行标签）　　<br/>

3.hr标签(水平线标签）　　<hr/>

4.strong（加粗）　　em（倾斜）

5.特殊　　&nbsp；（空格）　　&gt；(大于) 　　<（小于）　　"（引号）　　&copy；（版权符号）

6.图片标签img 　　

src:图片的地址（路径+图片名称) 　　　　

alt:图片找不到时的提示信息　　　　

title：当鼠标悬停在图片上的提示信息　　　　

width：宽度.（px）　　　　

height：高度.（px）注意：怎么找图片　　　　

第一步：确定当前html的位置　　　　

第二步：如果图片在同级目录直接写图片名称　　　　

如果图片在上级目录就用../图片名称　　　　

如果是在下级就用目录名称/图片名称

7.超链接　　

href:要跳转的文件路径名称　　

target：_self(目标页面覆盖当前页面）　　

_blank(目标页面弹出新的框来显示）

8.锚链接　　

创建步骤　　第一步：创建锚点 <a name=“ding”>xxx</a> 　　

第二步：访问锚点链接 <a href=“#ding”>访问锚点</a> 9.功能性作用

　　<href="mailto:邮箱地址”></a>

10.第二章

11.无序列表　　

<ul>.......声明无序列表　　

<li></li>......列表项　　

</ul> 补充：type属性：circle,square...

12.有序列表　　

<ol>.........声明有序列表　　

<li></li>.......列表项　　

</ol> 补充：type属性：1,a,A....

13.定义列表　　

<dl>......声明定义列表　　　　

<dt></dt>......列表项内容声明　　　　

<dd></dd>.....列表项内容　　

</dl>

14.表格　　

<table>...表格标签... 　　　　

<tr>...行标签... 　　　　　　

<td></td>...单元格　　　　

</tr> 　　

</table>

table属性： align水平 left 左对齐 center 居中对齐 right 右对齐
valign 垂直： top 顶端对齐 middle 居中对齐 bottom 低端对齐 baseline 基线对齐
callspacing：单元格与单元格之间的距离 cellpadding：单元格边界与单元格文字之间的距离
bgcolor：背景颜色
td属性：colspan：表示这一单元格占几格 rowspan：跨行

15. 框架标签　　<frameset> 　　　　　　　　

<!+/....框架标签....> 　　

<!....引用html标签....> 　　</frameset>

16.刷新框架指定区域　　

第一步：在指定的frame中指定name属性值　　

第二步：在超链接部分指定target的值为name的属性值

17.内联框架<iframe> 　　

　　.......

　　frameborder:0表示无边框 1表示有边框　　scrolling:yes表示有滚动条 no表示没有滚动条

刷新内联框架步骤　　

第一步：在指定的feame中指定name属性值　　

第二步：在超链接部分指定target的值为那么的属性值

第三章：表单

1.语法　　<form action="" method="get|post> 　　　　

　　</form> 　　

post：规定如何发送表单数据

2.type属性的值　　

text:表示输入框（文本框）　　

password：表示密码框　　

submit：表示提交按钮　　

reset：表示重置按钮　　

radio：单选按钮　　

checkbox：复选按钮

3.下拉框　　

</select>

注意：

　　a.默认选中<option selected="selected"></option> 　　

b.radio,checkbox的默认选中是checked="checked"

4.图片按钮　　

5.文本域　　<input type="file"/>

注意：提交方式是post，并且在form中指定enctype="multipart/form-data"

6.多行文本域 <textarea cols="多列" rows="多行"> </textarea>

7.域
　　<fielsdet> 　　　　　　　　　　　　     //域标签
    　　　　<legend>xxxx</legend> 　　 //域标题
    　　　　<input type="xxx">
　　</fielsdet>
8.表单元素标注
　　<label for="id属性值"></label>标注
步骤：
　　第一步：给指定的标签加上id属性
　　第二步：在label中加上for="id的属性的值"
9.只读和禁用
　　只读：readonly="readonly"
　　禁用：disabled="disabled"

第四章css

1.css的语法

1.位置

<head> 　　　　

</style> 　　</head>

2.语法　　

选择器{ 属性值1：属性值1；　　

属性值2：属性值2；　　

} 　　

例：　　

h1{ 　　

font:size:12px; --字体大小　　

color：red； --字体颜色　　

注意：多个属性用分号分隔

2选择器

1.标签选择器　　　

语法：　　　　

标签名{ 　　　　　　... 　　　　}

2.类选择器　　

语法：　　　　

class属性值{ 　　　　　　.... 　　　　} 　　

步骤：　　　　

第一步：给指定的html标签加上class属性　　　　

第二步：在stlye中写　　　　　　class属性值{ 　　　　　　　　..... 　　　　　　}

3.id选择器
语法：
     　　#id属性值{
　　.....
　　}
步骤：
　　第一步：给指定的html标签加上id属性
　　第二步：在style中写
            　　#id属性值{
　　　　....
　　　}
3.引用样式的方法
1.行内样式
   　　使用style属性引入样式
   　　例：<h1    style="font-size: 60px;color: chartreuse;">进进进进</h1>
2.内部样式表
　　在head中写style
　　例：h1{
　　　　xxx
　　　　}
3.外部样式表
   　　把css代码保存在css结尾的文件中（层叠样式文件）
   　　把css引入html

引入方法有两种：
   第一种：链接方式
   　　<link rel="stylesheet" href="文件路径" type="text/css"/>
第二种：导入方式
   　　<style>
　　@import url("文件路径");
　　</style>
1.优先级
   　　行内样式>内部样式>外部样式（就近原则）
   　　id选择器>class选择>标签选择器
2.交集选择器
   　　标签选择器（class选择器|id选择器）{
　　....
　　}
3.并集选择器
   　　选择器1，选择器2，选择器3，选择器4....选择器n{
　　...
　　}

1.字体样式
    　　font-family:字体类型
    　　font-size:字体大小
    　　font-weight:字体粗细（bold）
　　font-style:字体倾斜(italic)
　　font:倾斜粗细大小类型
2.文本样式
　　color：颜色
　　text-align:文本对齐方式
　　text-indent:文本缩进
　　line-height：行高
　　text-decoration：装饰
　　vertical-align：垂直对齐方式
注意：vertical-align用于td中
3.超链接伪类
　　a:link：表示没有访问
　　a:visited：表示被访问后
　　a:hover：鼠标悬浮
　　a:active：鼠标按下了松开
填写顺序：link>visited>hover>active

4.背景样式
   　　background-color：背景颜色
   　　background-image:url（图片路径）
   　　background-repeat:图片平铺方式
   　　background-position:图片的位置
　　简：background：颜色，图片位置，平铺方式
5.列表样式
   　　list-style-type:列表样式
   　　list-style-image:url（图片路径）
   　　list-style-position:位置（inside|outsid）
   　　list-style：样式图片位置

第六章盒子模型

1盒子模型属性　　

width：宽　　

height：高　　

border：边框　　

padding：内边框　　

margin：外边框

2边框　　

border：简写　　

border-color:颜色　　

border-width:边框宽度　　

border-style:边框风格

注意：边框可以分为上，下，左，右可以分别设置值

3外边距　　

margin:外边距　　

margin-left:左外边距　　

margin-top:上外边距　　

margin-right：右外边距　　

margin-bottom：底外边距

4内边距　　

padding:内边距　　

padding-top：上内边距　　

padding-left：左内边距　　

padding-right：右内边距　　

padding:-bottom：底内边距

5 display 　　

display:none:表示的隐藏元素　　

display:block；块级元素（显示）　　

display:inline；内联元素（显示）

第七章：浮动

1浮动　　

float：left，right，none，　　

注意：a.浮动元素会把当前的块级元素变成内联元素　　

b.不在标准文档流中.（不会被普通元素排版）

2清除浮动　　

clear：both（清除左右浮动），　　

left（清除左浮动），　　

right（清除右浮动），

3溢出处理
   　　overflow：none（moren）
     　　hidden（隐藏）
     　　scroll（滚动）
     　　auto（自动（滚动效果））
　　注意：可以通过overflow：hidden设置浮动元素的父元素
　　　　的高度，使它包裹整个浮动元素.

第八章
1 元素定位（position）
   　　static：默认
   　　relative：相对定位
   　　absolute：绝对定位
   　　fixed：固定（建议不要使用，部分浏览器必兼容）
　注意：a.相对布局和绝对布局如果它的直接父标签是body，那么相对
      　　位置和绝对位置的起始点不同，如果他们的直接父标签是div，那么
      　　他们的起始点都在父标签的左上角
      　　　　b.绝对布局都是从父标签的左上角开始，
       　　相对布局遵从标准文档流格式。
      　　　　c.绝对布局一定设置top或者left才会生效。

2重叠关系（z-index）
　　默认关系为0
　　值可以是任何整数
　　值越大，位置在越前面
3透明度
　　opacity：0~1值越小越透明

转载于:https://www.cnblogs.com/liumeilin/p/6821987.html

宇宙第一帅的HTML笔记相关推荐

宇宙无敌第一帅的Java笔记
1.java的执行顺序 java(编译) Java(运行) 编写源码----------->字码文件----------->执行 2.编写源码注意 ...
全宇宙第一编辑器VS Code搭配Markdown打造云端笔记(一)
VS Code 配上 Markdown 语言, 就能写出酷炫, 便捷, 且适应互联网的「云端」学习笔记. 这个教程是我这段时间踩过各种各样的坑之后, 总结 VS Code 做学习笔记的最佳实践. 如果 ...
全宇宙第一编辑器VS Code搭配Markdown打造云端笔记(二:MD语法速成)
十分钟掌握Markdown 语法~ 纯粹的 Markdown 语法其实非常简单, 70 行的语法介绍就可以写完. # 一级标题## 二级标题### 三级标题每写完一个段落要隔一行空行.就像这样, 隔了 ...
宇宙第一 IDE 霸主，换人了？
导读:为什么 Visual Studio 能够登顶? 作者 / 来源:纯洁的微笑(ID:keeppuresmile) 01 第一 IDE 宇宙第一 IDE 是谁? 这就像当初讨论谁是编程语言的扛把子一 ...
马斯克将Roadster送上太空，“宇宙第一跑车”诞生
作者 | 周翔.谷磊马斯克又完成了一次惊天动地的创举,多少人注定无眠! 北京时间2月7日凌晨,Space X在美国肯尼迪航天中心首次发射了重型猎鹰(Falcon Heavy)运载火箭,并成功完成一级 ...
「元宇宙第一股」Roblox市值突破600亿美元！
‍ ‍转自:新智元‍ ‍ 最近,「元宇宙」这个词越来越火了. 先有Facebook改名,紧接着微软Ignite大会宣布借Mesh和游戏平台全力杀入,近日又有AMD.英伟达等巨头在产品发布活动上大谈特谈 ...
欧拉公式——真正的宇宙第一公式
来源:数学中国欧拉公式是数学里最令人着迷的公式之一,它将数学里最重要的几个常数联系到了一起:两个超越数:自然对数的底e,圆周率π:两个单位:虚数单位i和自然数的单位1,以及数学里常见的0. 而且它对 ...
《Java并发编程实践-第一部分》-读书笔记
大家好,我是烤鸭: <Java并发编程实战-第一部分>-读书笔记. 第一章:介绍 1.1 并发历史: 多个程序在各自的进程中执行,由系统分配资源,如:内存.文件句柄.安全证书.进程间通信方 ...
脸书推出VR视频会议应用程序正式跨出元宇宙第一步；三家公司新入选福布斯2021云计算百强榜；微软挖来亚马逊云业务顶级高管贝尔...
NEWS 本周新闻回顾微软挖来亚马逊云业务顶级高管贝尔微软公司已经聘请亚马逊云业务高管查理·贝尔担任其企业副总裁.鉴于微软的Azure 云业务正试图从亚马逊 AWS 手中争夺份额,这一挖角行动可以 ...

宇宙第一帅的HTML笔记

宇宙第一帅的HTML笔记相关推荐

最新文章

热门文章