html、css、JavaScript基础-优快云博客

html、css、JavaScript基础

基于以下知识，就可以做一些简单的页面设计博客登录页面
博客主页
博客详情页

两大部分

分为head和body两个部分
head部分可以存放属性和标题内容等

<head>
    <meta charset="UTF8">
</head>

body部分

<body>
    <!-- contents -->
</body>

标题

标题从大到小一共有六级，h1, h2, h3, h4, h5, h6；

<body>
    <h1>这是一号标题</h1>
    <h2>这是二号标题</h2>
    <!-- ... -->
    <h6>这是六号标题</h6>
</body>

段落标签和换行标签

段落标签和换行标签也有区别，那就是段落标签会比换行标签多跳一行。我们的回车是达不成这种效果的，因为"\n"在浏览器中会被解析为两个空格;

<p>这是一段段落标签，这段文字将会被单独显示为一段</p>

<p>这也是一段文本，<br>但他需要换行</p>

文本处理操作

主要有四种：加粗、倾斜、删除线、下划线

这是一段需要<strong>加粗</strong>的文本<br>
这是一段需要<em>倾斜</em>的文本<br>
这是一段需要<del>删除线</del>的文本<br>
这是一段需要<ins>下划线</ins>的文本<br>

图片

可设置的属性主要有：本地图片或者网络图片路径、加载失败时提示字段、标题（在鼠标hover时可以显示）、宽、高、border

<img src="https://img0.baidu.com/it/u=2057796417,1345279970&fm=253&app=138&f=JPEG?w=800&h=999" alt="图片加载失败" title="古贤者" width="500px" height="500px" border="5px">

超链接

通过a标签进行设置，可以制定在当前标签页跳转还是在新建标签页跳转

<a href="https://www.baidu.com"><br>点击以跳转到百度</a>

<!--也可以设置图片跳转-->
<a href="https://www.baidu.com>">
    <img src="path to image">
</a>

<!--通过#来进行当前页面顶部的跳转-->
<a href="#"><br>回到顶部</a>

<!--设置target属性-->
<a href="https://www.baidu.com>" target="_blank"></a>

表格

整体上分为表头和表格两个部分，合并单元格可以使用rowspan，colospan，同时align设置的是整个表格基于页面的位置而不是每一项的文字的位置

<table border="2px" width="500px" height="500px" cellspacing="0" cellpadding="50" align=center>
    <thead>
        <th>姓名</th>
        <th>学号</th>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>29202</td>
        </tr>
        <tr>
            <td rowspan="2">李四19280</td>
        </td>
    </tbody>
</table>

列表

总共有三种：有序列表、无序列表和自定义列表

<!--有序列表-->
<ol type=a>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ol>
<ol type=A>
    <li>one</li>
    <li>two</li>
</ol>
<ol type=i>
    <li>one</li>
    <li>two</li>
</ol>
<ol type=I start=3>
    <li>one</li>
    <li>two</li>
</ol>

<!--无序列表-->
<ul type=disk>
    <li>one</li>
    <li>two</li>
</ul>
<ul type=circle>
    <li>one</li>
    <li>two</li>
</ul>
<ul type=square>
    <li>one</li>
    <li>two</li>
</ul>

<!--自定义列表-->
<dl>
    <dt>
        <dd>这是自定义列表内容1</dd>
        <dd>这是自定义列表内容2</dd>
    </dt>
</dl>

表单

表单通常用来和服务器进行交互，通常由两部分组成：表单域和表单控件（输入框、按钮等）
主要的表单控件有：单行输入框、单选框、复选框、提交重制文件选择等按钮

<form>
    <!--单行输入框-->
    <input type="text"><br>
    <input type="password"><br>
    <!--单选框-->
    <label for="male">male
    <input type="radio" name="sex" id="male" checked>
    <label for="female">female
    <input type="radio" name="sex" id="female"><br>
    <!--复选框-->
    爱好
    <input type="checkbox">吃饭
    <input type="checkbox">睡觉
    <input type="checkbox">打游戏<br>
    <!--提交、重制、文件选择按钮-->
    <input type="submit" value="提交">
    <input type="reset">
    <input type="file">
</form>

无语义标签

<div></div>

特殊符号

主要是空格、大于号、小于号和取地址符

&nbsp;&lt;&gt;&amp;

css

其实和qss书写方法几乎一模一样，因为qss就是借鉴的css，但是仍有一些不一样的地方。
首先是使用方式

<!--类选择器-->
<style>
    .name{
        color:blue;
    }
</style>
<label class="name">张三</label>
<!--id选择器-->
<style>
    #gender{
        text-decoration:underline;
    }
</style>
<label id="gender">男</label>
<!--通配符选择器-->
<style>
    *{
        font-size:20px;
    }
</style>

当然，其实还有一种常用的方式，就是外部样式表

<link rel="stylesheet" href="path/to/css/file">

内部的各种属性，基本上和qt的qss一样
除了以上几种，还有一个伪类选择器

<style>
    .refresh:hover{
        background-color:black;
    }
</style>
<input type="button" class="refresh">

也可以采取行内样式表，但是这种方法会让语句先的很杂乱

<label style="color:pink;">这是一行文本</label>

后代选择器

指定目标类和其父类，以避免所有子类同时设置相同样式

<style>
    ol li{
        color:red;
    }
</style>
<ol>
    <li>first</li>
    <li>second</li>
</ol>

JavaScript Web API

Dom概念

DOM，全称是document object model，文档对象模型
Document，一个html页面就是一个文档；element，元素，就是我们的html标签；
网页中的所有内容都是节点，用node表示

获取元素

类似于css中选择器的作用，一般用的有querySelect和querySelectAll，
内部传入css选择器进行选择

操作元素

获取或修改元素内容

主要使用的是innerHTML，从中可以获取页面的html结构，也可以对结构进行修改。

<input type="radio" class="all" onclick="selectAll()">全选
<input type="radio" class="select">吃饭
<input type="radio" class="select">睡觉
<input type="radio" class="select">打游戏
<script>
    let all = document.querySelector(".all");
    let select = document.querySelectorAll(".select");
    function selectAll(){
        for(i = 0; i < select.length; i++){
            select[i].checked = all.checked;
        }
    }
    for(i = 0; i < select.length; i++){
        select[i].onclick = function(){
            all.checked = isAllSelected(select);
        }
    }
    function isAllSelected(select){
        for(i = 0; i < select.length; i++){
            if(!select[i].checked){
                return false;
            }
        }
        return true;
    }
</script>

节点的增删操作

创建节点采用的方法是document.createElement，创建完了之后，还需要将他添加进DOM树中，即指定父节点添加；添加有两种方式，一种是appendChild，会在父节点的所有子节点后面插入，另一种是insertBefore，会在指定节点的前一个节点插入；而删除节点操作则是removeChild，不过这个函数还会返回被删除的对象——所谓删除节点只是将其从dom树上拿下来，他在内存中仍然存在，可以随时再进行添加。

<div id='parent'>
    <div class='begin'>这是一个div</div>
    <div>这是一个div</div>
    <div>这是一个div</div>
    <div>这是一个div</div>
</div>
<script>
    let element = document.createElement('h1');
    let div = document.querySelector("#parent");
    element.innerHTML = '这是一个新的element';
    div.appendChild(element);
    let new_node = document.createElement('h2');
    new_node.innerHTML = "这是一个新的node";
    div.insertBefore(new_node, document.querySelector(".begin));
</script>