HTML入门速成

HTML入门速成

  • 前言
  • 一. 最常见的网页结构
  • 二. HTML元素
    • 1. 基本元素
    • 2.列表
      • (1)有序列表
      • (2)无序列表
      • (3)嵌套列表
    • 3. < style >和 < script >

前言

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

一. 最常见的网页结构


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

二. HTML元素

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

1. 基本元素

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


<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>bluedel> <ins>redins>!p>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />

body>
html>

展示结果:
HTML入门速成_第1张图片

2.列表

(1)有序列表


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

展示结果:
HTML入门速成_第2张图片

(2)无序列表


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

展示结果:
HTML入门速成_第3张图片

(3)嵌套列表


<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>

展示结果:
HTML入门速成_第4张图片

3. < style >和 < script >

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


<style type="text/css">
th {
      background-color:lightskyblue;color: #255e95}
style>

以上是给表格增加背景色的代码,一般这段加在HTML的< 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 " >
    

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

你可能感兴趣的:(html,css,html,机器学习,js,列表)