html:超文本标记语言

unicode（UTF-8）：万国码

<...>：标记标签

&nbsp; :空格

<br>:换行

<hr>:水平线

<p></p>:段落标签

<sup></sup>:上角标（如：y=x^2）

<sub></sub>:下角标

<h1></h1>:标题标签（h1~h6）

<strong></strong>:字体加粗

<i></i>:字体倾斜

<pre></pre>:原格式输出（需要空格时按空格键，tab键不可以）

········标签中输入lorem后按tab键添加测试数据

------------------------------------------------------------------------------

无序列表：

<ul>

　　<li></li>

</ul>

属性：

type="disc"   :实心圆点（默认）

type="circle"    :空心○

type="square"  :实心方块

---------------------------------------------------------------------------

有序列表：

<ol>

　　<li></li>

</ol>

属性：

type="1"    :序号为数字

type="a"    :序号为小写字母

type="A"    :序号为大写字母

type="i"    :序号为小写罗马数字

type="I"    :序号为大写罗马数字

---------------------------------------------------------------------------

自定义列表：

<dl>

　　<dt>辽宁省</dt>

　　<dd>沈阳市</dd>

　　<dd>大连市</dd>

</dl>

dt:第一级标题

dd:第二级标题

----------------------------------------------------------------------------

超链接：

<a href="">...</a>

属性：

　　href=""    :中写要跳转页面的地址

　　target="_blank"   :跳转时打开新的一页

回顶部功能：

　　<a name="a01"></a>    :放在最顶部

　　<a href="#a01">回顶部</a>

----------------------------------------------------------------------------

图片：

　　<img src="" >

属性：

　　src=""   :中写图片地址

　　title=""  :提示（鼠标放在图片上时的提示）

　　alt=""   :当图片加载失败时的提示

注（相对路径、绝对路径）：

　　绝对路径：文件在计算机中真正的路径

　　相对路径：谁要获取资源就相对谁

----------------------------------------------------------------------------

form表单：

<form>
用户名：<input type="text" name="user" /><br>
密&nbsp;码：<input type="password" name="password" /><br>
性别：<input type="radio" name="sex">男
　　   <input type="radio" name="sex">女<br>
省份：
<select>
　　<option>辽宁省</option>
　　<option>吉林省</option>
　　<option>内蒙古自治区</option>
</select><br>
城市：
<select>
　　<option>大连</option>
　　<option>沈阳</option>
</select><br>
<input type="submit" value="登录">
</form>

select为下拉选择

input属性：

　　 type="text"   ：文本输入框

　　type="password"   ：密码输入框

　　type="radio"      ：单选（name需要相同）

　　type="submit"    ：提交按钮

----------------------------------------------------------------------------

以下为学习时的代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>文升谁都打不过</title>

</head>

<body>

    <a name="a01"></a>

    听闻爱情，<br>    十人九悲！<hr>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure commodi esse odio nobis officia sed reiciendis, amet, voluptas nihil consequatur fugiat molestias. Ratione beatae aliquam ullam, optio! Culpa, asperiores suscipit.</p>

    &copy;

    &reg;

    &gt;

    &lt;

    y=x<sup>2</sup>

    H<sub>2</sub>O

    <h1>这是H1标题</h1>

    <h3>这是H3标题</h3>

    <h6>这是H6标题</h6>

    <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate repellendus laboriosam suscipit voluptatibus vel dolore culpa quisquam modi quis provident incidunt minus veniam, sunt sit quam id repellat debitis exercitationem!</strong>

    <i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aut facilis voluptatibus, earum libero error atque sunt veniam unde sapiente corrupti vero fugit voluptas. Minima nemo est velit earum dicta.</i>

    <pre>

                凉州词

    葡萄美酒夜光怀，欲饮琵琶马上催。

    醉卧沙场君莫笑，古来征战几人回。

    </pre>

    <ul type="square">

        <li>香蕉</li>

        <li>苹果</li>

        <li>大鸭梨</li>

    </ul>

    <ol type="a">

        <li>抽烟</li>

        <li>喝酒</li>

        <li>烫头</li>

    </ol>

    <dl>

        <dt>辽宁</dt>

            <dd>沈阳市</dd>

            <dd>大连市</dd>

        <dt>吉林</dt>

            <dd>长春市</dd>

            <dd>吉林市</dd>

        <dt>内蒙古自治区</dt>

            <dd>呼和浩特市</dd>

            <dd>包头市</dd>

    </dl>

    <h1>我的电脑</h1>

    <ul type="circle">

        <li>本地磁盘（C:）

            <ul type="square">

                <li>我的文档</li>

                <li>我的程序</li>

            </ul>

        </li>

        <li>本地磁盘（D:）

            <ul type="square">

                <li>我的电影</li>

                <li>我的游戏</li>

            </ul>

        </li>

    </ul>

    <a href="index1.html" target="_blank">点这里你会发现惊喜</a>

    <a href="#a01">回顶部</a>

    <img src="../zly.jpg" title="这是赵丽颖" alt="图片走丢了">

    <form>

        用户名：<input type="text" name="user" /><br>

        密&nbsp;码：<input type="password" name="password" /><br>

        性别：<input type="radio" name="sex">男

              <input type="radio" name="sex">女<br>

        省份：

        <select>

            <option>辽宁省</option>

            <option>吉林省</option>

            <option>内蒙古自治区</option>

        </select><br>

        城市：

        <select>

            <option>大连</option>

            <option>沈阳</option>

        </select><br>

        <input type="submit" value="登录">

    </form>

</body>

</html>

如有错误希望您能提示我修改

个人笔记，转载请说明源地址

零基础学html第一天的更多相关文章

  1. 零基础学Java第一节(语法格式、数据类型)

    本篇文章是<零基础学Java>专栏的第一篇文章,从本篇文章开始,将会连更本专栏,带领大家将Java基础知识彻底学懂,文章采用通俗易懂的文字.图示及代码实战,从零基础开始带大家走上高薪之路! ...

  2. 零基础学python-1.5 第一个程序

    这一个章节我们来说说怎么建立一个python程序 1.打开idle 2.点击File->new file,然后会弹出一个编辑窗体 3.在编辑窗体里面输入命令代码 程序代码: print(&quo ...

  3. 零基础学HTML 5实战开发(第一季)

    開始学习html5了.趋势不得不学习啊,之前老毛说过落后就要挨打,如今是不学习就要被市场淘汰,被社会淘汰.喜欢挑战,喜欢冒险.来吧.csdn给我们提供了那么好的平台.用起来..零基础学HTML 5的实 ...

  4. 《Windows编程零基础学》第零节

    首先很开心申请到了这一个专栏<Windows编程零基础学> 这是第一篇文章,在这里,我将讲述一些基础的知识. 什么是Windows编程 所谓Windows编程就是在Windows平台上开发 ...

  5. [Python] 文科生零基础学编程系列二——数据类型、变量、常量的基础概念

    上一篇:[Python] 文科生零基础学编程系列--对象.集合.属性.方法的基本定义 下一篇: (仍先以最简单的Excel的VBA为例,语法与Python不同,但概念和逻辑需要理解透彻) p.p1 { ...

  6. [零基础学python]为什么要开设本栏目

    这个栏目的名称叫做"零基础学Python". 如今网上已经有不少学习python的课程.当中也不乏精品.按理说,不缺少我这个基础类型的课程了.可是,我注意到一个问题.无论是课程还是 ...

  7. 大神教你零基础学PS，30堂课从入门到精通

    ps视频教程,ps自学视频教程.ps免费视频教程下载,大神教你零基础学PS教程视频内容较大,分为俩部分: 大神教你零基础学PS--30堂课从入门到精通第一部分:百度网盘,https://pan.bai ...

  8. 《零基础学JavaScript(全彩版)》学习笔记

    <零基础学JavaScript(全彩版)>学习笔记 二〇一九年二月九日星期六0时9分 前期: 刚刚学完<零基础学HTML5+CSS3(全彩版)>,准备开始学习JavaScrip ...

  9. 《零基础学HTML5+CSS3(全彩版)》读书笔记

    2019年1月31日星期四 1点 <零基础学HTML5+CSS3(全彩版)>开始全面学习 前提: 11月20日开始学Python,可能因为太累了,也可能遇到了瓶颈,进入了一个迷茫期,1月6 ...

随机推荐

  1. The ninth day

    a good egg 可不是好的鸡蛋的意思哦 它等同于 a good person 大好人的意思 eg: We all think he is a good egg. 我们都认为他是一个好人. I t ...

  2. CSS 笔记之 CSS 选择器

    /*先设置背景再设置前景*/ pre{ background-color: #f8f8f8; border: solid 1px #ccc; border-radius: 3px; overflow: ...

  3. IDEA导入Web项目

    最近尝试着从eclipse.myeclipse转到idea上面来开发. *注:以下仅适用于普通web项目.*  一.导入已有项目 File>Open...>选取自己的项目位置 二.添加ja ...

  4. DOM对象和js对象以及jQuery对象的区别

    DOM对象和js对象以及jQuery对象的区别 DOM对象和js对象以及jQuery对象的区别 一.DOM对象 文档对象模型简称DOM,是W3C组织推荐的处理可扩展置标语言的标准编程接口. DOM实际 ...

  5. aaS软件的必要特征分析,一定是多租户特性吗

    本篇文章讲述了SaaS软件的必要特征一定是多租户特性?对于许多小型企业来说,SaaS是采用先进技术的最好途径,它消除了企业购买.构建和维护基础设施和应用程序的需要 课课家教育平台提醒各位:本篇文章纯干 ...

  6. 磁盘空间满了之后MySQL会怎样

    大多数用户在对于磁盘进行分区的时候都是习惯性的不给系统盘预留很大空间,其实这并不是一个好习惯.因为系统分区并不像我们想象的那样会仅仅安装一个操作系统,系统分区多数还是会承载操作系统主要应用软件安装任务 ...

  7. JSON：使用json_encode函数解析结果为Null

    1.首先,数据库中的json数据是这样的 2.仓鼠使用json_encode()函数进行解析json数据时,显示了一个NULL: 3.这时候,我们需要使用,表示在解析json之前,该json是有语法错 ...

  8. QR分解与最小二乘（转载自AndyJee）

    转载网址:http://www.cnblogs.com/AndyJee/p/3846455.html 主要内容: 1.QR分解定义 2.QR分解求法 3.QR分解与最小二乘 4.Matlab实现 一. ...

  9. nginx缓存批量清除

    研究了一段时间的缓存清除,说说了解的三种方式吧.        1. 原始的只增加缓存模块的,根据访问的路径一条条清除. 根据此方式要进行批量清除的话,必须在设定的缓存目录下通过自己写的程序来读取ng ...

  10. numpy+pandas+matplotlib+tushare股票分析

    一.数据导入 安装tushare模块包 pip install tushare http://tushare.org/ tushare是一个财经数据接口包 import numpy as np imp ...