zoukankan html css js c++ java

HTML笔记

1、Web标准构成

Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。

主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

结构标准：结构用于对网页元素进行整理和分类，咱们主要学的是HTML（全称：超文本标记语言）。最重要
表现标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS（全称：层叠式样式表）。
行为标准：行为是指网页模型的定义及交互的编写，咱们主要学的是 JavaScript。

2、HTML 简述

HTML 是超文本标记语言，主要用于做静态网页的，可以在网页上显示文字、图像、视频、声音。

HTML 运行原理

本地运行：直接用浏览器打开。
远程访问（http协议）：
- 1、在浏览器中输入网址、或点击网址链接。
- 2、浏览器根据网址向对应的服务器发送请求。
- 3、服务器根据请求响应文件，将页面传输给客户端，在浏览器中进行网页的渲染。

HTML 骨架

【示例 2-1】HTML骨架

<!DOCTYPE html><!-- 第一行约束,声明 -->
<html lang="en"><!-- html标签中的属性:lang="zh_CN"表示中文-->
<head><!-- head标签:表示头部信息,一般包含三部分内容,title标题,css样式,js脚本 -->
    <meta charset="UTF-8"><!-- 表示当前页面使用UTF-8字符集-->
    <title>offer</title><!-- title标签:表示标题 -->
</head>
<body><!-- body标签:表示整个html页面显示的主题内容 -->
   你的offer已收到
</body>
</html>

执行结果如下：

3、HTML标签介绍

标签格式：<标签名>封装的数据</标签名>
标签名大小写不敏感。
标签拥有自己的属性：
- 分为基本属性：如 bgcolor="red"等。
- 事件属性：如 onclick="alert(‘你好’);"
标签又分为单标签和双标签：
- 单标签格式：<标签名/> ，如水平线:<hr/> 、换行:<br/>
- 双标签格式：<标签名>封装的数据</标签名>，如段落:<p>...</p>

【示例 3-1】标签的使用

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>标签的使用</title>
</head>
<!--
    bgcolor是背景颜色的属性,属性值用引号""
    onclick表示点击事件

    alert() 是js语言提供的一个警告框的函数
    他可以接收任意参数,参数就是警告框的函数信息
-->
<body bgcolor="green"> 
    <button onclick="alert('O(⌒∪⌒)O')">hello</button>
    <hr color="red"/>
    <img src="../images/yao.png" alt="王者荣耀-瑶" width="300px" height="200px"/> 
</body>
</html>

执行结果如下：

注意事项：

双标签要成对使用。
标签不能交叉嵌套。
属性必须有值，属性值用引号""。
注释不能嵌套。

4、HTML常用的标签

font 字体标签

【示例 4-1】font标签的使用

需求：在网页上显示我是字体标签，并修改字体为宋体，颜色为红色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font 标签的使用</title>
</head>
<body>
    <!--
        font标签是字体标签,他可以用来修改文本的字体、颜色、大小(尺寸)
        color属性修改颜色
        face属性修改字体
        size属性修改文本大小
    -->
    <font color="red" face="宋体" size="7">我是字体标签</font>
</body>
</html>

执行结果如下：

特殊字符

【示例 4-2】特殊字符的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>特殊字符</title>
</head>
<body>
    <!-- 
        左尖括号 "<" 用字符 &lt; 表示

        右尖括号 ">" 用字符 &gt; 表示
    -->
    我是&lt;br&gt;<br/>
    <!-- 空格用字符 &nbsp; 表示-->
    龙哥好&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;帅啊! 
</body>
</html>

执行结果如下：

标题标签

【示例 4-3】演示h1-h6的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题标签的使用</title>
</head>
<body>
    <!--
        h1 - h6 都是标题标签
        h1最大  h6最小
            align属性是对齐属性,属性值有:
                left 左对齐(默认)
                center 居中对齐
                right  右对齐
    -->
    <h1 align="center">一级标题</h1>
    <h2 align="right">二级标题</h2>
    <h3 align="left">三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>
</html>

执行结果如下：

超链接

在网页中所有点击之后可以跳转的内容都是超链接。

【示例 4-4】超链接的使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
    <!-- a标签是 超链接
            href属性设置连接的地址
            taget属性设置哪个目标进行跳转,属性值有:
                _self  表示当前页面跳转
                _blank 表示打开新页面来进行跳转
     -->
    <a href="http://www.baidu.com">百度</a><br/>
    <a href="http://www.baidu.com" target="_self">百度_self</a><br/>
    <a href="http://www.baidu.com" target="_blank">百度_blank</a>
</body>
</html>

执行结果如下：

【示例 4-5】锚点链接的使用

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>锚点链接的使用</title>
</head>
<body>
    <font color="red" face="宋体" size="7" id="top">恭喜你收到一个offer!</font><br />
    <a href="#down">回到底部</a><br>
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    巴拉巴拉 <br />
    <a name="down"></a>
</body>
</html>

执行结果如下：

图片超链接：

<a href="" target=""><img src="" alt=""></img></a>

列表标签

列表标签有无序列表(Unordered List)和有序列表(Ordered List)、定义列表。

【示例 4-6】无序列表的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无序列表的使用</title>
</head>
<body>
    <!--需求:使用无序列表把东北F4展示出来-->
    <!--
        ul 是无序列表
            type属性可以修改列表项前面的符号,属性值有：
                none 不显示
                square 方块
                circle 空心圆

        li 是列表项
    -->
    <ul>
        <li>赵四</li>
        <li>刘能</li>
        <li>小沈阳</li>
        <li>宋小宝</li>
    </ul>
    <ul type="none">
        <li>赵四</li>
        <li>刘能</li>
        <li>小沈阳</li>
        <li>宋小宝</li>
    </ul>
    <ul type="square">
        <li>赵四</li>
        <li>刘能</li>
        <li>小沈阳</li>
        <li>宋小宝</li>
    </ul>
    <ul type="circle">
        <li>赵四</li>
        <li>刘能</li>
        <li>小沈阳</li>
        <li>宋小宝</li>
    </ul>
</body>
</html>

执行结果如下：

img 标签

img标签可以在html页面上显示图片。

【示例 4-7】使用img标签插入照片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img标签的使用</title>
</head>
<body>
    <!--
        img标签 在html页面上显示图片
            src属性可以设置图片路径(相对路径/绝对路径)
            width属性设置图片宽度大小
            height属性设置图片高度大小
            alt属性设置图片描述信息
    -->
    <img src="../image1s/0.jpg" width="300" height="200"  alt="宇宙">
    <img src="../images/yao.png" width="300" height="200"  alt="瑶">
</body>
</html>

执行结果如下：

表格标签

【示例 4-8】表格的使用

需求1：做一个代表头的，四行四列的表格，并显示边框。

需求2：修改表格的宽度、高度，表格的对齐方式，表格间距。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>表格标签的使用</title>
</head>
<body>
    <!-- 
        table标签是表格标签
            boder属性设置边框
            width属性设置表格宽度
            height属性设置表格高度
            align属性设置表格相对于页面的对齐方式
            cellspacing属性设置单元边距
        tr 是行标签
            align属性设置文本对齐方式
        th 表头标签
        td 是单元格标签
    -->
    <table border="1" width="500" height="300" align="right" cellspacing="0">
        <tr>
            <th><b>ID</b></th>
            <th><b>姓名</b></th>
            <th><b>年龄</b></th>
            <th><b>职位</b></th>
        </tr>
        <tr align="center">
            <td>01</td>
            <td>张三</td>
            <td>18</td>
            <td>架构师</td>
        </tr>
        <tr align="center">
            <td>02</td>
            <td>李四</td>
            <td>18</td>
            <td>运维主管</td>
        </tr>
        <tr align="center">
            <td>03</td>
            <td>王五</td>
            <td>18</td>
            <td>算法工程师</td>
        </tr>
    </table>
</body>
</html>

执行结果如下：

【示例 4-9】跨行跨列表格

需求：新建一个五行五列的表格，第一行第一列的单元格要跨两列，第二行第一列的单元格跨两行，第四行第四列的单元格跨两行两列。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>表格的跨行跨列</title>
</head>
<body>
    <!--
        colspan属性设置跨列
        rowspan属性设置跨行
    -->
    <table width="500" height="300" cellspacing="0" border="1">
        <tr>
            <td colspan="2" bgcolor="red">1.1</td>
            <td>1.3</td>
            <td>1.4</td>
            <td>1.5</td>
        </tr>
        <tr>
            <td rowspan="2" bgcolor="yellow">2.1</td>
            <td>2.2</td>
            <td>2.3</td>
            <td>2.4</td>
            <td>2.5</td>
        </tr>
        <tr>
            <td>3.2</td>
            <td>3.3</td>
            <td>3.4</td>
            <td>3.5</td>
        </tr>
        <tr>
            <td>4.1</td>
            <td>4.2</td>
            <td>4.3</td>
            <td rowspan="2" colspan="2"bgcolor="blue">4.4</td>
        </tr>
        <tr>
            <td>5.1</td>
            <td>5.2</td>
            <td>5.3</td>
        </tr>
    </table>
</body>
</html>

执行结果如下：

视频标签和音频标签

video标签专门用来播放网络上的视频或电影，audio标签则专门用来播放网络上的音频数据。使用这两个标签，就不再需要使用其他的任何插件了，只要使用支持 HTML5 的浏览器就可以了。

【示例 4-10】video标签和audio标签的使用

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>视频标签的使用</title>
</head>
<body>
    <!--
        video标签用于HTML5视频播放
            src属性可以设置视频路径
            controls属性设置控制条
            autoplay属性设置自动播放
    -->
    <video src="../images/为爱痴狂.mp4" controls="true" autoplay="true" width="300" height="500"></video>
    <br/>
    <!--
        audio标签用于HTML5音频播放
            src属性可以设置音频路径
            controls属性设置控制条
            autoplay属性设置自动播放
    -->
    <audio src="../images/等你下课-周杰伦.mp3" controls="true" autoplay="true"></audio>
</body>
</html>

执行结果如下：

iframe内联标签

iframe标签它可以在一个html页面上打开一个小窗口去加载一个单独的页面。

【示例 4-11】iframe标签的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe标签</title>
</head>
<body>
    我是一个单独完整的页面 <br/>
    <!--
        iframe标签可以在当前页面上嵌套另一个页面
            iframe和a标签组合使用步骤如下：
                1、在iframe标签中使用name属性定义一个名称
                2、在a标签的target属性上引用iframe的name属性

    -->
    <iframe src="12-video和audio标签.html" width="600" height="400" name="abc"></iframe>
    <br/><br/>
    <ul>
        <li><a href="./01-HTML骨架.html" target="abc">01-HTML骨架.html</a></li>
        <li><a href="./02-HTML标签介绍.html" target="abc">02-HTML标签介绍.html</a></li>
        <li><a href="./03-font字体标签.html" target="abc">03-font字体标签.html</a></li>
    </ul>
</body>
</html>

执行结果如下：

表单标签

【示例 4-12】表单的展示

<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>

<body>
    <!--
        form标签就是表单  
            method属性规定如何发送表单数据 （get/post）
            action属性表示向何处发送表单数据 

            input type=text 是文本输入框 value属性设置默认显示内容
            input type=password 是密码输入框
            input type=radio 是单选框 name属性可以对其进行分组 checked="checked"表示默认选中
            input type=checkbox 是复选框
            input type=reset 是重置按钮 value属性修改按钮上的文本
            input type=submit 是提交按钮 value属性修改按钮上的文本
            input type=button 是按钮 value属性修改按钮上的文本
            input type=file 是文件上传域
            input type=hidden 是隐藏域 当我们要发送某些信息，不需要让用户参与，就可以使用隐藏域（提交的时候同时发给服务器）
            

            select标签 是下拉列表框
            option标签 是下拉列表框中的选项 selected="selected"设置默认选中
           
            textarea标签 表示多行文本输入框  (起始标签和结束标签中的内容是默认值)
                rows属性设置可以显示几行的高度
                cols属性设置每行可以显示几个字符宽度
        -->
    <form>
        用户名称: <input type="text" value="默认值" /><br />
        用户密码: <input type="password" value="abc" /><br />
        确认密码: <input type="password" value="abc" /><br />

        性别:
        <input type="radio" name="sex" checked="checked" />男
        <input type="radio" name="sex" />女<br />

        兴趣爱好:
        <input type="checkbox" checked="checked" />Java
        <input type="checkbox" />C++
        <input type="checkbox" />JavaScript<br />

        国籍:
        <select>
            <option>--请选择国籍--</option>
            <option selected="selected">中国</option>
            <option>美国</option>
            <option>小日本</option>
        </select><br />

        自我评价: <textarea rows="10" cols="20">我才是默认值</textarea><br />
        <input type="reset"/> 
        <input type="submit"/> 
        <input type="button" value="用账号登录"/> <br/><br/>

        <input type="file"/><br/>
        <input type="hidden" name="abc" value="隐藏域"/><br/>

    </form>
</body>
</html>

执行结果如下：

示例 4-13】表单格式化

<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="UTF-8">
    <title>表单格式化</title>
</head>

<body>
    <!--
        form标签就是表单  
            method属性规定如何发送表单数据 （get/post）
            action属性表示向何处发送表单数据 

            input type=text 是文本输入框 value属性设置默认显示内容
            input type=password 是密码输入框
            input type=radio 是单选框 name属性可以对其进行分组 checked="checked"表示默认选中
            input type=checkbox 是复选框
            input type=reset 是重置按钮 value属性修改按钮上的文本
            input type=submit 是提交按钮 value属性修改按钮上的文本
            input type=button 是按钮 value属性修改按钮上的文本
            input type=file 是文件上传域
            input type=hidden 是隐藏域 当我们要发送某些信息，不需要让用户参与，就可以使用隐藏域（提交的时候同时发给服务器）
            

            select标签 是下拉列表框
            option标签 是下拉列表框中的选项 selected="selected"设置默认选中
           
            textarea标签 表示多行文本输入框  (起始标签和结束标签中的内容是默认值)
                rows属性设置可以显示几行的高度
                cols属性设置每行可以显示几个字符宽度
        -->
    <form>
        <h1 align="center">用户注册</h1>
        <table align="center">
            <tr>
                <td>用户名称: </td>
                <td>
                    <input type="text" value="默认值" />
                </td>
            </tr>
            <tr>
                <td> 用户密码:</td>
                <td>
                    <input type="password" value="abc" />
                </td>
            </tr>
            <tr>
                <td>确认密码:</td>
                <td>

                    <input type="password" value="abc" />
                </td>
            </tr>
            <tr>
                <td>性别:</td>
                <td><input type="radio" name="sex" checked="checked" />男
                    <input type="radio" name="sex" />女
                </td>
            </tr>
            <tr>
                <td>兴趣爱好:</td>
                <td>
                    <input type="checkbox" checked="checked" />Java
                    <input type="checkbox" />C++
                    <input type="checkbox" />JavaScript
                </td>
            </tr>
            <tr>
                <td>国籍:</td>
                <td>
                    <select>
                        <option>--请选择国籍--</option>
                        <option selected="selected">中国</option>
                        <option>美国</option>
                        <option>小日本</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>自我评价:</td>
                <td>
                    <textarea rows="10" cols="20">我才是默认值</textarea>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="reset" />
                </td>
                <td align="center">
                    <input type="submit" />
                </td>
            </tr>
        </table>
    </form>
</body>

</html>

执行结果如下：

其他标签

块级元素：无论内容多少，该元素独占一行。如 p标签、标题标签等；
行内元素：内容撑开宽度，左右都是行内元素的可以在一排。如超链接、em标签、strong标签等。

【示例 4-14】div、span、p标签的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>其他标签</title>
</head>
<body>
    <!--
        div标签    默认独占一行
        span标签   它的长度是封装数据的长度
        p段落标签   默认会在段落的上方或下方各空出一行来 (如果已有就不在空咯)
    -->
    <div>div标签1</div>
    <div>div标签2</div>
    <span>span标签1</span>
    <span>span标签2</span>
    <p>p段落标签1</p>
    <p>p段落标签2</p>
</body>
</html>

执行结果如下：

查看全文

相关阅读:
树链剖分
 后缀自动机
 莫队算法。
线性递推BM模板
 笛卡尔积
 2019牛客暑期多校训练营（第三场） J LRU management 模拟链表操作
 线性基
 bitset 位运算
 Lindström–Gessel–Viennot lemma定理行列式板子
 三角形

原文地址：https://www.cnblogs.com/m987/p/15105185.html