web档语法

最新推荐文章于 2022-06-08 23:50:59 发布

XXXefiskksadfalf

最新推荐文章于 2022-06-08 23:50:59 发布

阅读量112

点赞数

本文链接：https://blog.csdn.net/miiiiiiiiiiiii/article/details/113382381

版权

PHP语言开发整理

网站开发主要使用 HTML、CSS、JavaScript 三种语言来开发。

····HTML对页面骨干编写，css内容展现样式编写，JavaScript展现动态编写·····

> HTML
> 编辑框架：头部head， 身体body， 尾部footer
html
head……/head
body……/body
footer……/footer
/html

这里是 html 标签

> 标题（Heading) 使用 h1 - h6 标签定义，1-6的大到小字号顺序 &：<用h1>This is a heading

使用 **h1 - h6** 标签定义，1-6的大到小字号顺序
段落
使用 p 标签定义 ,&：< p>This is a paragraph.< / p>

链接
使用 a 标签定义 ,并在 href 属性中，来指定链接的地址。
&：< a href="http://www.xxx.com ">This is a link

图像
使用 img 标签定义 ,
&：< img src="xx.jpg" width="104" height="142" />

分类：

块级元素
class：为元素的类定义 CSS 样式
使用 < div class=""> 元素定义，用于 HTML 元素的容器。有开始&结束
：：通过< style>定义样式后，在块元素中用class调用，来定义块元素的样式。
&：
< style>
.cities {
background-color:black;
color:white;
margin:20px;
padding:20px;
}
</ style>
< body>
< div class=“cities”> // 调用样式
< h2>London</ h2>
< /div>
< /body>
–
行内元素
使用 **< span> ** 元素定义，用于文本的容器。有开始&结束
< style>
span.red {color:red;}
< /style>
< body>
< h1>My < span class=“red”>Important< /span> Heading< /h1> // 调用样式
< /body>

响应式 Web 设计？
RWD 指响应式 Web 设计（Responsive Web Design）
：可变尺寸传递网页
：针对平板和移动设备是必需的。

添加到 head 部分：··固定标签有6个··
< title>、< meta>、< link>、< base>、< script> 、 < style>。

title标签：定义文档标题。是必需的

base标签：规定默认地址（target）

<head>
<base href="http://www.xxx.com.cn/images/" />
<base target="_blank" />
</head>

link标签：定义文档与外部资源之间的关系。

meta标签：提供关于 HTML 文档的元数据。元数据不会显示在页面，是给机器读的信息。
即定义页面的关键词；搜索引擎会利用 meta 元素的 name 和 content 属性来索引页面。

<meta name="keywords" content="HTML, CSS, XML" />

script标签：定义客户端脚本，如 JavaScript

style标签：用于为 HTML 文档定义样式信息。

注意：
<!DOCTYPE> 声明：必须是 HTML 文档的第一行，位于 <html> 标签之前。
：：它是指示 web 浏览器，正确获知页面的文档类型。即能知道使用哪个 HTML 版本来编写页面类型的指令。
在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。
：：DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。

<footer> 标签：定义文档或节的页脚
：：页脚通常包含>文档的作者、版权信息、使用条款链接、联系信息<。
：：可在一个文档中使用多个 <footer> 元素。
：：注释：Internet Explorer 8 以及更早的版本不支持 <footer> 标签。

CSS 语法

规则：由两个部分构成：选择器&声明(1或多条)

例：：selector {declaration1; declaration2; ... declarationN }

选择器：是要改变样式的 HTML 元素；
声明：：由1个属性和1个值组成

背景：都应用 body 元素来定义
局部背景添加，背景的相关属性可应用在任何元素中。

如：为段落元素添加：：：p.flower {background-image: url(/i/eg_bg_03.gif);}
如：为行内元素添加：：：：a.radio {background-image: url(/i/eg_bg_07.gif);}

背景图像set
background-image
使用属性值** image** 定义
：：页面的背景图片是否平铺set
：：3种值：repeat-x 图像水平重复
—————repeat-y 图像垂直重复
—————no-repeat 不允许图像平铺
–
背景重复set
background-repeat
使用属性值** repeat** 定义
：：页面的背景图片是否平铺set
：：3种值：repeat-x 图像水平重复
—————repeat-y 图像垂直重复
—————no-repeat 不允许图像平铺
–
背景定位set
background-position 属性
使用属性值** position** 定义，
：：使用关键字：top、bottom、left、right、 center；还可使用长度值100px，百分数值50% ；
：：50% 50% (为中心对齐)，0% 0%放在元素内边距区的左上角
–
背景关联set
background-attachment 属性
使用属性值** attachment** 定义，设置背景图像是否随页面关联滚动
：：使用关键字：
——fixed 固定，不受到滚动的影响
——scroll 滚动，会随文档滚动。是默认值
–

id 选择器

：为标有 id 的 HTML 元素,指定特定的样式。
：以 "#" 来定义。
：ID 选择器：不引用 class 属性的值；要引用 id 属性中的值。
：ID 选择器：在文档中使用一次
：常用于建立派生选择器== sidebar  。
：：在文档中只出现1次;
：：#sidebar p {font-style: italic;}
：：以上是 用于出现在 id 是 sidebar 的元素内的段落。

与类class选择器区别：：
：在文档中只使用一次
：可独立用于 某元素的样式需求。
：：即在css中给定一个 ID 值为 自定义变量名 的元素；元素根据需要来调用ID值样式。
如：：#mostImportant {color:red; background:yellow;}
：：：<h1 id="mostImportant">This is important!</h1>

html调用css/js 文件规则

js 中
id 用 # 来调用 class 用 ·点来调； html元素不用符号调
如：：#bigBox .inputBox .inputText input{}


<div id="bigBox">
	<div class="inputBox">
		<div class="inputText">
			<input type="text" />
		</div>
	</div>
</div>

快捷

HTML中
写多行, 用  *数量  可创建多个div盒子
li：div.col-md-1*12
<div class="col-md-1"></div>
：：md是尺寸
css中
重复代码，采用 多元素器来优化代码。用逗号隔开。

常规

container盒子   一般做容器装内容
-
div栅格计算：即屏幕划分格数，要计算每份占有宽度

：屏幕的宽度不能用像素，因为屏幕会不能自由伸缩；只能用百分比。
：可在网页打开检查代码窗口，在console控制台中去计算：
：：如划分12份，每份宽度
：：(1/12)
：：(1/12).toFixed(8)    --保留小数位数。
：：(1/12*100).toFixed(8)    --计算百分数后的宽度。

JavaScript

== js用于改变HTML内容样式 ==

// 输出 
js文件中编写输出内容：格式3种
1. alert('写内容') ---- 弹窗模式显示，通过HTML文件中使用<script src='' ''>调用来输出内容。
2. document.write("写内容")  ----可直接显示在网页body中。
3. console.log("写内容")  -----是显示在console控制台中，在网页中通过浏览器的‘检查’-console中来查看输出。

//输入
用：prompt("写提示内容")     ---目的将用户输入内容显示出来。
&&  var  num = prompt("请输入内容")
		alert( num)
//函数
函数具有一定功能的代码块；用function 来封装；
固定格式：function 函数名(){ 函数代码块 }
如何调用输出？用：函数名()   
&&
function fn(){
>>功能是：弹出两次
alert(10)
alert(10)
}
fn();

//事件绑定   
固定格式： 对象.onclick = function () {  业务逻辑代码块  }

//获取和设置html元素的内容：用 innerHTML 。
innerText 和 innerHTML区别：前者可解析html代码标签；后者只能解析获取纯文本，即不解析纯文本中的代码标签，直接获取。

//获取input的内容
input格式：<input type="text" id="ipt" value="写内容">  
1 value是输入的提示内容（即获取和设置input值用value）；2 input语句没有结束语。
js 的function封装中 编写逻辑代码块：弹出alert(oIpt.vlaue) ; 更改oIpt.value ="更改的内容"；

//js结构：
找到对象：
var oBtn = document.getElementById("btn")
设置点击事件并绑定处理：
oBtn.onclick = function () {  业务逻辑代码块  }
注：js中代码变动主要是 function中的代码块，其他都是固定结构。

CSS

box-shadow属性

box-shadow 给 div 或文字添加阴影.
定义了两种阴影：盒子阴影和文本阴影

语法：
box-shadow: offset-x offset-y blur spread color inset;
盒子阴影： X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展] [阴影颜色] [投影方式];

词解释： blur:模糊 spread: 伸展 inset:内凹

参数解释：

· offset-x：必需，可正负，x水平阴影的位置
· offset-y：必需，可正负，y垂直阴影的位置
· blur:可选，只能取正值。blur-radius是阴影模糊半径，0即无模糊，值越大阴影边缘越模糊。
· spread：可选，可正负，是向四周扩展的尺寸。正值，阴影扩大，负值阴影缩小。
· color:可选，阴影颜色。不设置，默认黑色。
· inset:可选。内部投影。默认outset 外部投影。是写在参数的第一个或最后一个，其它位置是无效的。

text-overflow属性

值： clip:修剪文本 ellipsis: 显示省略符号,来代表被修剪的文本 string:给定字符串,来代表被修剪的文本。

默认值：clip 剪切文本显示。
JavaScript 语法：object.style.textOverflow="ellipsis"

padding属性  ：10px 5px 15px 20px;

值： 10上内边距 5右内边距 15下内边距 20左内边距

JavaScript 语法：object.style.padding=“10px 5px”

XXXefiskksadfalf

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web档语法

编辑框架：头部head，身体body，尾部footerhtmlhead……/headbody……/bodyfooter……/footer/html–标题（Heading)使用 h1 - h6 标签定义，1-6的大到小字号顺序&：<用h1>This is a heading</用h1>–段落使用 p 标签定义 ,<放这里>&：< p>This is a paragraph.</ p>–链接使用 a.
复制链接

扫一扫