HTML技术(基础/列表/表格/表单)

最新推荐文章于 2023-03-08 23:57:32 发布

guanerkoushi

最新推荐文章于 2023-03-08 23:57:32 发布

阅读量856

点赞数 1

分类专栏： Web开发文章标签： html

本文链接：https://blog.csdn.net/Xiaolei233/article/details/116357257

版权

前言

ubuntu下写HTML文本使用工具VS Code,win可使用H Builder

快速生成标准的html代码：
（1）在第一行输入！
（2）按Tab键或者选择代码提示中的！

快捷键(可自己更改)：

ctrl + k,然后按ctrl + c 快速生成注释 < !--  -->
shift+end 从头选中一行
shift+home 从尾部选中一行
快速复制 我设成了ctrl+alt+d 
ctrl+]  行缩进
ctrl+[  减少行缩进
ctrl+shift+L 实现同时编辑多处相同文字 
alt+shift+左键点击 实现同时编辑点击处文字 
ctrl + D 选中相同的
shift + 方向键
ctrl + 方向键  按边界挪
ctrl + shift + 方向键  按边界挪再选中
Alt+↑  向上移动一行
Alt+↓  向下移动一行

Visual Studio Code默认是在VScode的控制台下查看html页面，这对于我们调试和查看效果十分不方便。所以这里可安装一下扩展插件open in browser，在浏览器中查看html页面。安装完成后，选择你要在浏览器打开的HTML页面，按快捷键Alt + B 就可以在默认浏览器下打开你写的页面了。使用快捷键 Shift + Alt + B 可以选择其他浏览器打开。

web前端的三大核心技术：
HTML：结构
CSS：样式
JavaScript：行为

一、HTML介绍

HTML(Hyper Text Markup Language超文本标识语言)

 - 是一种用来制作超文本文档的简单标记语言(不是开发语言)，是web开发的基本技术，对应的产出物-网页，页面

 - 用HTML编写的超文本文件成为HTML文件，也称Web文件

1.1 发展

HTML5是一个新的网络标准，仍处于发展阶段,它希望能够减少对外部插件的需求依赖(比如Flash),并且提供更过能有效增强网络应用的API。

1.2 HTML文件的基本结构

基本结构如下：

<HTML>
<HEAD>
<TITLE>我的第一个网页</TITLE>
</HEAD>

<BODY>
	Hello World!
</BODY>
</HTML>

在这里插入图片描述
注：基本结构为静态网页，变成动态需借助js

假如是用一个文本文档来编写的html结构，只需要把这个文档的后缀名字改成.html或者.htm就可以。
在这里插入图片描述

1.3 HTML标签和HTML元素概念

1.3.1 HTML标签

- HTML标记标签通常被称为HTML标签(HTML tag)
- 是由尖括号包围的关键词，比如< html>
- 通常成对出现，比如< b>< /b>
- 标签对中的第一个标签是开始标签(开放标签)，第二个是结束标签(闭合标签)

一个页面大部分都是由一对一的标签或者一个个的标签组合而成的。
创建标签的快捷键：单词 + tab键 -> <单词>

1.3.2 HTML元素

- HTML元素是指从开始标签到结束标签之间所有的代码
- HTML文档由嵌套的HTML元素组成
- 空的HTML元素：没有内容/元素; 单个出现的标签，在开始使用的时候就已经结束了。
例：< br>换行

HTML元素属性

HTML元素属性：指的是给标签添加一些新的属性,修饰标签。

格式：<开始标签 属性名='"属性值"><结束标签>

- 属性放在开始标签中
	bgcolor 背景色
	background 背景图片

使用Visual Studio Code 来编写HTML代码见这里

在这里插入图片描述

- 图上的 < meta charset="UTF-8" >  编码格式设置标签
测试过程会出现问题：当你去打开一个页面，页面显示的有乱码

- 颜色表示法：1.颜色对应的英语单词  2.RGB颜色表示法(#号后面写6位字符和数字，或者#后面写3位字符或者数字，例：#ff00ff #ffffff)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面属性</title>
</head>
<body bgcolor="#808a87">
    我是灰色背景页面
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图</title>
</head>
<body background="img/1.jpg">
    
</body>
</html>

1.4 HTML标签介绍

1.4.1 基本标签

标题标签: < h1>到< h6 > 数字越大，字体越小，自动换行和加粗
段落标签: align属性：改变出现位置
水平线: < hr>
换行:
超链接标签:< a href=“指定要跳转到的页面”>< /a> href属性：链接的地址 target属性：可以改变链接打开的方式，默认情况下：在当前页面打开 _self 新窗口打开 _blank 若想文本文件中所有的超链接都可以在新的窗口打开，可在head中使用base标签
base标签 单标签，作用就是改变链接的默认行为 <base target="_blank">
注释 < !--This is a comment-->
嵌入元素(声频、视频):< embed src="文件名">
文本修饰标签:
字体、字号标签font color可设置字体颜色
< big>定义大号字
定义小号字
粗体bold
斜体italic
强调(加粗
强调(斜体
下标
上标
< del>< /del>文字当中划线表示删除 (一般del和ins标签配合使用)
< ins>< /ins>文字下划线表示插入
图片标签：
< img>:图片 ->单标签 src：引入图片的地址。 alt：当图片出现问题时，可以显示一段友好的提示文字 title：提示信息; width、height:图片的大小
锚点跳转：第一种格式：#号加id地址第二种:#号加name属性,注意name属性是加给a标签的相比后者比较麻烦

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题标签</title>
</head>
<body>
    <h1 align="right">我是h1标签</h1>
    <h2>我是h2标签</h2>
    <h3>我是h3标签</h3>
    <h4>我是h4标签</h4>
    <h5>我是h5标签</h5>
    <h6>我是h6标签</h6>
    <hr>
    <a href="属性.html">点击我能够跳转</a>
    <a href="http://www.baidu.com" target="_blank">跳转百度</a>
    <a href="https://www.bilibili.com">
        <img src="./img/1.jpg" alt="" width="300" height="300">
    </a>

    <p>
        我是段落一的第一句话。我是段落一的第二句话。我是段落一的第三句话。
    </p>

    <p align="center">
        我是段落二的第一句话。我是段落二的第二句话。我是段落二的第三句话。
    </p>
    
    <p>
        
        <strong>强调加粗</strong>
        <em>斜体强调</em>
        a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup> H<sub>2</sub>O
    </p>

    <p>
        促销：原价<del>300</del>,现价<ins>150</ins>!!!
    </p>

    <hr>
    <!-- <img src="http://slide.collection.sina.com.cn/images/v1/collection/arrowHover.png" alt="链接出错啦" title="这是一张图片的提示信息" width="300" height="300"> -->
    <img src="./img/1.jpg" alt="链接出错啦" title="这是一张图片的提示信息" width="300" height="300">
    
</body>
</html>

在这里插入图片描述
HTML5 标签含义之元素周期表

在这里插入图片描述
注：在一个网页中，h1标题最重要，并且一个html文件中只能存在一个h1标签;h5、h6标签不经常用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>锚点跳转</title>
</head>
<body>
    <a href="#html">HTML</a>
    <a href="#css">CSS</a>
    <a href="#javascript">JavaScript</a>

    <h2 id="html">HTML超文本标记语言</h2>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <h2 id="css">CSS层叠样式表</h2>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <h2 id="javascript">JavaScript</h2>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p> 
    <!-- <a href="#html">HTML</a>
    <a href="#css">CSS</a>
    <a href="#javascript">JavaScript</a>

    <a name='html'></a>
    <h2>HTML超文本标记语言</h2>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <a name="css"></a>
    <h2>CSS层叠样式表</h2>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <a name="javascript"></a>
    <h2>JavaScript</h2>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>-->
</body>
</html>

在这里插入图片描述

1.4.2 特殊符号

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>特殊符号</title>
</head>
<body>
    <p>
        &lt;html&gt;
    </p>
    <p>
        hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;world
    </p>
</body>
</html>

在这里插入图片描述

1.4.3 列表标签

1.无序列表< ul> 、< li>

< ul> 、< li> ：列表的最外层容器、列表项
注：ul和li必须是组合出现的，他们之间是不能有其他标签的,但li内部可以有其他标签

type属性：改变前面标记的样式(一般都是用CSS去控制)
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>列表标签</title>
</head>
<body>
    <!--正确的写法-->
    <ul type="circle">
        <li>第一项</li>
        <li>第二项</li>
    </ul>
    <!-- 错误的写法
    <ul>
        <li>
            <p>
                <li>第一项</li>
            </p>
        </li>
    </ul> -->
</body>
</html>

加type属性前
在这里插入图片描述加type属性

2.有序列表< ol> 、< li>

注：有序列表用的非常少，经常用的是无序列表，无序列表可以代替有序列表

type属性值如下：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible

最低0.47元/天解锁文章

guanerkoushi

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
HTML技术(基础/列表/表格/表单)

HTML技术前言一、HTML介绍1.1 发展1.2 HTML文件的基本结构1.3 HTML标签常用标签1.4 HTML元素HTML元素属性二、识别表单元素三、样式表的三种形式前言ubuntu下写HTML文本使用工具VS Code,win可使用H Builder快速生成标准的html代码：（1）在第一行输入！（2）按Tab键或者选择代码提示中的！Visual Studio Code默认是在VScode的控制台下查看html页面，这对于我们调试和查看效果十分不方便。所以这里我们需要安装一下扩展
复制链接

扫一扫