Dompink
Dompink

HTML学习笔记

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">linka>
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的句柄值有一些像，例如

，意思就是表格的边界线的粗细为1，设置为2的话会改变线条粗细。

HTML注意事项

注意：
- 超链接a与图片和视频用的链接不同，分别是href和src
- 并不是每一个图片的url都可以显示出图片，想要了解的话请具体搜索，本例中使用的图片和视频均来自程序媛。
- 由于未来的html语言不允许有未关闭的标签，

分别是开始标签与关闭标签，至于
这种换行标签，则需要用
进行关闭。
- HTML对大小写不敏感。

HTML举例

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

<html>
<body>


<h1>标题加段落h1>
<h1>一号标题h1>
<hr/>
<h2>二号标题h2>
<p>春眠不觉晓<br/>处处闻啼鸟<br/>夜来风雨声<br/>花落知多少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">linka>
<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>

运行结果
HTML学习笔记_第1张图片
HTML学习笔记_第2张图片
不需要单独下载编译软件，notpad++或者其他文本编辑器即可，记得后缀改为.html

你可能感兴趣的:(web前端)