PHP language development and finishing
Website development mainly uses three languages: HTML, CSS, and JavaScript.
····HTML for the backbone of the page, CSS content presentation styles, JavaScript presentation dynamic writing·····
HTML
editing framework : head, body, footer
html
head……/head
body……/body
footer……/footer
/html
–
Here is the html tag
header (the Heading)
using h1 - h6 tag definition, large size to a small order of 1-6
&: <using h1> This is a heading </ h1 of with>
-
paragraph
p-defined tags, <put here>
&: <P> This iS a paragraph </ P>.
-
link
using a label definition, and href attribute , a link to the specified address.
&: <a href="http://www.xxx.com "> This is a link</ a>
– The
image is defined
by the img tag,
&: <img src=“xx.jpg” width=“104” height = "142" />
-The
link is
defined using a tag,
&: <p>This is a heading</ p>
classification:
Block-level element
class: Define the CSS style for the element's class.
Use the <div class=""> element definition, which is used as a container for HTML elements. Start & end
: After defining the style by <style>, call class in the block element to define the style of the block element.
&:
<style>
.cities { background-color:black; color:white; margin:20px; padding:20px; } </ style> <body> <div class=“cities”> // call style <h2>London </ H2> </ div> </ body> - inline elements used ** <span> ** element defines, for a container of text. Start & end <style> span.red {color:red;} </style> <body> <h1>My <span class=“red”>
Responsive web design?
RWD refers to Responsive Web Design (Responsive Web Design)
: Variable size delivery of web pages
: It is necessary for tablets and mobile devices.
Add to the head section:··There are 6 fixed labels··
< title>、< meta>、< link>、< base>、< script> 、 < style>。
title tag: defines the title of the document . is compulsory
base tag: specify the default address (target)
<head>
<base href="http://www.xxx.com.cn/images/" />
<base target="_blank" />
</head>
link tag: defines the relationship between the document and external resources .
meta tag: Provides metadata about the HTML document. Metadata will not be displayed on the page, it is information read for the machine .
That is to define the keywords of the page; the search engine will use the name and content attributes of the meta element to index the page.
<meta name="keywords" content="HTML, CSS, XML" />
script tag: define client-side scripts, such as JavaScript
style tag: used to define style information for HTML documents .
注意：
<!DOCTYPE> 声明：必须是 HTML 文档的第一行，位于 <html> 标签之前。
：：它是指示 web 浏览器，正确获知页面的文档类型。即能知道使用哪个 HTML 版本来编写页面类型的指令。
在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。
：：DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。
<footer> 标签：定义文档或节的页脚
：：页脚通常包含>文档的作者、版权信息、使用条款链接、联系信息<。
：：可在一个文档中使用多个 <footer> 元素。
：：注释：Internet Explorer 8 以及更早的版本不支持 <footer> 标签。
CSS syntax
Rule: Consists of two parts: selector & declaration (1 or more)
例：：selector {declaration1; declaration2; ... declarationN }
Selector: is the HTML element whose style is to be changed;
declaration:: consists of 1 attribute and 1 value
Background : Both are defined by the body element
Local background Add, the relevant attributes of the background can be applied to any element.
如：为段落元素添加：：：p.flower {background-image: url(/i/eg_bg_03.gif);}
如：为行内元素添加：：：：a.radio {background-image: url(/i/eg_bg_07.gif);}
Background image SET
background Image-
use property values defined ** image **
:: page background picture is tiling SET
::. 3 types of values: repeat-x image horizontal repetition
----- repeat-y image is repeated vertically
- ———No-repeat does not allow images to be tiled
-
Background repeat set
background-repeat
uses attribute value ** repeat** Definition
:: Whether the background image of the page is tiled set
:: 3 values: repeat-x Image repeats horizontally
— ————Repeat-y The image is repeated vertically
—————no-repeat The image is not allowed to be tiled
——
Background positioning set
background-position property
Use the attribute value ** position** to define,
:: Use keywords: top, bottom , Left, right, center; you can also use the length value 100px, the percentage value is 50%;
：：50% 50% (aligned to the center), 0% 0% is placed in the upper left corner of the inner margin area of the element
-
background association set
background -attachment attribute
Use the attribute value ** attachment** to define, set whether the background image is scrolled with the page
:: Use keywords:
——Fixed fixed, not affected by scrolling——
scroll scrolling, it will scroll with the document. Is the default value
–
id selector
：为标有 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 call css/js file rules
js the
id used #to call a class ·point to adjust; HTML element without modulation symbol
as :: # bigBox .inputBox .inputText input {}
<div id="bigBox">
<div class="inputBox">
<div class="inputText">
<input type="text" />
</div>
</div>
</div>
Fast
HTML中
写多行, 用 *数量 可创建多个div盒子
li：div.col-md-1*12
<div class="col-md-1"></div>
：：md是尺寸
css中
重复代码，采用 多元素器来优化代码。用逗号隔开。
conventional
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中的代码块，其他都是固定结构。