HTML学习笔记

最新推荐文章于 2025-06-04 22:36:18 发布

Dompink

最新推荐文章于 2025-06-04 22:36:18 发布

阅读量559

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： html 语言

本文链接：https://blog.youkuaiyun.com/mmx1065009116/article/details/77676978

web前端专栏收录该内容

1 篇文章

订阅专栏

HTML简介

html是一种超文本标记语言，“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

标记语言，程序语言与脚本语言

标记语言，是一种将文本（Text）以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码。与文本相关的其他信息（包括例如文本的结构和表示信息等）与原来的文本结合在一起，但是使用标记（markup）进行标识。
- 例如：XML，HTML
程序语言，程序在执行之前需要一个专门的编译过程，把程序编译成为机器语言的文件，运行时不需要重新翻译，直接使用编译的结果就行了。程序执行效率高，依赖编译器，跨平台性差些
- 例如：C，C++等
脚本语言是为了缩短传统的编写-编译-链接-运行（edit-compile-link-run）过程而创建的计算机编程语言。它的命名起源于一个脚本“screenplay”，每次运行都会使对话框逐字重复。早期的脚本语言经常被称为批量处理语言或工作控制语言。
一个脚本通常是解释运行而非编译。脚本语言通常都有简单、易学、易用的特性，目的就是希望能让程序员快速完成程序的编写工作。
- 例如：JavaScript、VBScript、PHP

至于我最喜欢的python，他通常被称为胶水语言，粗略的来讲，算是脚本语言。（当然这种分发较为粗略，python不是一般的脚本语言可以比拟的，我更喜欢这种称呼高级动态编程语言）能够用其他语言，尤其是c，c++语言编写的模块很轻松的连接在一起。python本身可以跨平台使用，但由于往往会调用很多模块，所以只要模块本身提供跨平台的支持，那么就可以实现跨平台的操作。
这篇文章较好的解释了编译与解释，动态与静态等

https://fashengba.com/post/what-python-language.html

HTML基本语法

HTML常用元素

1.<html></html>中间的文本用来描述网页
2.<body></body>可见的页面内容
3.<p>我是段落</p>
4.<h1>我是一号标题</h1>
  <h2>我是二号标题</h2>
5.<br/>换行
6.<b>加粗<b/>
7.<i>斜体<i/>
8.<sub>下标</sub>
9.<u>我是下划线</u>
10.
<pre>
for x in range(10):
   print(x)
<pre/>
11.
<a href="http://write.blog.youkuaiyun.com/mdeditor">link</a>
12.
<img src="http://wx2.sinaimg.cn/thumb180/71f81b09ly1fgjk9dvzifj20bq0e8q5o.jpg">
13.
<video width="200" height="200" src="http://resource.haorenao.cn/cxy720-2.mp4" controls></video>
14.
<ul>
   <li>我是无序列表第一行</li>
   <li>我是无序列表第二行</li>
</ul>
15.
<ol>
   <li>我是有序列表第一行</li>
   <li>我是有序列表第二行</li>
   </li>
</ol>
16.
<table border="1">
      <tr>
          <td>第一行第一列
          <td>第一行第二列
      <tr>
          <td>第二行第一列
          <td>第二行第二列
</table

HTML属性说明

和Matlab的句柄值有一些像，例如<table border="1">，意思就是表格的边界线的粗细为1，设置为2的话会改变线条粗细。

HTML注意事项

注意：
- 超链接a与图片和视频用的链接不同，分别是href和src
- 并不是每一个图片的url都可以显示出图片，想要了解的话请具体搜索，本例中使用的图片和视频均来自程序媛。
- 由于未来的html语言不允许有未关闭的标签，<p></p>分别是开始标签与关闭标签，至于<br>这种换行标签，则需要用<br/>进行关闭。
- HTML对大小写不敏感。

HTML举例

本例用到了所有HTML常用的元素，排版很丑，见谅见谅。。。重要的是学习嘛，哈哈哈哈哈哈

<html>
<body>
<!--我是华丽丽的注释,不会显示在浏览器里-->

<h1>标题加段落</h1>
<h1>一号标题</h1>
<hr/><!--这是华丽丽的分割线哦-->
<h2>二号标题</h2>
<p>春眠不觉晓<br/>处处闻啼鸟<br/>夜来风雨声<br/>花落知多少</p>
<!--此处用了<p><p/>中嵌套<br/>的写法，旨在说明元素可以嵌套使用，
同样也可以使用<p><p/>加<p><p/>的方法，因为<p><p/>可以自动换行，请自行尝试-->
<br/><!--本宝宝是用来换行的-->
<h1>pre格式</h1>
<pre>
for x in range(10):
   print(x)
<pre/>
<br/>
<h1>链接</h1>
<a href="http://write.blog.youkuaiyun.com/mdeditor">link</a>
<br>
<img src="http://wx2.sinaimg.cn/thumb180/71f81b09ly1fgjk9dvzifj20bq0e8q5o.jpg">
<video width="200" height="200" src="http://resource.haorenao.cn/cxy720-2.mp4" controls></video>
<br/>
<h1>有序表，无序表和表格</h1>
<ul>
   <li>我是无序列表第一行</li>
   <li>我是无序列表第二行</li>
</ul>
<ol>
   <li>我是有序列表第一行</li>
   <li>我是有序列表第二行</li>
   </li>
</ol>
<table border="1">
      <tr>
          <td>第一行第一列
          <td>第一行第二列
      <tr>
          <td>第二行第一列
          <td>第二行第二列
</table>
<h1>加粗，斜体，下标及下划线</h1>
<b>加粗</b>
<i>斜体</i>
<sub>下标</sub>
<u>我是下划线</u>
<!--需注意加粗，斜体和下标不能像段落一样换行-->
</body>
</html>