HTML入门速成

前言

在学习或者工作之中,经常需要自己写一些简单的网页,那么,就需要有一定的前端代码能力。HTML,CSS,JavaScript等皆是最常用的前端代码,本小节即学习笔记,帮助各位初学者快速找到自己想要的网页制作所需要的HTML代码。

一. 最常见的网页结构

<!DOCTYPE html>
<html>
 <head>
 <meta charset='utf-8'>
 <title>开始HTML</title>
 </head>
 <body>
 <h1>你今天码代码了吗?</h1>
 </body>
</html>

二. HTML元素

元素是HTML的最基本部件,由成对尖括号<>及括号间的内容组成。

1. 基本元素

文字粗细,斜体,上/下标,链接,加载图片,删除线,下划线等…

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>教程</title>
</head>
<body>
    <h1>我的标题</h1>
    <p>我的段落</p>
    <a href="http://www.runoob.com">这是链接</a>
    <br />
    <img src="/images/logo.png" width="258" height="28" />
    <br />
    <b>加粗文本</b>
    <br />
    <i>斜体文本</i>
    <br />
    <p>这是<sub>下标</sub></p>
    <p>这是<sup>上标</sup></p>
    <p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />

</body>
</html>

展示结果:
python Django HTML

2.列表

(1)有序列表

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>教程</title>
</head>
<body>
<ol type="A">
    <li>苹果</li>
    <li>香蕉</li>
    <li>草莓</li>
    <li>西瓜</li>
</ol>
</body>
</html>

展示结果:
python Django HTML

(2)无序列表

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>教程</title>
</head>
<body>
<ul type="A">
    <li>苹果</li>
    <li>香蕉</li>
    <li>雪梨</li>
    <li>西瓜</li>
</ul>
</body>
</html>

展示结果:
python Django HTML

(3)嵌套列表

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>教程</title>
</head>
<body>
<ul type="A">
    <li>苹果</li>
    <ol>
        <li>大苹果</li>
        <li>小苹果</li>
    </ol>
    <li>香蕉</li>
    <li>雪梨</li>
    <li>西瓜</li>
</ul>
</body>
</html>

展示结果:
python Django HTML

3. < style >和 < script >

style元素可以给HTML增加css样式

<!--给表格加样式--->
<style type="text/css">
th {background-color:lightskyblue;color: #255e95}
</style>

以上是给表格增加背景色的代码,一般这段加在HTML的< head ></ head >之间。

加入css样式有三种形式:内联样式,内部样式表,外部样式表

  1. 内联样式

    < h1 style="font-family:arial;" > 文字文字文字< /h1 >
    
  2. 内部样式表

    < style type="text/css" > body {background-color:yellow;} < /style >
    
  3. 外部样式表

    < link rel="stylesheet" type="text/css" href="mystyle.css " >
    

觉得有用的小伙伴记得收藏点赞哦~

基础教程: 1.Html的结构组成 2.Body的常用属性 3.字体<Font> 4.图像<Image> 5.表格表项对齐方式<Align> 6.表格<Table> 7.框架<Frame> 8.序列卷标 9.表单<Form> 10.排版卷标 11.背景标志 12.链接标志 其他实例教程 13.关于Iframe标记 14.关于播放音乐 HTML是网页主要的组成部分,基本上一个网页都是由HTML语言组成的,所以要学习网站怎样建设,必须从网页的基本语言学起。 先简单的介绍一下HTML语言(我们在这灌输大家的是能够实际操作),HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。神奇吗?一点都不神奇,因为现在你看到的就是这种语言写的页面。 是呀,HTML并不是很神奇,只是因为你不是很了解它,现在咱们就开始接她的面纱: 一、HTML的组成结构(头部、眼睛、身体----好像一个人一样是不是?) 1、头部。只要你学过英语,你应该知道头怎么用英文写吧!yes,HEAD就是了;所以,头部的HTML写法就是<head>头部的内容</head>,简单不,大家注意一下,这两个非常相似,只是后一个比前一个多了“/”符号。类似这样的以后会经常用到。 2、眼睛。就好像人的眼睛一样,它是心灵的窗口,而一个网页的眼睛应该就是它的页面的标题了,标题怎么说呢?title,yes!大家知道眼睛是长在头上的,所以啦:<title>标题</title>这些应放在<head>和</head>之间。也就是 <head><title>标题</title></head> 3、身体。身体是网页最主要的部分了,因为前面讲的都不是页面所显现出来的,而大家所看到的页面页就是他的身体部分了(当然它的TITLE可以在浏览器的最左上角可以看到),身体----BODY,他的写法也就是:<body>页面内容</body> 最后,别忘了把这些部分组成一体----网页,所以咱们就用<html></html>把他们给包起来。 好了,咱们来大体看看网页的结构: <html> <head> <title> 标题 </title> </head> <body> 页面内容 </body> </html>
相关推荐
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页