[开发工具] 2021-08-29

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 开发工具 -> 2021-08-29 -> 正文阅读

[开发工具]2021-08-29

1.HTML语言

1.1简介

HTML :超文本标记语言(HTML HyperText Markup Language )。其它的就不过多介绍了.（但是呢，在浏览器上运行时是需要将所有的资源都渲染完后才执行的哦）

1.2 常用的主流浏览器

谷歌浏览器(chrome)
火狐浏览器(firefox)
欧鹏浏览器(opera)

1.3 前端的常用开发工具

VSCode 、 Sublime 、 Dreamweaver、 WebStorm、 HBuilder

这里给出VSCode的下载链接，https://vscode.en.softonic.com/

2 HTML语法

接下来就直接进行代码的用法展示，小伙伴可以在自己的电脑上运行看看效果：

2.1文档基本结构

HTML5标准模板：
<!doctype html>
<html>
     <head>
          <meta charset="utf-8" />
          <title></title>
     </head>
     <body>
         <!-- 这里是html注释 -->
         hello world!
     </body>
</html>

HTML语言不区分大小写。
meta标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

2.2 head部分的HTML标签

（在2.1也可以看到，这里就不再赘述）

2.3 body部分的HTML标签

2.3.1 常用HTML标签

标题标签（块级标签：独占一行）
段落标签（块级标签：独占一行）
换行标签（单标签）
图片标签（内联标签：不独占一行）（单标签）

<!--
图片标签属性：
src：图片地址
alt：图片的替代文字
title：鼠标悬停提示文字
-->
<img src="img/qiu.jpg" alt="秋天的景色" title="秋天的景色">

超链接标签（内联标签：不独占一行：a标签中可以放置任何可视标签，比如：img、h1、p等。
使用超链接标签实现锚记

<!-- 
什么是锚记：
当一个页面的内容过长时，浏览起来就会非常的费劲，需要不停的来回拖动。
解决方案是：可以在页面上的某个内容处设置锚记，然后使用超链接快速跳转到此处。
所以说：锚记类似于书签的功能。
-->
<a href="#shuqian">书签</a>
<p>页面内容1</p>
<p>页面内容2</p>
<p>页面内容3</p>
<p>页面内容4</p>
<p>页面内容5</p>
<p>页面内容6</p>
<p id="shuqian">页面内容7</p>
<p>页面内容8</p>

2.3.2绝对路径与相对路径

文档路径有两种：
绝对路径：以最原始位置为基准。
如果访问本机资源，以盘符开始：D:/javaspace/JDBCTest/src/test/index.jpg
如果访问非本机资源，以网络协议开始：http://hao.360.cn/admin/admin.html
相对路径：以当前位置为基准（例如：当前位置是test），而且不能以 / 开始。

admin/login/index.jpg 或者  ./admin/login/index.jpg（./代表当前目录     ../代表上一级目录

2.3.3.列表标签

1.无序列表
2.有序列表
3.自定义列表

<!--
    dl：声明定义列表
    dt：声明列表项
    dd：定义列表项内容
-->
<dl>
    <dt>HTML</dt>
    <dd>制作网页的标准语言，控制网页的结构</dd>
    <dt>CSS</dt>
    <dd>层叠样式表，控制网页的样式</dd>
    <dt>JavaScript</dt>
    <dd>脚本语言，控制网页的行为</dd>
</dl>

2.3.4.表格标签

表格标签多用于显示表数据。基本结构如下：

<!--
    表格标签：
    table：整个表格的最外层标签
    tr：行标签
    th：表格标题标签
    td：列标签，一个td，就是一个单元格
    表格标签属性：
    border：边框宽度
-->
<table border="1">
    <tr>
        <th>第一列</th>
        <th>第二列</th>
    </tr>
    <tr>
        <td>这是第一行第一列</td>
        <td>这是第一行第二列</td>
    </tr>
    <tr>
        <td>这是第二行第一列</td>
        <td>这是第二行第二列</td>
    </tr>
</table>

表格合并：表格合并中两个重要属性：
colspan：合并列
rowspan：合并行

<table border="1">
    <tr>
        <td colspan="2">这是第一行第一列</td>
        <td>这是第一行第三列</td>
    </tr>
    <tr>
        <td rowspan="2">这是第二行第一列</td>
        <td>这是第二行第二列</td>
        <td>这是第二行第三列</td>
    </tr>
    <tr>
        <td>这是第三行第二列</td>
        <td>这是第三行第三列</td>
    </tr>
</table>

2.3.5.2.form标签

<!-- 
    form是表单最外层标签。
    action属性：提交服务器地址
    method属性：提交方式：get、post
-->
<form action="XXXX" method="get">
    … … …
</form>

2.3.5.3.其它标签

文本框

<!-- placeholder属性为HTML5新增属性：提供可描述输入字段预期值的提示信息 -->
<input type="text" placeholder="用户名" value="zhangsan" />

密码框

<input type="password"/>

单选按钮

<input type="radio" name="sex" value="0" checked="true"/>男
<input type="radio" name="sex" value="1"/>女

复选框

<input type="checkbox" name="like" value="0" checked=" true" />读书
<input type="checkbox" name="like" value="1" />体育
<input type="checkbox" name="like" value="2" />游戏

下拉列表

<select name="nationality">
    <option value="0" selected="true">中国</option>
    <option value="1">美国</option>
    <option value="2">英国</option>
</select>

文件域

<input type="file" name="files" />

文本域

<textarea name="brief" rows="5" cols="30">--这里输入个人简介--</textarea>

提交按钮

<!-- 将表单全部内容，提交给action属性指定的服务器。一个表单都应该有一个提交按钮。-->
<input type="submit" value="提交" />

重置按钮

<input type="reset" value="重置" />

普通按钮

<input type="button" value="点击我">
<button>点击我</button>

2.3.5.4.表单中的一些属性

<!--
    readonly： 不可编辑,但可以选择和复制;值可以传递到后台 
    disabled： 不能编辑,不能复制,不能选择;值不可以传递到后台
    checked： 设置单选按钮和复选按钮的默认选中项
    selected： 设置下拉列表option的默认选中项
    注意：以上都属于布尔类型的属性，布尔类型属性都有以下三种写法：
         checked="true"
         checked="checked"
         checked
         这三种写法的效果都是一样的。
-->
<input type="text" name="username" readonly/>
<input type="text" name="username" disabled/>

2.3.6.容器标签div与span

div标签：块级标签，可以在某块区域中指定出一块区域内容。其本身没有任何视觉上的效果。

<div>
    <h1>html语言</h1>
    <p>html语言是超文本标记语言</p>
</div>

span标签：内联标签，可以在一行中指定出一段内容。其本身没有任何视觉上的效果。

<p>今天气温<span>40</span>度</p>

开发工具最新文章

Postman接口测试之Mock快速入门

ASCII码空格替换查表_最全ASCII码对照表0-2

如何使用 ssh 建立 socks 代理

Typora配合PicGo阿里云图床配置

SoapUI、Jmeter、Postman三种接口测试工具的

github用相对路径显示图片_GitHub 中 readm

Windows编译g2o及其g2o viewer

解决jupyter notebook无法连接/ jupyter连接

Git恢复到之前版本

VScode常用快捷键

加:2021-08-30 12:25:04 更:2021-08-30 12:25:26

360图书馆购物三丰科技阅读网日历万年历 2024年12日历

-2024/12/23 0:47:45-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码

数据统计