JavaWeb5——html及其它

2022/7/8

html,所有网页都是html写出来的。超文本标记语言。

W3C标准:结构html、表现css、行为JavaScript

标签种类很多,自己用的时候上网查找就好了,举常用例子:

一、html各种各样的常用标签

标题、段落、字体、图像、超链接

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>张翰哲test(hanzhe.test.com)</title>
</head>
<body>
 

<h1>我的第一个标题</h1>
<h2>我的第二个标题</h2>
<h3>我的第三个标题</h3>
<h4>我的第四个标题</h4>
<h5>我的第五个标题</h5>
<h6>我的第六个标题</h6>
 


<p>
    我的第一个段落。
    <font face="黑体" size="10" color="#ffc0cb">张翰哲字体颜色</font><br>
    <b>我是粗体</b><br>
    <i>我是斜体</i><br>
    <u>我是下划线</u><br>
    <center>我在文本中间</center><br>
    <hr><br>
    我可以<br>折行<br>
    <a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a><br>
    <img id="h" src="https://images.cnblogs.com/cnblogs_com/blogs/742637/galleries/2130392/o_220323052849_back1.jpg" style="height: 100; width: 200">
</p>

<p>
    <table width="50%" border="1" cellspacing="0">
        <tr height="50">
            <th>序号</th>
            <th>品牌logo</th>
            <th>品牌名称</th>
            <th>企业名称</th>
        </tr>
        <tr align="center">
            <td>010</td>
            <td>三只松鼠的图片</td>
            <td>三只松鼠</td>
            <td>三只松鼠</td>
        </tr>
        <tr align="center">
            <td>009</td>
            <td>优衣库的图片</td>
            <td>优衣库</td>
            <td>优衣库</td>
        </tr>
        <tr align="center">
            <td>008</td>
            <td>小米的图片</td>
            <td>小米</td>
            <td>小米科技有限公司</td>
        </tr>
    </table>
</p>

</body>
</html>

二、html表格类型:

跨列:colspan

跨行:rowspan

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>张翰哲test(hanzhe.test.com)</title>
</head>
<body>

    <table width="50%" border="1" cellspacing="0">
        <tr height="50">
            <th colspan="2"></th>	
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
        </tr>
        <tr align="center">
            <td rowspan="4">上午</td>
            <td>早自习</td>
            <td>英语</td>
            <td>语文</td>
            <td>英语</td>
            <td>语文</td>
            <td>英语</td>
        </tr>
        <tr align="center">
            <td>第1节</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
        </tr>
        <tr align="center">
            <td>第2节</td>
            <td>物理</td>
            <td>物理</td>
            <td>物理</td>
            <td>物理</td>
            <td>物理</td>
        </tr>
        <tr align="center">
            <td>第3节</td>
            <td>化学</td>
            <td>化学</td>
            <td>化学</td>
            <td>化学</td>
            <td>化学</td>
        </tr>
        <tr align="center">
            <td colspan="7">午休</td>
        </tr>
        <tr align="center">
            <td rowspan="4">下午</td>
            <td>第4节</td>
            <td>生物</td>
            <td>生物</td>
            <td>生物</td>
            <td>生物</td>
            <td>生物</td>
        </tr>
        <tr align="center">
            <td>第5节</td>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
        </tr>
        <tr align="center">
            <td>第6节</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
        </tr>
    </table>

</body>
</html>

三、html表单项:(注意命名可以传递内容)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>张翰哲test(hanzhe.test.com)</title>
</head>
<body>

    <form action="#" method="post">
        <input type="hidden" name="123">

        <label for="username">用户名:</label>
        <input type="text" name="username" id="username"><br>
        
        <label for="password">密码</label>
        <input type="password" name="password" id="password"><br>

        性别:
        <input type="radio" name="gender" value="1" id="male"><label for="male">男</label>
        <input type="radio" name="gender" value="2" id="female"><label for="female">女</label>
        <br>

        爱好:
        <input type="checkbox" name="hobby" value="1"> 旅游
        <input type="checkbox" name="hobby" value="2"> 电影
        <input type="checkbox" name="hobby" value="3"> 游戏
        <br>

        头像:
        <input type="file"><br> 

        城市:
        <select name="city">
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="hubei">湖北</option>
            <option value="hunan">湖南</option>
            <option value="heilongjiang">黑龙江</option>
            <option value="taiwan">台湾</option>
            <option value="Hongkong">香港</option>
            <option value="xinjiang">新疆</option>
            <option value="xizang">西藏</option>
        </select><br>

        个人描述:
        <textarea cols="50" rows="5"></textarea>

        <br>
        <input type="submit" value="免费注册">
        <input type="reset" value="重置">
        <input type="button" value="一个按钮">

    </form>


</body>

在web开发工具那里可以查看网页动态,传递表单的值可以显示。

四、css一点点内容

1、css是一门语言,控制网页表现。

2、css导入方式:

内联样式:

<div style="color:chartreuse">hello css green!</div><br>

内部样式:(头内定义样式,实际表现用标签显示)

<!--head内定义-->
<style>
   	    <!--元素选择器-->
        span{
            color:blue;
        }
		<!--id选择器-->
        #name{
            color:red
        }
		<!--类选择器-->
        .cls{
            color:pink
        }
</style>

<!--实际运用-->
    <span>hello css blue!</span><br>
    <span id="name">hello css red!</span><br>
    <span class="cls">hello css pink!</span><br>
    <span class="cls">hello css pink 2!</span>

外部样式:

<!--head内建立link-->
<link href="demo.css" rel="stylesheet">

<!--段落文本-->
<p>hello css brown!</p>

<!--配置css文件内容-->
p{
    color:brown
}

五、JavaScript入门

JavaScript用来控制网页行为,使网页可交互,面向对象。

1、引入:

使用标签来编写代码块:

<!--直接标签引入-->
<script>
   alert("hello js!")
</script>

<!--定位js文件-->
<script src="../js/demo.js"></script>

2、语法类似java,区分大小写,但语句不敏感。注释方式也一样,分单行和多行。

输出语句:(运算、流程控制基础不再赘述)

<script>
    window.alert("hello js!");//写入警告框

    document.write("I'm zhz!");//写入html页面

    console.log("zhz is here!");//写入浏览器控制台
</script>

基础类型一个代码块解:

<script>
    var test = 20;  //全局变量
    let show = 30;  //局部变量(大括号代码块)
    const PI = 3.14;	//常量
    var arr = [1, 2, 3];

    // alert(test);
    // alert(typeof test);
    // alert(show);

    function add(a, b) {
        return a + b;
    }

    var multiply = function (a, b) {
        return a * b;
    }

    // alert(add(1, 4));
    // alert(multiply(4, 9.3));
    // alert(arr);

    arr.push(4);
    arr.splice(0, 2);

    // alert(arr);

    var string = '  abc  ';
    // alert(1 + string.trim() + 1);

    var person = {
        name: "zhangsan",
        age: 23,
        eat: function () {
            alert("干饭");
        }
    }

    // alert(person.age);
    // alert(person.name);
    // person.eat();


</script>

3、BOM

window对象(浏览器窗口对象,具体方法可以去查)

几个重要方法:window.alert()、window.confirm()、setTimeout()、setInterval();

分别可以警告(带确认)、选择(确认、取消)、设定一段时间后动作、设定周期性间歇动作。

history:获取历史记录 location:地址栏对象(href:返回完整的URL)

4、DOM

可以通过DOM来改变静态的标签内容,检索元素并获取可以通过id、name、tagName等多种途径:

<img id="light" src="../img/off.gif"> <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"> 游戏
<br>

<script>
    var img = document.getElementById("light");
    // img.src="../img/on.gif"
    // alert(img);

    var divs = document.getElementsByTagName("div");
    // alert(divs.length);
    // for (let i = 0; i < divs.length; i++) {
        // alert(divs[i]);
        // divs[i].style.color = "red";
        // divs[i].innerText = "hello!"
    // }

    var hobbies = document.getElementsByName("hobby");
    for (let i = 0; i < hobbies.length; i++) {
        // alert(hobbies[i]);
        hobbies[i].checked = true;
    }

    var clss = document.getElementsByClassName("cls");
    // for (let i = 0; i < clss.length; i++) {
    //     alert(clss[i]);
    // }

</script>

DOM元素属性可以用来进行事件绑定,优化html的事件绑定方式:

<input type="button" value="点我" onclick="on()"> <br>
<input type="button" value="再点我" id="btn"> <br>

<form id="register" action="#">
    <input type="text" name="username" />

    <input type="submit" value="提交">
</form>

<script>
    function on() {
        alert("我被点了");
    }	//html事件处理

    document.getElementById("btn").onclick = function () {
        alert("我又被点了");
    }	//用DOM来批量处理

    document.getElementById("register").onsubmit = function () {
        return true;
    }
</script>

据此可以开展表单验证等一系列基础内容部署。

posted @ 2022-07-17 10:55  2037hanzhe  阅读(9)  评论(0编辑  收藏  举报