web前端-HTML，CSS，JavaScript

HTML—超文本标记语言

超文本：不止传输文本，还可以传输音频、视频、图片等
标记：给内容前后加上标记，怎么渲染内容（举例：< h1>标题< /h1>）
HTML文件：XXX.html，静态网页
这就是一个HTML文件了↓

默认打开是空白的

可以给文件中添加内容后再打开

< !DOCTYPE html>是说明
尖箭头包裹的，就是标签。标签一般都是成对出现的，有头有尾

HTML基本结构
分为两大部分:
head：head里的东西基本都不显示，只有title显示
body：body里的东西基本都显示

body主要由标签(页面元素)组成
head里的标签
title
body里的标签
h1：标题文字大小（最大号）
h2…
p：分段标志
img：图片格式
,显示图片标志,“…“为图片的地址
table：表格
tr：定义表格的行，用在table中
td：定义表格的单元格，用在tr中
a：超链接
< /a>,链接标志,"…"为链接的文件地址
input：输入
< input type = “” >
select：下拉框
option：select中的选项
div：盒子，方块
iframe：子窗口
< iframe src=“链接”>< /iframe>
br：换行
hr：水平划线

CSS选择器

css
层叠样式表

引入方式:
1.标签直接引用，标签中直接设置样式style
2.内部样式表
在head中直接设置标签的样式，body中写这个标签的时候如果不设置样式就默认是head中style标签中设置的样式

3.外部样式表 *.css
创建一个css文件，用来保存所有的样式

 /*标签选择器*/
 div{
     width: 300px;
     height: 300px;
     color: #b80b48;
 }

 .div_big
 {
    background-image:url(../pic/背景图片2.jpeg)
 }

 /*类选择器*/
 .divcss_green{
     color: #2bb80b
 }

 .divcss_blue{
     color: #0b30b8
 }

 /*id选择器*/
 #but{
     color:  darkblue;
 }

 /*层级选择器*/
 div a{
     color: #9eb0f8;
     font-size: 50px;
     font-style: italic;
 }

 body a{
     color: #eb9ef8;
 }

 /*背景色*/
 a{
     background: #b8ff4c;
 }
 
 

然后导入这个css文件

语法:

选择器{
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
}

css的样式优先级
行内样式>内部样式>外部样式

选择器优先级
id选择器>类选择器>标签选择器

JavaScript

HTML,CSS,JS的关系

HTML 定义了网页的内容
CSS 描述了网页的布局和样式
JS 实现了网页的行为

如何引入JS
js必须放在script标签之间

行间事件：写入简单的js脚本

<div id="page_name">
    <h1 id="div_reg" onclick="alert('你点击了 一个H1标签')" style=" position:relative; top:10%; left:20%; ">注册信息</h1>
</div>

页面的script标签嵌入：
将js脚本放在< script> js脚本 < /script>
可以放在head 和body中外部引用：专门用一个文件保存js脚本,后缀名是 .js

js语法

大小写敏感js的四种输出方式

-使用window.alert()d出警告框

-使用document.write()方法 将内容写到HTML中 .整个网页内容都被改写

-使用 innerHTML 写入到 HTML元素中

-使用console.log() 写入到浏览器的控制台

js *** 作页面

输出网页内容获取页面元素及内容改变标签内容改变标签属性删除只读属性控制滚动条