HTML

来源：互联网发布：杀敌算法百度云编辑：程序博客网时间：2024/06/05 00:51

最近发现文章中的截图不在了干脆把笔记做成了PDF文件上传，下载：点击打开链接

HTML: 超文本标签语言

英文:HyperText Markup Language

作用： 用来展现 文本 声音 视频 图片 的页面

<html>

<head> <!-- 定义网页信息 -->

<title> 这是标题 </title>

</head>

<body> <!-- 展现页面内容 -->

<p> HELLO </p>

</body>

</html>

语法：

1.标签是由 “ < ”  加上 英文 加上  “>” 所组成。

            如：<a>

2.标签一般情况下是成对出现，分开始标签和结束标签，结束标签会比开始标签多一个“/”。

        在开始标签和结束标签的中间写的是属于这个标签的内容

            如：<a> 属于这个标签的内容</a>

3.标签是不区分大小写的，(当开始标签是小写的时候，结束标签也必须是小写)但是建议小写，因为大部分程序员都是写的小写。这也成为了一种规范。

4.标签是可以相互嵌套的（标签里面还可以再放标签）,但是要注意下标签的先后顺序。

例如：<a> <p>*******</p> </a>  

在写html的时候需要一个基本的结构：

这个结构是由三对标签所组成，分别是：html head  body 

需要注意，html这对标签是包含head和body的。

如：<html>

<head></head>

<body></body>

</html>

代码解释：

1.html：这是根标签，意思是html中的所有内容都要放在这对标签之中。

2.head：html文档头部的部分，在里面写的内容一版是不会给用户直接浏览的，就如同人的大脑的思维是不会轻易让外界知道是一个原理。

里面写的内容有：<title> <style> <script> <link> <meta>等标签。

浏览器会对head标签进行预读，然后再决定是否执行里面的内容。

3.body：表示的是html的身体部分，里面的内容写的是展示给用户浏览的内容。

body标签中的内容会被浏览器直接执行。

h1-h6 标题标签 ：h标签1-6是由大到小依次排列的。

①<p> 段落标签：当页面中需要显示一段话的时候，可以用p标签来表示。这个标签会将里面的内容归为一段话。

<q> 引用标签：这个标签会将里面的内容用引号引用起来。

<b>加粗文本：这个标签会将里面的内容加粗。

②<hr/> 水平线

③<img src=“图片路径” width=”” height=”” alt=”提示|当图片加载失败显示” >

④<a href=”跳转的页面” target=“打开方式| _black | _self ”>

⑤ <ul> <li> 无序列表标签

<ol> <li> 有序列表

⑥ <table> <tr> <td> 表格标签

⑦ font b i marqueen pre

⑧输入框：input

    这个标签需要结合type（类型）这个属性来实现自己类型变换。

    如：

        <input type=”text”>

    类型： text（文本）、password（密码）、radio（单选，注意：需要结合name属性来实现单选效果）、

checkbox（多选）、submit（提交）、reset（重置）、range（滑动条）

注意：submit（提交）、reset（重置）必须写在form标签中才能实现功能。

<!--表单标签 -->

<form action="/xxxx.do" method="get">

<!--文本输入框 -->

<input name="username" type="text" placeholder="输入你的姓名" />

<!--密码输入框 -->

<input name="pass"type="password" placeholder="输入密码" />

<br/>

<!--单选按钮-->

<input name="sex" type="radio" value="M"/>男

<input name="sex" type="radio" value="F"/>女

<input name="sex" type="radio" value="N" checked="checked" />保密

<br/>

<!--多选按钮-->

<input name="heroType" type="checkbox" value="zs" />战士

<input name="heroType" type="checkbox" value="fs" />法师

<input name="heroType" type="checkbox" value="ss" checked="checked" />射手

<br/>

<!--下拉列表 -->

<select name="gread">

<optionvalue="jjqt">倔强青铜</option>

<optionvalue="bqby">不屈白银</option>

<optionvalue="ryhj">荣耀黄金</option>

<optionvalue="zgbj" selected="selected">尊贵铂金</option>

</select>

<br/>

<!--多行文本输入框 -->

<textarea name="info" rows="10" cols="50"></textarea>

<br/>

<!--上传文件框 -->

<input name="myphoto" type="file"/>

<br/>

<!--提交按钮-->

<input name="btn" type="submit" />

<input name="btn2" type="reset" />

</form>

设置默认选择：

单选&多选 用 checked=checked

列表： 用 selected=selected

禁用 用 disabled="disabled"

⑨ 框架集（后台管理系统）

span、div、input

span：内联元素-----à内联元素的特征是他只占自己内容的面积，不可以设置宽高

div：块级元素 -----à块级元素他占整行的面积，可以设置宽高

input：内联块级元素-----à内联块级元素只占自己内容的面积。可以设置宽高。

CSS属性

样式：CSS(层叠样式表)

<div style="width: 1200px; height: 50px; background-color: black; margin: 0 auto;" >

CSS 作用： 修饰标签

WEB2.0: 规范

HTML : 展现网页内容

CSS : 美化html页面

JavaScript: 网页交互

Css 语法：

方式1： 行内样式，写在开始标签中 用style属性引起，缺点，代码重复，维护成本高。

方式2 : 内嵌样式，写在head标签中 用style 标签集中声明。

方式3： 外部样式，写在独立的css文件中，通过 link标签引入

语法：选择器{ 属性：取值；属性：取值 ; ..... }

css的写法 ----à 语法：属性名：样式;

    如：color：red;

选择器：

标签选择器：

    语法：

标签{

css属性

}

如：p{

         color:red;

}

id选择器：

    语法：

#id名{

css属性

}

    如：#p-1{

        color:red;

}

类选择器：

    语法：

.class名{

css属性

}

    如：.p-1{

         color:red;

}

文字样式

color:颜色; ---------文字颜色font-size:像素;---------文字尺寸;font-family:字体; ---------设置文字字体font-weight:bold; ---------设置文字为粗体font-style:italic; ---------设置文字为斜体line-height:像素; ---------设置文字行高（文字上下居中）text-decoration:underline; ---------给文字增加下划线text-decoration:none; ---------隐藏下划线text-decoration:line-through;---------增加删除线letter-spacing:像素; ---------文本间距内部文本对齐

text-align:left; ---------文字向左对齐

text-align:right; ---------文字向右对齐

text-align:center; ---------文字居中对齐

背景

background:url (图片路径); ---------背景图background:color/rgb(0 , 0 , 0); ---------背景颜色background: rgba(0 , 0 , 0 , 0.5); ---------背景颜色以及透明度

宽/高度

width:像素; ---------宽度height:像素; ---------高度max-width/height:像素; ---------最大宽/高

min-width/hright:像素; ---------最小宽/高

漂浮：float:left/right; ---------浮动在左/右侧边线border:像素 颜色 样式; --------- 设置边线

边线样式: dashed:虚线  dotted:点线  solid:实线border-top/bottom/left/right:像素 式 色;  

---------上/下/左/右边线的宽度，样式，颜色

距离：margin-left:像素; ---------距离左边界距离margin-top:像素;  ---------距离上边界距离margin -right:像素; ---------距离右边界距离margin-bottom:像素; ---------距离下边界距离margin:0 auto ; ---------左右对齐（居中）填充内部内容：padding-top:像素; ---------上部填充padding-bottom:像素; ---------下部填充padding-left:像素; ---------左部填充padding-right:像素; ---------右部填充定位：1、绝对定位(position: absolute)2、相对定位(position: relative)3、固定定位(position: fixed)注意:定位一般配合top/bottom/left/right:像素;来设置位置显示状态：display:none / block; ---------隐藏/显示z-index:位置; ---------设置重叠

设置透明度：filter:alpha(opacity=50); opacity:0.5;

Css3

圆角化效果：border-radius

使用方法：

border-radius:10px; /* 所有角都使用半径为10px的圆角*/

border-radius:5px 4px 3px 2px ; /*4个角的半径值分别是左上角、右上角、右下角、左下角，顺时针*/

除此之外，border-radius的值还可以用百分比作为单位，但是兼容性不是太好。

实心上半圆：

方法：把高度设为宽度的一半，并且只设置左上角和右上角的半径与元素的高度一致（大于也是可以的）

如同：

效果图：

实心圆：

方法：把宽度与高度的值设为设置为一致（正方形），并且四个角的值都设置为他们值得一半。

如代码：

效果：

边框阴影：box-shadow

Box-shadow是向盒子添加阴影，支持添加一个或者多个。

语法：

Box-shadow：X轴偏移量 Y轴偏移量 [ 阴影模糊半径 ] [ 阴影扩展半径 ] [ 阴影颜色 ] [ 投影方式 ]

参数介绍：

X轴偏移量：必需。水平阴影位置。允许负值

Y轴偏移量：必需。垂直阴影位置。允许负值

阴影模糊半径:模糊距离。

阴影扩展半径：阴影尺寸

阴影颜色：阴影颜色，默认黑色。

投影方式：可选（设置inset时为内部阴影，默认为外部阴影）

示例代码：

效果:

设置内部阴影的代码：

效果：

添加多个阴影：

如果要是添加多个阴影，只需用逗号隔开即可。

如：

效果：

文本阴影text-shadow

语法：text-shadow：X-offset Y-offset blur color；

X-offset：表示阴影水平偏移的距离，其值为正时，阴影面向右偏移，反之向左。

Y-offset：表示阴影垂直偏移的巨离，其值为正时，阴影面向下偏移，反之为上。

Blur：为阴影模糊程度，其值不能为负数，如果值越大，阴影越模糊，反之为越清晰，如果不需要阴影则将blur的值设为0；

Color：是指阴影颜色，也可以使用rgba色。

示例代码如：text-shadow:5px 0px 10px red;

实现效果为：阴影向右偏移5个像素的红色阴影。

实现背景色透明度：

background：rgba（100,100,100,0.5）;

r g b表示的是颜色的三原色值，分别的范围是0~255，

a表示的是透明度，范围是0.1~1，1为不透明，0.1是最高透明度。不可以为负值。

渐变色：

gradient分线性渐变（linear）和径向渐变（radial）。

语法：background：linear-gradient（渐变方向，起始颜色，结束颜色）

渐变方向分：

to top ：从上向下

to right : 从左向右

to bottom：从下向上

to left：从右向左

to right：从右向左

这样起始颜色到结束颜色就会有一个渐变性，当然也可在起始颜色与结束颜色之间添加更多的颜色来实现额外的过度。

背景尺寸：Background-size

语法：background-size:auto/长度值/百分比/cover/contain

取值说明：

1、auto：默认值，不改变背景图片的原始宽度和高度。

2、长度值：成对出现，如：200px 50px，将背景图片的宽度设置为200px，高为50px，如果只有一个值，则将其作为图片的宽来进行等比放缩。

3、百分比：0%~100%之间的任何值，这个值是基于元素的宽高来进行计算的。

4、顾名思义为覆盖，即将背景图片等比放缩填满整个元素。

5、contain、容纳，即将背景图片等比放缩至某一边紧贴元素边缘位置。

阅读全文

0 0