【学习笔记】关于HTML的学习笔记（上）

最新推荐文章于 2023-05-11 17:22:33 发布
最新推荐文章于 2023-05-11 17:22:33 发布
阅读量602 收藏 1
点赞数 2
文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24251607/article/details/107759993
版权

1、HTML简介

HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

2、HTML入门编写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
HTML入门编写
</body>
</html>

<!doctype html>声明文档类型，即告知浏览器使用html 5解析网页，不区分大小写

<head>网页的头部，元素包含了文档的元（meta）数据

<title>网页的标题

<body>网页的主体，元素包含了可见的页面内容

3、HTML标签介绍

以下内容均编写在<body>···</body>之间。

3.1、标题

<!--6个标题-->
<h1>This is 1.</h1>
<h2>This is 2.</h2>
<h3>This is 3.</h3>
<h4>This is 4.</h4>
<h5>This is 5.</h5>
<h6>This is 6.</h6>

This is 1.

This is 2.

This is 3.

This is 4.
This is 5.
This is 6.

3.2、文字

3.2.1、段落、斜体、加粗

<!--部分字体效果-->
<p>段落标签</p>
<i>斜体字</i>
<b>文字加粗</b>

段落标签

斜体字 文字加粗

3.2.2、删除线、下划线

<!--部分字体效果-->
<del>删除线</del>
<u>下划线</u>

删除线
下划线

3.3、分割线

<!--分割线-->
<hr>

3.4、列表

3.4.1、无序列表

<!--无序列表-->
<ul>
    <li>无序列表1</li>
    <li>无序列表2</li>
    <li>无序列表3</li>
    <li>无序列表4</li>
</ul>
  • 无序列表1
  • 无序列表2
  • 无序列表3
  • 无序列表4

​ 在无序列表

  • 的使用中，可以设置3个不同的样式：实心圆，空心圆，实心方块。只需在
    • 标签中加入**type=“XXX”**即可 

<!--实心圆-->
<ul type="disc">
    <li>无序列表1</li>
    <li>无序列表2</li>
    <li>无序列表3</li>
    <li>无序列表4</li>
</ul>
<!--空心圆-->
<ul type="circle">
    <li>无序列表1</li>
    <li>无序列表2</li>
    <li>无序列表3</li>
    <li>无序列表4</li>
</ul>
<!--实心方块-->
<ul type="square">
    <li>无序列表1</li>
    <li>无序列表2</li>
    <li>无序列表3</li>
    <li>无序列表4</li>
</ul>
  • 无序列表1
  • 无序列表2
  • 无序列表3
  • 无序列表4
  • 无序列表1
  • 无序列表2
  • 无序列表3
  • 无序列表4
  • 无序列表1
  • 无序列表2
  • 无序列表3
  • 无序列表4

3.4.2、有序列表

与无序列表相似，有序列表使用

  1. 标签。含有4种样式：数字（默认）、小写字母、大写字母、小写罗马字母、大写罗马字母。下面直接展示代码和示例 

<!--数字排序-->
<ol type="1">
    <li>有序列表1</li>
    <li>有序列表2</li>
    <li>有序列表3</li>
    <li>有序列表4</li>
</ol>
<!--小写字母-->
<ol type="a">
    <li>有序列表1</li>
    <li>有序列表2</li>
    <li>有序列表3</li>
    <li>有序列表4</li>
</ol>
<!--大写字母-->
<ol type="A">
    <li>有序列表1</li>
    <li>有序列表2</li>
    <li>有序列表3</li>
    <li>有序列表4</li>
</ol>
<!--小写罗马字母-->
<ol type="i">
    <li>有序列表1</li>
    <li>有序列表2</li>
    <li>有序列表3</li>
    <li>有序列表4</li>
</ol>
<!--大写罗马字母-->
<ol type="I">
    <li>有序列表1</li>
    <li>有序列表2</li>
    <li>有序列表3</li>
    <li>有序列表4</li>
</ol>
  1. 有序列表1
  2. 有序列表2
  3. 有序列表3
  4. 有序列表4
  1. 有序列表1
  2. 有序列表2
  3. 有序列表3
  4. 有序列表4
  1. 有序列表1
  2. 有序列表2
  3. 有序列表3
  4. 有序列表4
  1. 有序列表1
  2. 有序列表2
  3. 有序列表3
  4. 有序列表4
  1. 有序列表1
  2. 有序列表2
  3. 有序列表3
  4. 有序列表4

3.5、链接

使用<a>标签配合href属性即可完成超链接的配置，使用包裹部分内容，并设置href属性即可。如：

<a href="https://www.baidu.com/">点击我进入百度</a>

使用上述语句，可以在用户点击该标签时，在本窗口跳转到指定网页。若希望能够在新的窗口打开网页，则需要配置target属性。如：

<a href="https://www.baidu.com/" target="_blank">点击我进入百度</a>

3.6、图片

使用<img>标签配合src、width、height属性即可完成图片的相关操作。如：

<img src="HTMLimgDemo1.png">

默认匹配与html文件相同路径的文件，即相对路径，同样的可以设置绝对路径。

当多个图片导入时，由于图片大小各不相同，会导致图片排版有误，美观度降低。可以使用width或者height属性设置图片显示的像素长宽。在设置长宽的时候务必按比例调整，否则会导致图片变形。

title属性：鼠标指向图片时的提示内容

alt属性：图片加载失败时显示的内容

<img src="HTMLimgDemo1.png" title="这是图片" alt="HTML图片示例">

加载失败：
在这里插入图片描述

3.7、表格

使用<table>、<tr>、<td>相互搭配使用构建表格，使用border属性设置表格边框效果，使用width属性设置单元格宽度。代码示范：

<table border="1px">
    <tr>
        <td width="100px">第一行A</td>
        <td width="100px">第一行B</td>
        <td width="100px">第一行C</td>
    </tr>
    <tr>
        <td width="100px">第二行A</td>
        <td width="100px">第二行B</td>
        <td width="100px">第二行C</td>
    </tr>
    <tr>
        <td width="100px">第三行A</td>
        <td width="100px">第三行B</td>
        <td width="100px">第三行C</td>
    </tr>
</table>

在这里插入图片描述

在<table>标签中我们可以设置空白间距cellspacing

<table border="1px" cellspacing="0">
<!--省略-->
</table>

在这里插入图片描述

在<tr>标签中可以设置align属性规定文字位置

<!--省略-->
<tr align="center">
    <td width="100px">第三行A</td>
    <td width="100px">第三行B</td>
    <td width="100px">第三行C</td>
</tr>

在这里插入图片描述

在<td>标签中可以设置colspan属性规定该单元格占据列数，需要注意，每多占1列，都应当少写一个<td>，否则表格就会伸出去一格

<tr>
	<td colspan="3" align="center">占3列</td>
</tr>
<!--省略-->

在这里插入图片描述

在<td>标签中可以设置rowspan属性规定该单元格占据行数，与colspan相同，需要考虑<td>的数量

<table border="1px" cellspacing="0">
    <tr>
        <td colspan="3" align="center">占3列</td>
    </tr>
    <tr>
        <td width="100px">第一行A</td>
        <td width="100px">第一行B</td>
        <td width="100px" rowspan="3" align="center">第一行C</td>
    </tr>
    <tr>
        <td width="100px">第二行A</td>
        <td width="100px">第二行B</td>
    </tr>
    <tr align="center">
        <td width="100px">第三行A</td>
        <td width="100px">第三行B</td>
    </tr>
</table>

在这里插入图片描述

下面进行表格属性的总结并写出一个常用的求职表格

<table>表示表格

<tr>表示行

<td>表示单元格

<col>表示列

border="1px"表示边框属性

cellspacing="0"表示单元格空隙

align="center"表示对齐方式

列分组 <colgroup span="6" width="100px"> 指6个<col width="100px">

<tbody>标签：根据w3c标准，表格具有3个部分：thead、tbody、tfoot。其中tbody是核心内容，浏览器解析网页时会自动补充<tbody>，建议根据标准手写<tbody>标签。

<table cellspacing="0" border="1px"><!--设置边框属性和单元格空隙-->

    <tr align="center"><!--文字居中-->
        <td colspan="7">个人简历</td><!--该单元格占7列-->
    </tr>

    <tr align="center">
        <td width="200px">姓名</td><!--设置单元格宽度-->
        <td width="200px"></td>
        <td width="200px">性别</td>
        <td width="200px"></td>
        <td width="200px">年龄</td>
        <td width="200px"></td>
        <td width="200px" rowspan="4">照片</td><!--该单元格占4行-->
    </tr>

    <tr align="center">
        <td width="200px">学历</td>
        <td width="200px"></td>
        <td width="200px">籍贯</td>
        <td width="200px" colspan="3"></td>
    </tr>

    <tr align="center">
        <td width="200px">电话</td>
        <td width="200px"></td>
        <td width="200px">政治面貌</td>
        <td width="200px" colspan="3"></td>
    </tr>

    <tr align="center">
        <td width="200px">毕业院校</td>
        <td width="200px" colspan="5"></td>
    </tr>

    <tr align="center">
        <td width="200px">求职意向</td>
        <td width="200px" colspan="6"></td>
    </tr>

</table>

在这里插入图片描述

3.8、表单

表单控件由标签<input>配合type属性产生，包括text、password、button、radio、checkbox等，写法如:<input type="text">

  • form必须要有action表示提交地址
  • 需要提交的input数据必须要有name属性
  • input按钮的文字需要用value表示
  • input必须放在form内才能提交

3.9、HTML块

和 都是用来布局用的，本身没有任何显示效果

假如我们需要让两张图片均靠左50像素摆放，那么可以单独设置两个图片的属性：

<img style="margin-left:50px" src="https://how2j.cn/example.gif"/>
  <br/>
<img style="margin-left:50px" src="https://how2j.cn/example.gif"/>

同样的，我们可以将两个图片放在一个div中，然后只设置div的属性：

<div style="margin-left:50px" >
 <img src="https://how2j.cn/example.gif"/>
  <br/>
 <img src="https://how2j.cn/example.gif"/>
</div>

两者的显示效果是完全一样的。

4、常见的表单部件使用

4.1、文本框

所有文本框都有一些通用规范：
它们可以被标记为 readonly (用户不能修改输入值)甚至是 disabled (输入值永远不会与表单数据的其余部分一起发送)。
它们可以有一个 placeholder; 这是文本输入框中出现的文本，用来简略描述输入框的目的。
它们可以被限制在size (框的物理尺寸) 和 长度 (可以输入的最大字符数)。
如果浏览器支持的话，他们可以从拼写检查中获益。

4.1.1、单行文本框

<input type="text" id="comment" name="comment" value="I'm a text field">

在这里插入图片描述

4.1.2、E-mail地址框

<input type="email" id="email" name="email" multiple>

在这里插入图片描述

4.1.3、密码框

<input type="password" id="pwd" name="pwd">

这会使用户输入密码的时候显示星号，但这并不能确保信息的安全。若没有其他的加密措施，被星号隐藏的内容会被明文发送，这会带来安全隐患。

4.1.4、搜索框

<input type="search" id="search" name="search">

在这里插入图片描述

4.1.5、电话号码框

<input type="tel" id="tel" name="tel">

4.1.6、URL框

<input type="url" id="url" name="url">

会检验输入的内容是否符合url格式，但不会检验url是否存在。

4.1.7、多行文本框

<textarea cols="30" rows="10"></textarea>

在这里插入图片描述

文本框右下角有一个拖放按钮用来改变文本框大小，这一属性可以在CSS设置文本区域中的resize为none来取消。

4.2、下拉菜单

4.2.1、单选选择框

一个选择框是用元素创建的，其中有一个或多个元素作为子元素，每个元素都指定了其中一个可能的值。

<select id="simple" name="simple">
  <option>Banana</option>
  <option>Cherry</option>
  <option>Lemon</option>
</select>

在这里插入图片描述

4.2.2、多选选择框

<select multiple id="multi" name="multi">
  <option>Banana</option>
  <option>Cherry</option>
  <option>Lemon</option>
</select>

在这里插入图片描述

4.3、可选中项

4.3.1、单选项

<input type="radio" checked id="soup" name="meal">

几个单选按钮可以连接在一起。如果它们的name属性共享相同的值，那么它们将被认为属于同一组的按钮。同一组中只有一个按钮可以同时被选；这意味着当其中一个被选中时，所有其他的都将自动未选中。

<fieldset>
  <legend>What is your favorite meal?</legend>
  <ul>
    <li>
      <label for="soup">Soup</label>
      <input type="radio" checked id="soup" name="meal" value="soup">
    </li>
    <li>
      <label for="curry">Curry</label>
      <input type="radio" id="curry" name="meal" value="curry">
    </li>
    <li>
      <label for="pizza">Pizza</label>
      <input type="radio" id="pizza" name="meal" value="pizza">
    </li>
  </ul>
</fieldset>

在这里插入图片描述

4.3.2、复选框

<input type="checkbox" checked id="carrots" name="carrots" value="carrots">

包含checked属性使复选框在页面加载时自动被选中。
在这里插入图片描述

4.4、按钮

4.4.1、submit

将表单数据发送到服务器。对于 元素, 省略 type 属性 (或是一个无效的 type 值) 的结果就是一个提交按钮.

<button type="submit">
    This a <br><strong>submit button</strong>
</button>

<input type="submit" value="This is a submit button">

4.4.1、reset

将所有表单小部件重新设置为它们的默认值。

<button type="reset">
    This a <br><strong>reset button</strong>
</button>

<input type="reset" value="This is a reset button">

4.4.3、anonymous

没有自动生效的按钮，但是可以使用JavaScript代码进行定制。

<button type="button">
    This an <br><strong>anonymous button</strong>
</button>

<input type="button" value="This is an anonymous button">

参考文献

HTML系列教材 https://how2j.cn/k/html/html-div-span/189.html

原生表单部件 https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms/The_native_form_widgets

Tamayo0914
关注
java学习笔记markdown
03-12
【Java学习笔记Markdown版】是针对Java初学者和进阶者的一份详尽教程，以Markdown格式编写，便于阅读和整理。Markdown是一种轻量级的标记语言，它允许用户使用易读易写的纯文本格式编写文档，然后转换成结构化的HTML...
HTML的学习笔记.zip
01-01
HTML的学习笔记HTML的学习笔记HTML的学习笔记HTML的学习笔记 HTML的学习笔记HTML的学习笔记HTML的学习笔记HTML的学习笔记 HTML的学习笔记HTML的学习笔记HTML的学习笔记HTML的学习笔记 HTML的学习笔记HTML的学习笔记...
关于HTML的学习笔记（一）
zjdzka的博客
10-27 926
目录 关于vs code 常用的一些快捷键 HTML初始代码的建立 HTML 注释 HTML强调标签 HTML上下标文本 HTML删除文本、插入文本 HTML图片标签 HTML文件引入地址 HTML跳转链接 HTML跳转锚点 HTML特殊符号 HTML列表 1.vs code的常用快捷键 2.HTML初始代码的建立 3.HTML注释 结果如下： 添加注释： 结果如下： 被注释过的代码在网页中不会被显示出来，快捷添加/删除键：ctrl+/或者shift+alt+a（选中目标） 4.HTML强调标
HTML笔记（全）
程序猿小九九的博客
06-04 3444
HTMLHTML5HTML5的优势W3C标准常见IDEhtml基本机构、等成对的标签，分别叫开放标签，和闭合标签单独呈现的标签（空元素），如意为用/来关闭空元素 03.网页基本标签 标题标签 段落标签 换行标签 水平线标签 字体样式标签 注释和特殊符号 04.图像标签 常见的图像格式 05.超链接标签及应用 文本超链接 图像超链接 超链接 06.块元素和行内元素 块元素 无论内容多少，该元素独占一行 (p、h1-h6、…) 行内元素 内容撑开宽度，左右都是行内元素的可以排在一行 (a
HTML学习笔记（一）
Heliosssssss的博客
10-17 256
大概就是这几天开始看HTML了，就顺便做一个小小的学习笔记吧。 鉴于内容挺少，我的第一篇blog应该也不会很长。 （最近作业太多啦！还要兼顾一些其他的东西，所学得有些慢。。。） 由于是第一篇blog，格式不会用，就力求精简了！ 一. html的网页结构 html主要分为head和body两部分，其他内容一些用在head中，一些用在body中。 二. <!DOCTYPE>声明 html中不区分大小写，可以写成任意大小写组合。 三.中文乱码问题 头部字符声明为UTF-8或者GBK <head&
html5斜体字
weixin_30483495的博客
03-25 2241
font-style:italic; italic ； oblique； normal 依次倾斜，越来越邪； 转载于:https://www.cnblogs.com/aaaaap/p/10593932.html
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar
最新发布
04-18
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar ...
一些html的学习笔记
01-03
通过自学w3cschool上的html知识和上课所学的一些html知识，然后使用markdown汇总，整理的一些笔记
Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip
05-09
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
AnonymousRedirect:用于匿名重定向的非常简单HTML页面
05-14
匿名重定向/引荐来源网址 用于匿名重定向的非常简单HTML页面。 感谢 ，重定向的请求将根本没有 。 请注意，IE11Referrer-Policy。 用法 https://adguardteam.github.io/AnonymousRedirect/redirect.html?url=[PUT URL HERE] 例子
html中斜体样式怎么写,html <i> 斜体标签
热门推荐
weixin_36019798的博客
05-30 1万+
html I斜体标签html i标签html标签之html字体斜体标签标签教程。html斜体标签是用于改动文字字体显现名目，i让字体斜着闪现。在结构中大面积使用不是很多，但在小部门为了达到排版都雅或某个须要，无意偶尔对文字字体斜体表示，即可以或许使用html i标签来实现(懂得和html i同样有着让字体倾斜斜体展示html em比较张扬标签)。一、html 斜体i语法结构1、html i语法...
html中斜体样式怎么写,CSS font-style斜体字体倾斜体样式
weixin_28938171的博客
05-30 2856
1、经常使用斜体语法css经常使用字体样式设置font-style: italichtml兼容各大浏览器浏览器normal : 正常的字体(默认字体样式，可用于去掉html i斜体标签默认斜体样式)字体italic : 斜体。对于没有斜体变量的特殊字体，将应用obliquecodeoblique : 倾斜的字体orm2、css斜体案例htm咱们对divcss5盒子里的文字字体设置为italic斜体...
html:(33):文字排版粗体和斜体
歌谣的博客
09-25 647
文字排版--粗体 我们还可以使用css样式来改变文字的样式：粗体、斜体、下划线、删除线，可以使用下面代码实现设置文字以粗体样式显示出来。 p span{font-weight:bold;} 在这里大家可以看到，如果想为文字设置粗体是有单独的css样式来实现的，再不用为了实现粗体样式而使用h1-h6或strong标签了。 <!DOCTYPE HTML> <html&gt...
HTML的加粗、斜体、删除和下划线标签
weixin_45495604的博客
11-24 1万+
HTML格式化文字标签
HTML基础-02-文本格式化、引文（斜体、粗体、上/下标签、删除、插入、强调、加重、字号、预格式，缩写、文字方向、短引用、长引用、引证）
运维玄德公
03-15 2265
1. 文本格式化标签 1.1 斜体和粗体< b > < i > 1.2. 上标和下标 < sub > < sup > 1.3 删除和插入 < del > < ins > 1.4 强调文本和加重语气< em > < strong > 1.5 定义字号 < small > < big > 1.6 预格式文本 < pre > 2. "计算机输出" 标签 3. 引文和引用 3.1 缩写 < abbr > < acronym > 3.2 地址和连接 < address > 3.3 文字方向 < bdo > 3.4 短
anonymous的前端学习笔记(1)——HTML基础(1)
个人博客：https://www.wenbin.org.cn/
05-05 749
域名解析 域名 – ip地址 – 220.181.38.149 https://220.181.38.149 – www.baidu.com – DNS解析 {‘www.baidu.com’:‘220.181.38.149’,} 请求和响应 请求:浏览器socket客户端给服务端发信息 响应:服务端socket给客户端回信息 标签 Html标签:超文本标记语言,就是标记用的. 必须是封...
JavaWeb ------ HTML
Anonymous_jsu的博客
07-11 143
概念： 是最基础的网页开发语言 hyper text markup language 超文本标记语言 超文本： 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本 标记语言 由标签构成的语言，<标签名称>如html，xml 标记语言不是编程语言 快速入门: 语法：html文档后缀名.html或者.htm 标签分为： > 围堵标签：有开始标签喝结束标签。如<html></html> > 自闭和标签：开始标签和结束标签在一起。如&l
HTML常用标签介绍
2302_76679440的博客
05-11 1962
标签通常是成对出现的，分为开始标签（p）和结束标签(/p)，结束标签只是在开始标签前加一个斜杠“/”。标签可以有属性，属性必须有值(align=“center” )。开始标签与结束标签中包含的内容称之为区域。标签不区分大小写，p和P是相同的。
『HTML系列』文本格式化标签
老__L的博客
10-23 4548
本文主要介绍b、cite、del、em、i、ins、s、strong、u标签。 文本以粗体方式显示，主要有b和strong标签。HTML 提醒注意（Bring Attention To）标签（）用于吸引读者的注意到该元素的内容上。这个标签过去被认为是粗体标签，且大多数浏览器仍然将文字显示为粗体。不提倡将标签用于显示粗体文字，应使用 CSS属性来创建粗体文字。标签表示文本十分重要，一般用粗体显示。strong 标签必须同时有开始标签或结束标签；
HTML学习笔记：从基础到实践
本资源是一个个人编写的HTML学习笔记，涵盖了HTML的基本概念、历史演变、常用编辑器以及基本结构和标签。HTML，全称为超文本标记语言，是一种用于创建网页的标准标记语言，它能描述网页的结构并嵌入文字、图形、动画...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值