HTML总结

Tgmmmmmmmm

已于 2023-06-20 09:04:44 修改

阅读量157

点赞数

文章标签： html html5

于 2021-06-16 19:58:15 首次发布

本文链接：https://blog.csdn.net/Tgmmmmmmmm/article/details/117965687

版权

HTML总结

前言

总喜欢在正式开始前废话一些，算是个人烂习惯吧。

HTML总结拖了很久，懒癌晚期患者活着不容易。本文仅做简单的新手向总结，更详细的CSS、JavaScript、前端框架等等随缘后续发布。

HTML印象

就不提百度来的官方介绍了，就笔者目前理解来看HTML就是用来构建网页结构的。

好的再简单一点就是积木块，用来打造自己房子（网页）的利器。只管其中有什么，谁在那里。

至于房子长什么样子，不关我事，那是粉刷匠（CSS）的事情。

HTML长相

要说建房子，不管什么样的房子，至少得住人是吧。HTML拥有固有的一些通性，别问我为什么房子都得有房顶，都得要门。

初来乍到

`<!DOCTYPE html>`

建房子得先告诉你，建的是房子。同样HTML得先告诉你，我是一份HTML5文档，不能吃，谢谢。

放在开头吧，比较显眼。

`<html></html>`

HTML有一个特点，善始善终。我们称这种类型为标签，没错就是尖括号 < 和 > 包围的关键词。

他们通常成对出现，两面夹击，凸显内容。

<标签>内容</标签>

作为一份HTML文档，自然应当把所有内容装在html标签里面。

`<head></head>`

很明显，一丢丢英语就能明白，head是头部，大概是用来放一些文档元数据的地方。

OK我们说麻利点，就是你房子的房产证，噢这是谁的房子，房子叫啥（<title>标题放这里</title>），什么风格，设计师是谁等等等等。

`<body></body>`

重头戏来了，基本网页的主题都在这里了，包含了可见的页面内容。

啦啦啦客人们大体上看到的房子都是放在这里的哦。

一砖一瓦

接下来就是一些常用的标签介绍，嘛，说成是工地常用砖头，常用水泥来理解也不错。

1.标题

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>

这玩意儿直接写出来破坏笔者的文章结构，就用截图代替了。

这是一级标题

这是二级标题

这是三级标题

这是四级标题

这是五级标题

这是六级标题

~~诶好像不会破坏，那就不用截图了。~~

2.段落

<p>我是一个段落</p> 
<p>诶我又是一个段落</p>

我是一个段落

诶我又是一个段落

_{大概两个段落之间也就是换个行吧，悄悄的说。}

PS：梦幻联动

<p title="这是个title属性">鼠标移上来试试！</p>

鼠标移上来康康我

3.换行

如果我想一个段落就换行怎么办？

完全没问题，<br>解决你的问题。

<p>我想变成<br>两行，不知道可以吗？</p>

我想变成
两行，不知道可以吗？

看起来我多套几次娃，不仅两行，多少行都没问题。

4.分割线

类似这里是一条华丽的分割线的感觉？

<hr>

没错就这样简单，华丽的分割线。

5.链接

<a href="https://blog.csdn.net/Tgmmmmmmmm">Tgmmmmmmmm的CSDN博客</a>

Tgmmmmmmmm的CSDN博客

笔者带点私货，欢迎关注，嘻嘻。

这里href是指向链接，不加的话点了没反应。

还可以增加target="_blank"等来确定是当前页面打开还是在新页面打开。

6.图像

无图无真相。图来~

<img loading="lazy" src="http://photogz.photo.store.qq.com/psc?/V14fsa9Y2eiQww/h4SLI6MeeCc7mRdKk01usjdGdBEh1ZvE7TevVhiIu.U5mJVevS71jdZcWAyJvlmgUM8BtrEZRqdL2pZy2xme41TdTSyY1tgHWn*CIOFRZek!/b&bo=4AEOAQAAAAACh00!&rf=viewer_4&t=5"/>

OK这个图片链接太不友好了，咱们整个短点的。

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

我们看到这个明明也像是个网页链接，咋就不用href呢，诶笔者也很好奇。

总之这类资源型的链接是采用的src来确定资源目标地址。

然后alt留一手，如果在给的资源链接找不到东西就拿这里的东西占个位置。

来跟我念

width - 宽度

height - 高度

不用多介绍了吧。

7.图像链接

说起来那天笔者老师问怎么让点击图像跳转到链接。

哇，套娃谁不会啊，我直接把图像变成链接的内容。诶，套娃成功。

<a href="https://blog.csdn.net/Tgmmmmmmmm"><img loading="lazy" src="http://photogz.photo.store.qq.com/psc?/V14fsa9Y2eiQww/h4SLI6MeeCc7mRdKk01usjdGdBEh1ZvE7TevVhiIu.U5mJVevS71jdZcWAyJvlmgUM8BtrEZRqdL2pZy2xme41TdTSyY1tgHWn*CIOFRZek!/b&bo=4AEOAQAAAAACh00!&rf=viewer_4&t=5"></img></a>

这样说起来笔者悄悄藏了一个小知识点，看看两个图片标签。

8.单标签

你一定发现了

哇，上面的图像标签没有结尾，好难受。

还多了个斜杠在开始标签最后，他不对称了，他不完整了。

类似这样的嘛，反正图像里面也包不了啥内容，节约下墨水，少写点，我们称这样的叫单标签

9.注释

<!-- 这是一个注释 -->

如果写的代码想只给上帝看，那就不要用，否则自己也能看懂。

10.文本格式

就是一些简单的样式，可以迅速实现包括

高亮mark、删除线del、下划线u、小字small、加粗strong、倾斜em

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

You can use the mark tag to highlight text.

~~This line of text is meant to be treated as deleted text.~~

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

11.表格

其中的关键字更像是横竖的代表。

表格嘛，使用table为表格申请

其下有tr、th、td为关键属性

<tr>*表示行，<td>表示行中的单元格，<th>表示表头单元

<table>
    <tr>
      <th>姓名</th>
      <th>QQ</th>
      <th>电话</th>
    </tr>
    <tr>
      <td>唐渝斌</td>
      <td>1585654625</td>
      <td>15845786214</td>
    </tr>
    <tr>
      <td>周圣杰</td>
      <td>254688315</td>
      <td>1555555888</td>
    </tr>
  </table>

姓名	QQ	电话
张三	1585654625	15845786214
李四	2546883152	15555558488

12.列表

列表呈现内容采用有序和无序两种方法

无序列表

<ul type="square">
  <li>apple</li>
  <li>pear</li>
  <li>purple</li>
  <li>watermelon</li>
</ul>

apple
pear
purple
watermelon

有序列表

<ol type="A">
  <li>apple</li>
  <li>purple</li>
  <li>watermelon</li>
</ol>

apple
purple
watermelon

13.表单

表单这方面作者了解的还不够深入，在此使用一些老师给的表单一起学习。

当网站需要获取我们的一些信息如：用户名、密码、选择买什么、买多少、提出意见等等时，我们就需要使用表单（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>

分析如下

首先表单需要使用form关键字

基本的包括input,select,textarea等

其中最精华的莫过于input,其类型type不同可以有多种使用方式

type=“text” 文本输入框
type=“password” 密码输入框
type=“number” 数字输入框
type=“radio” 单选按钮，多个归属于同一个name下，会提交选择的哪一个
type=“checkbox” 多选按钮，属性值归属不同name下，提交多个选择
type=“date” 日期选择器
type=“file” 文件选择器
type=“submit” 提交
type=“reset” 重置

<select>下的<option>将作为下拉列表的选项

<textarea>中文本可以换行

14.原样显示

<pre>标签可以将其中的换行以及空格全部保留

pre标签中的内容保持格式不变

<p>我们     被     分开    啦</p>

我们被分开啦

<pre>我们     被     分开    啦</pre>

我们     被     分开    啦

结语

本文在大体上回顾了基础html的使用，在各个方面的使用都略有涉及，但更多的高端操作，让页面更加好看，漂亮的方式还是需要结合css及javascript进一步调整。此文仅作为个人总结回顾，若有遗漏或错误，欢迎留言交流学习~

Tgmmmmmmmm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML总结

HTML总结前言总喜欢在正式开始前废话一些，算是个人烂习惯吧。HTML总结拖了很久，懒癌晚期患者活着不容易。本文仅做简单的新手向总结，更详细的CSS、JavaScript、前端框架等等随缘后续发布。HTML印象就不提百度来的官方介绍了，就笔者目前理解来看HTML就是用来构建网页结构的。好的再简单一点就是积木块，用来打造自己房子（网页）的利器。只管其中有什么，谁在那里。至于房子长什么样子，不关我事，那是粉刷匠（CSS）的事情。HTML长相要说建房子，不管什么样的房子，至少得住人是吧。HTML
复制链接

扫一扫