An introduction to web development
Web: The global wide area network, also known as the World Wide Web, is a website that can be accessed through a browser
The workflow of the Web site: (front-end and back-end separation mode)
What are the components of a web page?
Text, picture, video, audio, hyperlink
The front-end code becomes the page that the user sees through the parsing and rendering of the browser, and the part that parses and renders the web page is the core of the browser
Web standards
Different browsers may have different results when parsing the same front-end code. In order to unify the rendering effect, a standard has been formulated: web standard, also called web page standard, which is formulated by the World Wide Web Consortium.
Three components :
HTML: the structure of a web page (elements and content of the page)
CSS: the performance of the web page (the appearance of the web page element, the position of the page, etc.)
JavaScript: Behavior of web pages (interaction effects)
Two HTML and CSS
HTML : (HyperText Markup Language) hypertext markup language, beyond the text limit, more powerful than ordinary text, in addition to text information can also define pictures, audio, video and other content. Markup language, a language made up of tags.
Tags are predetermined, for example: <a> display hyperlink, <video> display video. HTML code runs in the browser and is parsed by the browser.
CSS : (Cascading Style Sheet) Cascading style sheets are used to control the style of web pages.
Reference learning documents:
Features :
1 Case insensitivity in HTML
2 Attributes in the src reference can use double quotes or double quotes
3 The grammatical structure is not rigorous enough, and it can still be displayed after deleting the </> part in the tag
Three compiler software
VSCode：Visual Studio Code - Code Editing. Redefined
Four specific applications of HTML and CSS
4.1 Title layout
<!DOCTYPE html> <!-- 文档格式是html -->
<html lang="en">
<head>
<!-- 字符集 -->
<meta charset="UTF-8">
<!-- 浏览器的兼容性 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题 -->
<title>焦点访谈：中国底气</title>
</head>
<body>
<!-- img :
src：图片资源路径
width：宽度
height：高度
路径的书写方式：
1 绝对路径：盘符指定的路径 网页指定的路径
2 相对路径：./是当前路径 可以省略
../是上一级路径 不可省略 ./image1.jpg
width :px 像素 百分比
-->
<img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png" > 新浪政务 > 正文
<h1 >中国底气 新思想夯实大国粮仓</h1>
<hr>
2023年05月17日 22:00 央视网
<hr>
</body>
</html> Style after run:
4.2 Title Style
How to import CSS:
Inline styles, separated by semicolons
Embedded style, generally defined in the head, h1 hr is called a selector, after definition, the style of the entire page selector will change
·Extralink style: Define a .css file separately, and introduce it in the web page through the link tag.
the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>焦点访谈：中国底气</title>
<!-- 方式二 针对当前页面有效-->
<!-- <style>
h1{
color: aqua;
}
</style> -->
<!-- 方式三 link -->
<link rel="stylesheet" href="css/news.css">
</head>
<body>
<img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png" > 新浪政务 > 正文
<!-- 方式一 只针对该条目有效-->
<!-- <h1 style="color: antiquewhite;" >中国底气 新思想夯实大国粮仓</h1> -->
<h1>中国底气 新思想夯实大国粮仓</h1>
<hr>
2023年05月17日 22:00 央视网
<hr>
</body>
</html> css code:
Color representation :
1 English word representation: blue, red, green
2 rgb representation: red, green and blue primary colors rgb(0,0,0)---rgb(255,255,255)
3 Hexadecimal #beginning #000000 Two digits are a color from left to right are red, green and blue
Google color picker plug-in : live color picker
Span is a label with no practical effect, which is used to display different elements in a row for a splitting effect
<span style="color: gray;">2023年05月17日 22:00</span> <span>央视网</span>CSS selector: used to select elements that need styles
<span id="time">2023年05月17日 22:00</span> <span>央视网</span>
#time{
color: gray;
}4.3 Hyperlinks
the code
<!-- 属性：
href：指定资源访问的url
target：在何处打开资源链接
_self：默认值 在当前页面打开
_blank：在空白页面打开-->
<a href="http://gov.sina.com.cn/" target="_blank">新浪政务</a> > 正文CSS styles:
a{
color: black;
text-decoration: none; /*超链接去除下划线*/
}4.4 Text
code:
<!-- 视频标签Video
src：规定视频的URL
controls：显示播放控件
width：视频播放器的宽
height：视频播放器的高 -->
<!-- 音频 audio
src：规定视频的URL
controls：显示播放控件-->
<!-- 段落 p -->
<!-- 文本加粗 b /strong -->
<p>
<video src ="E:\Vlog\kkk.mp4" controls
width="400px"></video>
</p>
<p>
<audio src="E:\Vlog\xjy.mp3" controls></audio>
</p>
<p>
<b>辽宁省</b>医疗保障局在回复中表示，辽宁省医保局高度重视促进人口生育相关政策，认真贯彻落实《关于进一步完善和落实积极生育支持措施的指导意见》（国卫人口发〔2022〕26号）“逐步将适宜的分娩镇痛和辅助生殖技术项目按程序纳入基金支付范围”的工作要求，组织专家开展讨论。
辽宁省医疗保障局表示，2023年5月5日，印发了《关于调整辽宁省基本医疗保险、工伤保险和生育保险医疗服务项目目录的通知》（辽医保〔2023〕33号），将胚胎培养、胚胎移植术等18项辅助生殖项目纳入我省生育保险目录，拟于2023年7月1日全省执行。
澎湃新闻记者注意到，目前，辽宁省医疗保障局网站尚未公布“辽医保〔2023〕33号”这一已经印发的文件。
</p>
<p>
<strong>《辽宁省2022年国民经济和社会发展统计公报》</strong>显示：根据1‰人口抽样调查推算，辽宁省2022年末常住人口4197万人；全年出生人口17.2万人，出生率为4.08‰；死亡人口38.1万人，死亡率为9.04‰；人口自然增长率为-4.96‰。
</p>
<img src="E:\Vlog\test.png" height="400px">
<p>
近年来，全国各地关于将试管婴儿、辅助生殖项目纳入医保的呼声渐高。北京市2022年一度拟将16项辅助生殖技术项目纳入医保甲类报销范围，后来暂缓执行。
</p>
<p id="end">
责任编辑：橙子
</p>CSS styles:
p{
text-indent: 35px; /*设置首行缩进 */
line-height: 30px; /*设置行高 */
}
#end{
text-align: right; /*设置文字对齐方式 */
}4.5 Layout
Box: All elements on the page can be regarded as a box, and the elements on the page are contained in a rectangle by the box, which is more convenient for page layout through the perspective of the box
Box model composition: content area, inner margin area, border area, outer margin area
Two commonly used tags in layout: <div> <span>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型</title>
<style>
div{
width: 200px;
height: 200px;
box-sizing: border-box; /*指定width height为盒子的宽高*/
background-color: aquamarine; /*背景色*/
padding: 20px; /*内边距 “上右下左 ” 四个值都一样可以简写为一个值*/
border: 15px solid orange;/*边框 “ 宽度 线条类型 颜色”*/
margin: 30px; /*外边距 “上右下左 ” 四个值都一样可以简写为一个值*/
}
</style>
</head>
<body>
<div>orangeorangeorange</div>>
</body>
</html>Add a line of words in the div box, and the effect is like this:
Then add CSS styles to the previous news,
#center{
width: 65%;
margin: 0% 17.5% 0% 17.5%;
}The content in the Body is wrapped with a div, so that the content can be displayed in the center of the page
<div id="center">
</div >4.6 Tables
Display data neatly in the form of rows and columns on the web page
code:
<!-- trd代表行 th代表表头 td是单元格中的内容
cellspacing="0"表示单元格中间的间距是0-->
<table border="1px" cellspacing="0" width="300px">
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>21841001</td>
<td>小芳</td>
<td>19</td>
</tr>
<tr>
<td>21841005</td>
<td>小丽</td>
<td>19</td>
</tr>
</table>
4.7 Forms
Scenario: It is mainly used in web pages to be responsible for data collection functions, registration and login, etc.
Tag: <form>
<!-- form 表单
input 表单项 通过type控制输入形式
select 定义下拉列表
textarea 定义文本域
action+URL 规定提交表单时向谁发送数据 不指定默认提交当前页面
method 规定用于发送表单数据的方式 get post-->
<form action="" method="get">
用户名 <input type="text" name="username">
年龄 <input type="text" name="age">
<input type="submit" value="提交">
</form>
Enter the user name orange age 18 and click submit, the URL changes as follows:
file:///E:/pro_web/HTML/%E8%A1%A8%E5%8D%95.html
--->>
file:///E:/pro_web/HTML/%E8%A1%A8%E5%8D%95.html?username=orange&age=18
post request, open the developer mode in the webpage, and then see:
The type type in Input :
Select: defines the drop-down list, option defines the list item
code:
<form action="" method="post">
用户名 <input type="text" name="username"> <br><br>
年龄 <input type="text" name="age"> <br><br>
性别<label><input type="radio" name="gender" value="1"> 男 </label>
<label><input type="radio" name="gender" value="2"> 女 </label> <br><br>
爱好<label><input type="checkbox" name="hobby" value="java">Java</label>
爱好<label><input type="checkbox" name="hobby" value="python">python</label> <br><br>
照片<input type="file" name="img"><br><br>
邮箱<label><input type="email" name="email"></label><br><br>
学历<select>
<option value="">-------请选择--------</option>
<option value="1">大专</option>
<option value="2">本科</option>
<option value="3">硕士</option>
<option value="4">博士</option>
</select><br><br>
<input type="button" value="按钮">
<input type="reset" value="重置">
<input type="submit" value="提交">
</form>
5 JavaScript
JavaScript, referred to as JS, is a cross-platform object-oriented scripting language used to control the behavior of web pages and make web pages interactive
5.1 Introduction of JS
Internal script:
Define the JS code in the HTML page
1 JS code must be between <script></script>
2 Any number of scripts can be placed anywhere in Html
3 Generally, the script code will be placed below the body to improve the display speed
code:
<body>
<script>
alert("Hello world")
</script>
</body>External script:
Define the JS code in an external js file, and then introduce it into the HTML page
1 The external JS file only contains JS code and does not contain script tags
2 The <script> tag cannot be self-closing and
<body>
<script src=" js/demo.js"></script>
</body>
alert("外部引用 hello JS")5.2 Basic syntax of JS
writing grammar
1 case sensitive
2 The semicolon after each line is optional
3 //Single-line comment /*multi-line comment*/
4 Curly braces denote code blocks
output statement
window.alert("弹框输出")
document.write("浏览器输出")
console.log("控制台输出")variable
var declare variable var a=10; a="Zhang San";
JS is a weakly typed language, and variables can store values of different types.
Rules for variable names:
1 The constituent characters can be any alphanumeric underscore $
2 digits cannot start with
3 It is recommended to use the hump method
{
var a=10;
var a="张三"
}
window.alert(a)
//var定义的是全局变量
//var定义出来的变量是可以重复定义的 后定义的会将之前的覆盖掉//let 定义的变量只在作用域内有效 是局部变量 且不能重复定义
let a=10;
window.alert(a)
// const关键字用来声明一个只读变量，一旦声明就不能改变type of data
Primitive data types and reference data types
var number =1 ;//数字
string //字符串
boolean //布尔
null //对象为空
undefined //声明的变量未初始化时 默认值是undefinedGet the data type typeof
alert(typeof 1) //number
alert(typeof "A") //string
alert(typeof A) //undefined
alert(typeof false) //boolean
alert(typeof null) //objectoperator
== will perform type conversion and then compare
=== No type conversion, direct comparison
var a=10;
alert(a=="10") //true
alert(a==="10") //false
alert(a==10) //true//字符串转换为数字
var a=10;
alert(parseInt("12")) //12
alert(parseInt("12AAA")) //12
alert(parseInt("BABA")) //NaN (not a number)Other types are converted to boolean
Number: 0 and NaN are false, others are converted to true
String: Empty string is false, others are converted to true
Both null and undefined are converted to false
flow control statement
if... else
switch
for
while
do while
5.3 Functions
//函数 function
function funName(a,b){
return a+b;
}
var dec=function funName1(c,d){
return c-d;
}
alert(dec(2,1)) //1
alert(funName(2,8)) //10Note: 1 parameter does not need to have a type
2 The return value does not need to define the type and return it directly
5.4 Objects
Array
var arr=new Array(1,2,3);
var arr=[1,2,3];
//访问
alert(arr[1]) The length of the array in JS is variable, and the types in the array can be varied
Attribute: length
Method: forEach() traverses each valued element
push() adds new elements to the end and returns the new length Sequential execution
splice(start,stop) delete deletes the first and last elements
var arr=new Array(1,2,3,5);
arr[10]=90;
for (let index = 0; index < arr.length; index++) {
const element = arr[index];
console.log(arr[index]);
}
arr.forEach(function(e){
console.log(e);
})
Foreach, only traverse elements with values
String
var s = new String("hello world");
var s2="hello js"
var s3='hello js 单引号' 
Attribute: length
method:
chatAt: returns the character at the specified position
indexof: retrieve the position of the string
trim: remove the spaces on both sides of the string
substring: Extract the characters between two specified index numbers in the string (including the head but not the tail)
JSON
JS自定义对象：
var obj ={
name:"ab",
age:20,
run(){
alert("run");
}
}
//调用
obj.name;
obj.run();
JSON: JavaScriptObjectNotation, text written by JavaScript object notation.
Key: wrapped in double quotes
Value: number, string, logical value (true false), array [], object {}, null
//定义JSON字符串：
var jsonStr='{"name":"Tom","age":18,"hobby":["java","JS","C++"]}'
//JSON字符串转JS对象：
JSON.parse(jsonStr);
//JS对象转JSON字符串：
JSON.stringify()
BOM
Browser Object Model Browser Object Model
Window: browser window object
Navigator: browser object
Screen: screen object
Location: address bar object
History: History object
Window:
window.alert(), window can be omitted
alert(): displays an alert box with a message and a confirm button
confirm (): Display a dialog box with a message and a confirmation button and a cancel button. Confirm is true and cancel is false
setInterval(): Call a function or calculate an expression according to the specified period
setInterval(function(){
console.log(1);
},2000) //每隔两秒打印一个1
setTimeout(): Call a function or evaluate an expression after a specified number of milliseconds
Location:
Attribute: href, set or display the full URL
alert(location.href);
code:
window.location.href="https://www.w3school.com.cn/js/js_window.asp";
Result: Jump directly to this page
DOM
Document Object Model, which encapsulates the various components of the markup language into objects.
A standard model for all document types
Document: the entire document object
Element: Each tag of the element object is encapsulated into an element object
Attribute: attributes in the attribute object tag
Text: the text in the text object label
Comment: Annotation object
Dom tree :
JavaScript can operate on HTML through Dom,
1 Changing the content of an HTML element
2 Changing the style of HTML elements
3 Reacting to HTML DOM events
4 Adding and removing HTML elements
The element of HTML can be obtained through the document object, and the document is obtained through the window object
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS对象－DOM</title>
</head>
<body>
<img id="h1" src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png"> <br><br>
<div class="cls">传智教育</div> <br>
<div class="cls">黑马程序员</div> <br>
<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 游戏
<input type="checkbox" name="hobby"> 看书
<input type="checkbox" name="hobby"> 滑板
</body>
<script>
//1 获取element元素
//1.1 根据ID获取
var img=document.getElementById("h1");
alert(img);
//1.2 根据标签获取
var arr=document.getElementsByTagName("div");
for(let i=0;i<arr.length;i++){
const ele=arr[i];
}
//1.3 根据name获取
var arr1=document.getElementsByName("hobby");
for(let i=0;i<arr1.length;i++){
const ele=arr1[i];
}
//1.4 根据class属性获取
var arr2=document.getElementsByClassName("cls")
for(let i=0;i<arr2.length;i++){
const ele=arr2[i];
}
//2 参考手册 找到对应标签的属性 方法
var ele2=arr2[0];
ele2.innerHTML="传智教育哈哈哈"; //把传智教育改成传智教育哈哈哈
</script>
</html>//总结：
//1 拿到element对象
//2 根据标签属性去更改设置对应的方法或者属性
var img=document.getElementById("h1");
img.src("");5.5 JavaScript events
Events: HTML events are things that happen to HTML elements, such as:
1 button is clicked
2 The mouse moves over the element
3 Press the keyboard
Event monitoring: the code that JS executes when an event is detected
event binding
1 Binding through event attributes in tags in HTML
2 Binding via DOM elements
<body>
<button type="button" id="id1" value="事件绑定1" onclick="on()"></button>
<button type="button" id="id2" value="事件绑定2"></button>
</body>
<script>
//通过HTML事件属性进行绑定
function on(){
alert("按钮1被点击");
}
//通过DOM元素进行绑定
document.getElementById("id2").onclick=function(){
alert("按钮2被点击");
};
</script>common events
