2024蓝旭预习作业1

  1. html结构

基本结构:

<html>

 <head>

  <title>一个标题</title>

 </head>

 <body>

 

 </body>

</html>

1.<html>标签:是HTML文档的根标签,页面中的所有内容都必须包含在<html>与</html>之间。

2.<head>标签:一个网页文档从总体上可以分为头和主体两部分。<head>和</head>定义HTML文档的头部部分,它包含标题,文件MIME类型,样式表,脚本等。

3.<title>标签:用于设置HTML标题。当使用浏览器查看页面时,在浏览器的标题栏中将显示<title>标签中的内容。

4.<body>标签:<body>与</body>标签定义了文档的主体部分,用于设置页面实际需要呈现给用户的内容,如文字,图片,视频等。

  1. Html常用标签

常⽤文本标签:

<hn>...</hn>标题标签,其中n为1–6的值。

<i>...</i>斜体

<em>...</em> 强调斜体

<b>...</b> 加粗

<strong>...</strong> 强调加粗

<cite></cite> 作品的标题(引⽤用)

<sub>...</sub> 下标 <sup>...</sup> 上标

<del>...</del> 删除线

常⻅见格式化标签如下:

<br/>换⾏行

<p>...</p> 换段

<hr />⽔水平分割线

<ul>...</ul> ⽆无序

<ol>...</ol> 有序 其中type类型值:A a I i 1 start属性表示起始值

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

<dl>...</dl>自定义

<dt>...</dt>自定义表头

<dd>...</dd> 自定义表内容

<div>...</div> 常⽤用于组合块级元素,以便通过 CSS 来对这些元素进⾏行格式化

<span>...</span> 常⽤用于包含的⽂文本,您可以使⽤用 CSS 对它定义样式,或者使⽤JavaScript 对它进操作。

HTML图像标签:

HTML网页中插入一张图片,使用img标签,他是一个单标签:
其中img标签中常用属性如下:

  • src 名及url地址
  • alt: 加载失败时的提示信息
  • title:文字提示属性
  • width:图片宽度
  • height:图片高度
  • border:边框线粗细

 HTML超链接标签:

超级链接标签a:

格式:<a href="链接⽬标url地址">显示⽂字</a>

a标签的属性:

href: 必须,指的是链接跳转地址

target: 表示链接的打开⽅式:

_blank 新窗⼝

_parent ⽗窗⼝

_self 本窗⼝(默认)

_top 顶级窗⼝

framename 窗⼝名

title:⽂字提示属性(详情)

锚点链接:

定义⼀个锚点:<a id="a1"></a> 以前使⽤的是 <a name="a1"></a>

使⽤锚点:<a href="#a1">跳到a1处</a>

HTML表单标签:

<form>...</form> 表单标签

form标签常⽤属性:

action属性:提交的⽬标地址(URL)

method属性:提交⽅式:get(默认)和post

get⽅式是URL地址栏可⻅,⻓度受限制(IE2k ⽕狐8k),相对不安全.

post⽅式是URL地址不可⻅,⻓度不受限制,相对安全.

enctype:提交类型

target: 在何处打开⽬标 URL。

name:属性为表单起个名字.在HTML5中使⽤ id 代替。 <input>

表单项标签input定义输⼊字段,⽤户可在其中输⼊数据。在 HTML 5 中,type 属性有很多新的值。具体在下⾯有详解:

<input type="text" name="username">

type属性:表示表单项的类型:

text:单⾏⽂本框

password:密码输⼊框

checkbox:多选框 注意要提供value值

radio:单选框 注意要提供value值

file:⽂件上传选择框

button:普通按钮

submit:提交按钮

image:图⽚提交按钮

reset:重置按钮, 还原到开始(第⼀次打开时)的效果

hidden:主表单隐藏域,要是和表单⼀块提交的信息,但是不需要⽤户修改

email ⽤于应该包含 e-mail 地址的输⼊域

url ⽤于应该包含 URL 地址的输⼊域

number ⽤于应该包含数值的输⼊域。

max 规定允许的最⼤值

min 规定允许的最⼩值

step 规定合法的数字间隔(如果 step=“3”,则合法的数是 -3,0,3,6 等)

value 规定默认值

range ⽤于应该包含⼀定范围内数字值的输⼊域,显示为滑动条

max 规定允许的最⼤值

min 规定允许的最⼩值

step 规定合法的数字间隔(如果 step=“3”,则合法的数是 -3,0,3,6 等)

value 规定默认值

⽇期选择器 Date pickers

date - 选取⽇、⽉、年

month - 选取⽉、年

week - 选取周和年

time - 选取时间(⼩时和分钟)

datetime - 选取时间、⽇、⽉、年(UTC 时间)

datetime-local - 选取时间、⽇、⽉、年(本地时间)

search ⽤于搜索域,⽐如站点搜索或 Google 搜索

color 颜⾊选择

name属性: 表单项名,⽤于存储内容值的

value属性: 输⼊的值(默认指定值)

placeholder: 预期值的简短的提示信息

size属性: 输⼊框的宽度值

maxlength属性: 输⼊框的输⼊内容的最⼤⻓度

readonly属性: 对输⼊框只读属性

disabled属性: 禁⽤属性

checked属性: 对选择框指定默认选项

accesskey属性: 指定快捷键(不常⽤) (IE:alt+键 ⽕狐:alt+shift+键)

tabindex属性: 通过数字指定tab键的切换顺序(不常⽤)

src和alt是为图⽚按钮设置的

注意:

reset重置按钮是将表单数据恢复到第⼀次打开时的状态,并不是清空。

image图⽚按钮,默认具有提交表单功能。

<select>...</select>

创建下拉列表。

name属性:定义名称,⽤于存储下拉值的

size:定义菜单中可⻅项⽬的数⽬,html5不⽀持

disabled 当该属性为 true 时,会禁⽤该菜单。

multiple 多选

<option>... </option>下拉选择项标签,⽤于嵌⼊到<select>标签中使⽤的;

value属性:下拉项的值

selected属性:默认下拉指定项.

<textarea>...</textarea>

多⾏的⽂本输⼊区域,有以下常用指令

name :定义名称,⽤于存储⽂本区域中的值。

cols :规定⽂本区内可⻅的列数。

rows :规定⽂本区内可⻅的⾏数。

disabled: 是否禁⽤

readonly: 只读

默认值是在两个标签之间

<button>...</button>

标签定义按钮。

您可以在 button 元素中放置内容,⽐如⽂档或图像。这是该元素与由 input 元素创建的按钮的不同之处。

<fieldset>

fifieldset 元素可将表单内的相关元素分组。

disabled属性:定义 fieldset是否可⻅。

form属性: 定义该 fieldset 所属的⼀个或多个表单。

<legend></legend>标签为 <fieldset> 、 <figure> 以及 <details> 元素定义标题。

<optgroup>
html5标签-- <optgroup> 标签定义选项组。此元素允许您组合选项。

全局属性:

1accesskey属性

accesskey属性规定激活元素的快捷键。accesskey="accesskey",

使用ALT+accesskey(shinft+alt+accesskey)来访问带有指定快捷键的元素。

2idclass属性分别是为元素命名唯一id和类名。

3tabindex属性

tabindex属性规定tab键控制次序(tab键用于导航时),当按tab键时,元素聚焦的次序。tabindex="number""number"代表聚焦的次序。

4hidden属性

hidden属性规定元素为隐藏,表示该元素不相关,为布尔值

5contenteditable属性

contenteditable属性规定元素内容是否可编辑的,"true"表示可编辑,"false"表示不能编辑。

Css的引入方法:

、行内样式

别名:行间样式、内联样式

写法:在网页元素上通过style=""属性

二、内部样式表

写法:在网页创建嵌入的样式表,写在里面

三、链入外部样式表

写法:网页引入外部样式表,外部创建一个css文件,在html中通过连接这个css文件,一般写在css前面

四、导入外部样式表

写法:通过@import 引入,不建议开发使用

Css选择器:

1.元素选择器

语法 : 标签名{}

作用 : 选中对应标签中的内容

2.类选择器(class选择器)

语法 : .class属性值{}

作用 : 选中对应class属性值的元素

注意:class里面的属性值不能以数字开头,如果以符号开头,只能是'_'或者'-'这两个符号,其他的符号不可以,一个class里面可以有多个属性值

3.id选择器

语法 : #id属性值{}

作用 : 选中对应id属性值的元素

注意 : id的属性值只能给1,可以重复利用,不能以数字开头

4.通配符选择器

语法 : *{}

作用 : 让页面中所有的标签执行该样式,通常用来清除间距

5.群组选择器

语法 : 选择器1,选择器2,选择器3...{}

作用 : 同时选中对应选择器的元素

6.属性选择器:

属性选择器一共有7种写法

  1. 某某[属性]
  2. 某某[属性=属性值]
  3. 某某[属性^=属性值]
  4. 某某[属性$=属性值]
  5. 某某[属性*=属性值]
  6. 某某[属性~=属性值]
  7. 某某[属性|=属性值]

伪类选择器

:first-child   第一个子元素

:last-child    最后一个子元素

:nth-child()   选中第n个元素

关于:nth-child()的特殊值(括号内的内容可以填写以下几种)

        n   n   n的范围0到正无穷(全选)

        even2n    选中偶数位的元素

        odd2n+1   选中奇数位得到元素

child结尾的是在所有元素中选择

:first-of-type  第一个子元素

:last-of-type   最后一个子元素

:nth-of-type()    选中第n个元素

type结尾的是在相同元素中选择

CSS的四种定位方式:

1.静态定位:

设置方式为position: static;静态定位的盒子是标准流状态,用于取消定位。静态定位的盒子处于网页的最底层,并且topleftbottomright属性都不起作用。

2.相对定位:

设置方式为position: relative;相对定位的盒子没有脱离标准流,在页面中占据位置,盒子的层级高于标准流和浮动的盒子,topleftbottomright属性都会起作用。

设置了topleftbottomright属性后,相对定位的盒子是相对自己在标准流中的位置进行偏移,但是盒子在页面中占据的位置是不会改变的。

两个相对定位的盒子,默认的情况下第二个盒子层级比第一个盒子层级高,即第二个盒子可以覆盖第一个盒子,如果想让第一个盒子覆盖第二个盒子,可以通过设置z-index属性实现。

3.绝对定位:

设置方式为position: absolute;绝对定位的盒子脱离了标准流,在页面中不占位置,盒子的层级高于标准流和浮动的盒子,topleftbottomright属性都会起作用。

设置了topleftbottomright属性后,绝对定位的盒子是相对设置了定位属性(静态定位不算)的最近的父级盒子的位置进行偏移,如果没有设置了定位的父级盒子,则是相对于body标签进行偏移。

绝对定位的盒子可以通过设置z-index属性改变层级。

4.固定定位:

设置方式为position: fixed;固定定位的盒子脱离了标准流,在页面中不占位置,盒子的层级高于标准流和浮动的盒子,topleftbottomright属性都会起作用。

设置了topleftbottomright属性后,固定定位的盒子是相对浏览器串口进行偏移。不管浏览器滚动条如何滚动,固定定位的盒子永远显示在浏览器窗口,不会出现滚动条往下滚动后就看不到固定定位的盒子的情况。因此固定定位的盒子常用于做底部导航栏和顶部导航栏。

固定定位的盒子可以通过设置z-index属性改变层级。

固定定位的盒子默认的宽高由其内容决定。

Css简单样式

字体属性:(font)

大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PXPD

样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)

行高 {line-height: normal;}(正常) 单位:PXPDEM

粗细 {font-weight: bold;}(粗体) lighter;(细体) normal;(正常)

变体 {font-variant: small-caps;}(小型大写字母) normal;(正常)

大小写 {text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;()

修饰 {text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)

常用字体: (font-family)

背景属性: (background)

色彩 {background-color: #FFFFFF;}

图片 {background-image: url();}

重复 {background-repeat: no-repeat;}

滚动 {background-attachment: fixed;}(固定) scroll;(滚动)

位置 {background-position: left;}(水平) top(垂直);

简写方法 {background:#000 url(..) repeat fixed left top;} /*简写·这个在阅读代码中经常出现,要认真的研究*/

区块属性: (Block) /*这个属性第一次认识,要多多研究*/

字间距 {letter-spacing: normal;} 数值 /*这个属性似乎有用,多实践下*/

对齐 {text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中)

缩进 {text-indent: 数值px;}

垂直对齐 {vertical-align: baseline;}(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;

词间距word-spacing: normal; 数值

空格white-space: pre;(保留) nowrap;(不换行)

显示 {display:block;}() inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题) /*display 属性的了解很模糊*/

盒子属性: (Box)

width:; height:; float:; clear:both; margin:; padding:; 顺序:上右下左

边框属性: (Border)

border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;

border-width:; 边框宽度

border-color:#;

简写方法borderwidth style color; /*简写*/
 
列表属性: (List-style)

类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;

位置list-style-position: outside;() inside;

图像list-style-image: url(..);
 
定位属性: (Position)

Position: absolute; relative; static;

visibility: inherit; visible; hidden;

overflow: visible; hidden; scroll; auto;

clip: rect(12px,auto,12px,auto) (裁切)
 

  • 21
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值