Day13-超文本标记语言

其他 2020-10-15 21:47:50 阅读次数: 0

title: Day13-超文本标记语言
date: 2020-07-21 10:28:59
tags:

HTML内容

  1. Html就是超文本标记语言的简写，是最基础的网页语言
  2. Html是通过标签来定义的语言，代码都是由标签所组成
  3. Html代码不用区分大小写
  4. Html代码由<html>开始</html>结束。里面由头部分<head></head>和体部分<body></body>两部分组成
  5. 头部分是给Html页面增加一些辅助或者属性信息，它里面的内容是最先加载
  6. 体部分是真正存放页面数据的地方
<html>
    <head>
        <title>这是网页标题</title>
    </head>
    <body>
        <font color = "blue">Hello Wold!</font>
    </body>
</html>

  • 多数标签都是有开始标签和结束标签，其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在标签内结束。

  • 想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性，通过对属性值的改变，增加了更多的效果选择。

  • 属性与属性值之间用"="连接，属性值可以用双引号或单引号或者不用引号，一般都会用双引号。或公司规定书写规范。

  • 格式： <标签名 属性名='属性值'> 数据内容 </标签名>

    ​ <标签名 属性名='属性值' />

  • 操作思想：为了操作数据，都需要对数据进行不同标签的封装，通过标签中的属性对封装的数据进行操作。标签就相当于一个容器。对容器中的数据进行操作，就是在再不断的改变容器的属性值。

常用标签的使用

Html注释格式：<!-- 注释文字 -->

  • 字体：<font></font>

  • 标题：<h1></h1>......<h6></h6>

  • 列表：<dl> <dt>上层项目内容</dt> <dd>下层项目内容</dd> </dl>

    扫描二维码关注公众号，回复： 11919251 查看本文章

    ​ <dd>标签内容自动缩进效果

  • 有序列表：<ol><li>有序</li></ol> 有缩进效果

  • 无序列表：<ul><li>无序</li></ol> 有缩进效果

  • 图像标签：<img src = "D:\\aa.jpg height=300 width = 500 border = 10 alt = "hahaha"/>

    ​ height：高度 width：宽度 alt：图片说明文字

  • 图像地图：<img src = "Sunset.jpg" alt = "说明文字" usemap = "#Map" />

    ​ <map> <area shape = "rect" coords = "50,59,116,104" /> </map>

  • 表格标签：<table>表格 <caption>表头</caption> <tr>行 <td>列</td> <th>列加粗居中</th> </tr> </table>

  • 表格进阶：<table> <thead>表格头</thead> <tbody>表格体</tbody> </table>

  • 超链接标签：<a href = "#" target="_blank"> target：新窗口属性

  • 框架标签：<frameset></frameset>

  • 画中画标签：<iframe><iframe>

  • 表单标签：<form> <input type="text" /> </form>

  • 下拉菜单：<select><option>选项</option></select>

  • 文本区域：<textarea></textarea>

  • 头标签：<head></head>

  • 换行/分隔符：<br />、<hr />

  • 其他标签：<b>加粗</b>、<i>斜体</i>、<u>下划线</u>、<sub>下标</sub>、<sup>上标</sup>、<marquee direction = "down" behavior = "alternate"></marquee>、<pre></pre>

  • 区域标签：<div></div>自动换行

  • 行内区域标签：<span></span>没有换行

  • 段落标签：<p></p>段落前后空行 + 自动换行

注意事项：

  • 表格<table>默认下一级标签是<tbody>不写也存在

  • 超链接：链接资源，有href属性才有点击效果，如果没有指定过任何协议，解析是按照默认协议（file文件协议）解析。

    • 链接网址：<a href = "http://www.baidu.com">百度</a> 指定http协议
    • 链接图片：<a href = "images/1.png">图片</a>
    • 链接邮箱：<a href = "mailto:[email protected]">联系我们</a>
    • 链接视频：<a href = "http://www.xunlei.com/movies/sqbb.rmvb">神奇宝贝</a>
    • 链接视频：<a href = "thunder://werweoqakslfiwojaagjka==">神奇宝贝</a> 迅雷协议
    • 链接定位标记：<a name = top>顶部位置</a> <a href = "#top">回到顶部</a> （锚）
    • 取消超链接默认点击效果<a href = "javascript:void(0)">

  • 定义框架标签：

    <html>
    <head></head>
    <frameset rows = "30%, *">
        <frame src = "top.html"></frame>
    	<frameset cols = "30%, *">
	    	<frame src = "left.html"></frame>
    		<frame src = "right.html"></frame>
    	</frameset>
	</frameset>
    <body>
        
    </body>
</html>

  • 表单标签：如果要提交给服务端数据，表单的组件必须有name和value属性

    <form action = "http://192.168.1.82：10086" method = "get"><!--提交到服务器，方式get--> 
    输入名称：<inpput type = "text" name ="user" value="" /><br />
    输入密码：<inpput type = "password" name = "pass" value="" /><br />
   	<!--分到同一组sex中-->
    选择性别：<input type = "radio" name = "sex" value="M" />男 
    		<input type = "radio" name = "sex" balue="W" checked = "checked" />女<br />
    选择技术：<input type = "checkbox" name = "tech" value = "java" />Java
    		<input type = "checkbox" name = "tech" value = "Html" />HTML
    		<input type = "checkbox" name = "tech" value = "CSS" />CSS<br />
    选择文件：<input type = "file" name = "file" /><br />
    <!-- 图片提交按钮 -->
    一个图片：<input type = "image" src = "1.jpg" /><br /> 
    <!-- 数据不需要客户端指定，但可以将其提交服务端 -->
    隐藏组件：<input type = "hidden" name = "myke" value = "myvalue" /><br /> 
    一个按钮：<input type = "button" value = "有个按钮" onclick = "alert('有个按钮')" />
    <input type = "reset" value = "重置"/><input type = "submit" value = "提交数据"/>
</form>

  • 下拉菜单/文本区域

    <select name = "country">
    <option value = "none">--选择国家--</option>
    <option value = "cn" selected = "selected">中国</option>
    <option value = "en">美国</option>
    <option value = "usa">英国</option>
</select>
<textarea name= "text"></textarea>

  • 头标签

    <head>
    <title>标题</title>
    <base target="_blank" />
    <meta http-equiv = "refresh" content = "3"; url = http://www.baidu.com />
    <link />
</head>

服务端Get和Post的区别

  1. get提交：提交的信息都显示在地址栏中

    post提交：提交的信息不显示在地址栏中

  2. get提交：对敏感数据信息不安全

    post提交：对敏感数据信息安全

  3. get提交：对于大数据不行，因为地址栏存储体积有限

    post提交：可以提交大数据

  4. get提交：将信息封装到请求消息的请求行中

    post提交：将信息封装到了请求体中

  5. 在服务端的区别：如果出现将中文提交到tomcat服务器会出现乱码，服务器默认会使用ISO-8859-1进行解码出现乱码

    1. 通过ISO8859-1进行编码，在用指定中文码表解码，即可。这种方式对get、post提交都有效

    2. 但是对post提交方式提交的中文还有一种解决方法，直接使用服务端一个对象request对象的setCharacterEncoding方法直接设置指定的中文编码表。

      该方法只对请求体中数据有效

综上所述：表单提交建议使用post

和服务端交互的三种方式

  • 地址栏输入url地址：get
  • 超链接：get
  • 表单：get、post

XHTML和XML

XHTML是可扩展的超文本标记语言(Extensible HyperText Markup Language)。

  • XHTMI是w3c组织在2000年的时候为了增强HTML推出的，本来是想替代HTML，但是发现Internet上用HTML写的网页太多，未遂！

    可以理解为它是HTML一个升级版(HTML4.01)。

  • XHTML的代码结构更为严谨，是基于XML的一种应用。

    XMI是可扩展标记语言(Extensible Markup Language)

  • XML是对数据信息的描述。HTML 是数据显示的描述。

  • XML代码规定的更为严格，如：标签不结束被视为错误。

  • XML规范可以被更多的应用程序所解释，将成为一种通用的数据交换语言。

  • 各个服务器，框架都将XML作为配置文件。

标签分类

  1. 块级标签（元素）：标签结束后都有换行
    • div、p、dl、table、title、ol、ul
  2. 行内标签（元素）：标签结束后没用换行
    • font、span、img、input、select、a

CSS内容

CSS是层叠样式表( Cascading Style Sheets )用来定义网页的现实效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的现实效果功能。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。

那么CSS和HTML如何在网页中相结合，通过四种方式：

  1. style属性方法：该方法啊比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改

    <p style = "background-color:#FF0000; color:#FFFFFF">

  2. style标签方式：(内嵌方式)在head标签中加入style标签，对多个标签进行统一修改，该方法对单个页面统一设置，对局部不灵活

    <head><style type = "text/css"> div{background-color:#FF0000; color:#FFFFFF} </style></head>

  3. 导入方式：前提是存在一个定义好的CSS文件，url括号后必须用分号结束

    @import url(div.css);

  4. 链接方式：前提是存在一个定义好的CSS文件，重复样式以最后链接进来的为准

    <link rel = "stylesheet" href = "div.css" type = "text/css" />

  • 样式的优先级：

    由上到下，由外到内。优先级由低到高

    style属性 > id选择器 > 类选择器(class) > 标签选择器

  • 总结css代码格式：

    选择器名称 { 属性名：属性；属性名：属性值… }

    属性与属性之间用分号隔开

    属性与属性值之间用冒号链接

    如果一个属性有多个值的话，那么多个值用空格隔开

  • 选择器：

    就是指定css要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。
    选择器共有三种：

    1. html标签名选择器。使用的就是html的标签名。
    2. class 选择器。其实使用的标签中的class属性。
    3. id选择器。其实使用的是标签的中的id属性。

    每一个标签都定义了class属性和id属性。用于对标签进行标识，方便对标签进行操作。

    在定义中，多个标签的class属性值可以相同，而id值要唯一，因为JavaScript中经常用。

  • class选择器：

    在标签中定义class属性并赋值。通过标签名.class 值对该标签进行样式设置

    p.pclass_1 {color:#fFFF00;} p.pclass_2 {color:#0000FF;}

    <p class = "pclass_1"></p>

  • id选择器：与class类似，但格式不同，选择器名称为：#id值

    div#ID1 {color:#fFFF00;} div#ID1{color:#fFFF00;}

    <div id = "ID1"></p>

  • 扩展选择器：

    1. 关联选择器：标签是可以嵌套的，要让相同标签中不同标签显示不同样式，就可以使用此选择器

      p {color:#00FF00;} p b {color:#FFFF00;}

      <p>aa标签 <b>bbb</b> aaaa</p>

    2. 组合选择器：对多个不用选择器进行相同样式设置的时候使用此选择器

      p,div {color:#FF0000;}

      <div>aaaa</div><p>bbbb</p>

    3. 伪元素选择器：其实就是在html中预先定义好的一些选择器。称为伪元素。是因为css的术语

      格式：标签名：伪元素.类名 标签名.类名：伪元素.都可以

      <!-- 伪元素 -->
<html>
    <head>
        <style type="text/css">
            /*超链接访问状态*/
            /*未访问*/
            a:link{
         
         
                background-color:#06F;
                color:#FFF;
                text-decoration:none;
                font-size:18px;
            }
            /*鼠标悬停*/
            a:hover{
         
         
                background-color:#FFF;
                color:#F00;
                font-size:24px;
            }
            /*点击效果*/
            a:active{
         
         
                background-color:#000;
                color:#FFF;
                font-size:36px;
            }
            /*访问后*/
            a:visited{
         
         
                background-color:#FF9;
                color:#000;
                font-size:36px;
                text-decoration:line-through;
            }
            /* L V H A */ 驴叫
            /*聚焦*/
            input:focus{
         
         
                background-color:#FF9;
            }
        </style>
    </head>
</html>

盒子模型

  • 边框：border（颜色 线形 粗细）
    • 上：border-top
    • 下：border-bottom
    • 左：border-left
    • 右：border-right
  • 内边距：pappding（上下左右类似边框）
  • 外边距：margin（上下左右类似边框）

布局属性Layout

  • 浮动 float：none | left | right （clear：清除浮动属性）

定位属性position

  • 定位 position：static | absolute | fixed |relative
    • absolute：脱离文档流，设置偏移量，会影响其他元素的位置定位
    • relative：不脱离文档流，相对于原来的位置偏移，不影响其他元素布局

Javascript内容

JavaScript是基于对象和事件驱动的脚本语言，主要应用在客户端。

  • 特点：

    1. 交互性（它可以做的就是信息的动态交互）
    2. 安全性（不允许直接访问本地硬盘）
    3. 跨平台性（只要是可以解释JS的浏览器都可以执行，和平台无关）

  • JavaScript和Java的不同

    1. JS是Netscape公司的产品，前身是LiveScript；Java是sun公司的产品，现在是Oracle公司的产品
    2. JS是基于对象，Java是面向对象
    3. JS只需要解释就可以执行，Java需要先编译成字节码文件，再执行。
    4. JS是弱类型，Java是强类型

  • JavaScript与HTML的结合方式

    想要将其他代码融入到HTML中，都是以标签的形式

    1. JS代码存放在标签对<script> js code... </script>中

    2. 当有多个HTML页面使用到相同的JS脚本时，可以将js代码封装到文件中，只要在script标签的src属性引入js文件就可以

      <script src = "test.js" type = "text/javascript" ></script>

      定义了src属性，标签内容不会被执行，早期有language现在使用type替换

JavaScript语法

  1. 关键字：被赋予特殊含义的单词

  2. 标识符：用于标识数据表达式的符号，理解为自定义名称，变量名、函数名等

  3. 注释：注解说明解释程序，用于调试程序

  4. 变量：标识内存中一片空间，用于存储数据，该空间数据可以变化

  5. 运算：让数据进行运算

  6. 语句：让程序的运行流程进行控制的表达式

  7. 函数：用于代码封装，提高复用性

  8. 数组：对多数据进行存储，便于操作，就是容器

  9. 对象：只要是基于对象的语言，或者是面向对象的语言都存在对象的概念。

    ​ 对象就是一个封装体，既可以封装数据也可以封装函数

// javascript是非严谨的
// 定义变量 
var num = 3;	// var 可以不写 ;也可以不写
num = "asdf";	// 字符串
num = 3.14;		// 小数，也是数字类型
num = true;		// boolean
num = 'c';		// 字符
alert("x = " + x);

// 运算
var a = 3710;
alert("a = " + a/1000*1000); 	// 3710
alert("12" + 1);	// 121
alert("12" - 1);	// 11
alert(true);		// true
alert(true + 1);	// 2  js中 false : 0、null  true : 非0、非null
var b = 3;
b += 5;
var c = 4;
alert(c > 3 && c < 7);
alert(!t);		// false
var d = 6;
alert(c&3);		// 2
alert(d >>> 1);	// 3
alert(d << 2);	// 24
alert(typeof("abc"));	// string
// 语句
var x = 3;
if(x == 4){
    
    
    alert("yes");
}else{
    
    
    alert("no");
}
switch(x){
    
    
    case 1:
        break;
    case 2:
        break;
    default:
        break;	// 可省略
}
// do while , while , for
while(x < 10){
    
    
    // 将数据直接写道当前页面中
    document.write(x + "<br />");
    x++;
}
for(var i = 0; i < 3; i++){
    
    
    document.write(i);
}
w:for(var i = 0; i < 3; i++){
    
    
    for(var j = 0; j < 10; j++){
    
    
        document.write(i);
        break w;	// continue w; 同理
    }
}
// 数组
var arr = [];
var arr = [1,3,5,7,9];	// Object类型
arr[4] = 8;
var arr1 = new Array(); 		// 等价于 var arr = [];
var arr1 = new Array(5); 		// 数组长度是5
var arr1 = new Array(5,6,7); 	// 等价于 var arr = [5,6,7];
// 函数
function add(x,y){
    
    
    return x + y;
}
var sum = add(4,5);			// 调用
alert(sum);

function getNum(){
    
    
    return 100;
}
alert(getNum);	// 漏了()，将getNum引用的地址指向函数对象直接输出 function getNum(){    return 100;   }
// 动态函数
var add1 = new Function("x,y", "var sum; sum = x + y; return sum;");
add(1,2);
// 匿名函数
var add2 = function (a,b){
    
    
    return a + b;
}
var sum1 = add2(1,2);
// 对象
var arr = [1,2,3,4,5];
alert(arr.toString());
var abc = function(){
    
    
    alert("abc run");
}
alert(abc);
alert(abc.valueOf());
alert(arr.valueOf());

// 去除字符串两端空格
function trim(str){
    
    
    var start, end;
    start = 0;
    end = str.length-1;
    while(start <= end && str.charAt(start) == " "){
    
    
        start++;
    }
    while(start <= end && str.charAt(end) == ' '){
    
    
        end--;
    }
    return str.substring(start, end+1);
}
var str = "    aabdf    ";
trim(str);

String.prototype.len = 199;
// 添加为string 内部方法
String.prototype.trim = trim;	// 调用上面的方法

String.prototype.trim = function(){
    
    
    var start, end;
    start = 0;
    end = this.length-1;
    while(start <= end && this.charAt(start) == " "){
    
    
        start++;
    }
    while(start <= end && this.charAt(end) == ' '){
    
    
        end--;
    }
    return this.substring(start, end+1);
};
alert("    aabdf    ".trim());

// 数组
var arr = ["aa", "bb"];
var arr1 = ["dd", "ee"];
arr.concat("cc", arr1);	 // 连接
arr.pop();				// 弹出尾元素  shift() 弹出头元素  unshift 开头插入
arr.splice(0,1,"aaa", "bbb", "ccc");	// 删除并替换

var date = new Date();
date.toLocaleString();		// 日期和时间
date.toLocaleDateString();	// 日期
// 日期毫秒值转换
var date1 = new Date();
var time = date1.getTime();	// 获取时间戳
var date2 = new Date(time);	// 获取日期对象

// 简化对象书写
with(date){
    
    
    var year = getFullYear();
    var month = getMonth() + 1;
    var day = getDate();
}
// Math对象
Math.ceil(12.34);		// 返回大于等于指定参数的最小整数 13
Math.floor(12.34);		// 返回小于等于指定数据的最大整数 12
Math.round(12.34);		// 四舍五入
parseInt((Math.random() * 10 + 1));	// 1-10

// Golbal全局对象
var val = parseInt("abc");	// val = NaN(非法)
isNaN(val);		// true

val = parseInt("12adv");	// val = 12
val = parseInt("adv12");	// val = NaN
var num = parseInt("110",2);	// 6 二进制

var num1 = new Number(6);
num1.toString(2);	// 110 十进制转二进制

Javascript细节

  • undefined：未定义

  • typeof()：判断类型

  • 数组：长度可变，元素类型任意（建议使用时，存储同类型元素）

  • 函数：明确功能结果和参与运算的未知内容，没有返回return可以省略

    格式：function 函数名(参数列表){ 函数体; return; }

    只要使用了函数的名称就是对这个函数的调用，没有重载的说法，函数参数存储的是数组arguments

    动态函数：使用js内置的对象Function，参数列表是通过字符串动态指定的

  • 全局变量和局部变量：在script中定义的变量在脚本中都有效，称为全局变量

    ​ 在函数中定义的变量是局部的，只在函数中有效

  • 给String对象添加功能：String.prototype.方法名

/**
 *	for in		// 对对象进行遍历
 *	格式：
 *	for(变量 in 对象){}		
 */
var arr = [23,32,45,65,78];

for(i in arr){
    
    
    console.log(i);			// i 脚标
    console.log(arr[i]);	// arr[i] 数据
}

堆栈和队列练习

// 数组练习
var arr = [];

arr.unshift("aaa","bbb","ccc");		// aaa bbb ccc 添加一次
arr.unshift("aaa");
arr.unshift("bbb");
arr.unshift("ccc");		// ccc bbb aaa  添加三次

arr.pop();	// aaa
arr.pop();	// bbb
arr.pop();	// ccc

arr.shift();	// ccc
arr.shift();	// bbb
arr.shift();	// aaa

function removeList(arr){
    
    
    arr.shift();
}
function removeList(arr){
    
    
    arr.pop();
}

自定义对象

想要自定义对象，应该先对对象进行描述，js是基于对象的，不是面向对象，不具备描述事物的能力，我们可以通过函数模拟面向对象

// 用函数描述人
function Person(){
    
    	// 相当于构造器 
    alert("person run");
}

// 通过描述进行对象的建立。new
var p = new Person();

// 动态给p对象添加属性。直接用p.属性名即可
p.name = "zimo";
p.age = 18;
// 如果定义的p对象的属性赋值为一个函数，即是给p对象添加一个方法
p.show = function(){
    
    
    alert("show run" + this.name + this.age);
}
p.show();

function Person1(name, age){
    
    
    // 在给Person1对象添加两个属性
    this.name = name;
    this.age = age;
    
    this.setName = function(name){
    
    
        this.name = name;
    }
    this.getName = function(){
    
    
        return this.name;
    }
}

var p = new Person("旺财", 20);
p.setName("zimo");
alert(p.name);
alert(p.getName());

var pp = {
    
    
    // 定义一些成员,使用键值对隔开key:value
    "name":"张三","age":20,
    "getName":function(){
    
    
        return this.name;
    }
}
// 对象调用的两种方式：对象.属性名  对象["属性名"]
alert(pp.age + ":" + pp.getName() + pp["age"]);		// 20:张三:20

猜你喜欢

转载自blog.csdn.net/qq_38205875/article/details/109068064
今日推荐
Linus “吃狗粮”最积极！
开源日报 | Winamp播放器即将开源；生成式AI之战升级第二轮；Linus“吃狗粮”最积极；AI进入泡沫前期；吴泳铭为阿里云带来了什么？
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
周排行
SVN服务端安装在阿里云
实战 | 相机标定
webpack核心概念
note20——》只要肯低头吃苦，人生就会有救
PAT甲级 1062 Talent and Virtue （25 分）排序
NG Toolset开发笔记--5GNR Resource Grid（26）
如何对待上司
oracle命令
第9章 STL迭代器
logstash使用es映射模板
每日归档
更多
2024-05-20(36)
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022