HTML学习总结

最新推荐文章于 2024-06-15 21:20:00 发布

新人小罗

最新推荐文章于 2024-06-15 21:20:00 发布

阅读量98

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/m0_46755633/article/details/114572981

版权

什么是HTML

    HTML是超文本标记语言（HyperTextMarkupLanguage）的缩写，标准通用标记语言下的一个应用。
HTML不是一种编程语言，而是一种标记语言（markuplanguage），是网页制作所必备的工具。“超文本”
就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

     超文本标记语言(或超文本标签语言)的结构包括“头”部分和“主体”部分，其中“头”部提供关于网页的信息，
“主体”部分提供网页的具体内容。

我的第一个web页面

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

HTML基础

HTML元素

<p>这是一个段落。</p>

<p>开始标签
这是一个段落。：元素内容
</p>结束标签

HTML标题

HTML标题通过h1~h6来定义

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>

HTML段落

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

HTML链接

<a href="https://www.baidu.com">这是一个链接</a>

HTML图像

<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">

src:要显示的图片的位置
alt:获取图片成功前或出问题时的占位符
width,height:为图片指定宽度和高度

文本格式

<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>

标签	描述
`<b>`	定义粗体文本
`<em>`	定义着重文字
`<i>`	定义斜体字
`<small>`	定义小号字
`<strong>`	定义加重语气
`<sub>`	定义下标
`<sup>`	定义上标字
`<ins>`	定义插入字
`<del>`	定义删除字

标签	描述
`<code>`	定义计算机代码
`<kbd>`	定义键盘码
`<samp>`	定义计算机代码样本
`<var>`	定义变量
`<pre>`	定义预格式文本

标签	描述
`<abbr>`	定义缩写
`<address>`	定义地址
`<bdo>`	定义文字方向
`<blockquote>`	定义长的引用
`<q>`	定义短的引用语
`<cite>`	定义引用、引证
`<dfn>`	定义一个定义项目。

HTML超链接

HTML使用标签<a>来设置超文本链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签<a>中使用了href属性来描述链接的地址。
链接语法：

<a href="url">链接文本</a>

HTML表格

表格由<table>标签来定义。每个表格均有若干行（由 <tr>标签定义），每行被分割为若干单元格（由 <td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
实列：

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

HTML列表

无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用<ul>标签

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

有序列表

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

自定义列表

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// An highlighted block
var foo = 'bar';

表单Form

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签 <form>来设置:

<form>
  <!-- 文本框，注意有 placeholder 提示符 -->
  用户名：<br>
  <input type="text" name="name" placeholder="请输入用户名"><br>
  <!-- 密码框 -->
  密码：<br>
  <input type="password" name="ps" placeholder="请输入密码"><br>
  年龄：<br>
  <!-- 数字输入框，注意 min 和 value 属性-->
  <input type="number" name="age" min="18" value="18"><br>
  <!-- 单选按钮, 注意 checked 属性 -->
  性别：<br>
  <input type="radio" name="gender" value="male" checked> 男<br>
  <input type="radio" name="gender" value="female"> 女<br>
  <input type="radio" name="gender" value="other"> 其它<br>
  <!-- 下拉列表，注意 selected 属性 -->
  党派：<br>
  <select name="party">
    <option value="D">民主党</option>
    <option value="R" selected>共和党</option>
    <option value="N">无党派</option>
  </select><br>
  <!-- 多选框 -->
  您有哪些交通工具：<br>
  <input type="checkbox" name="vehicle1" value="Bike"> 自行车<br>
  <input type="checkbox" name="vehicle2" value="Motocycle" checked> 摩托车<br>
  <input type="checkbox" name="vehicle3" value="Car"> 轿车<br>
  <input type="checkbox" name="vehicle4" value="Jet"> 飞机<br>
  <!-- 日期选择器 -->
  您的工作日期：<br>
  <input type="date"><br>
  <!-- 文件选择器 -->
  上传您的照片:<br>
  <input type="file" name="photo"><br>
  <!-- 文本输入区域，注意 rows 和 cols 属性 -->
  您的建议：<br>
  <textarea name="message" rows="5" cols="30">
    The cat was playing in the garden.
  </textarea><br><hr>
  <!-- 表单提交/重置按钮，将表单中的数据取消或传输给服务器端进行处理 -->
  <input type="submit" value="提 交">
  <input type="reset" value="重 置">
</form>

新人小罗

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
HTML学习总结

目录什么是HTML我的第一个web页面HTML基础HTML元素HTML标题HTML段落HTML链接HTML图像合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入什么是HTML HTML是超文本标记语言（HyperTextMarkupL
复制链接

扫一扫