HTML学习笔记

来源：互联网发布：微信秒杀软件哪个好编辑：程序博客网时间：2024/05/18 15:50

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.csdn.net/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.csdn.net/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>

运行结果

这里写图片描述
不需要单独下载编译软件，notpad++或者其他文本编辑器即可，记得后缀改为.html

阅读全文

0 0