2016.1.20 html5之html第一天-优快云博客

本文链接：https://blog.youkuaiyun.com/weiyumeizi/article/details/50551485

本文将详细介绍HTML块元素与内联元素的区别，HTML <div>元素的用途，以及如何使用CSS进行样式设置。同时，文章还讲解了HTML <span>元素的特性，以及如何通过CSS实现不同的样式效果。

开发工具 Intellij IDEA

<p> 段落</p>
<br/>空格
<a href="www.baidu.com"></a>建立超链接
<a href="hreft.html">打开本地</a>//在同一工程下新建hreft.html->在body中输入跳转后显示的内容->再回到原来的html下，输入超链接hreft.html
hello jikexueyuan.<br/>换行

<body bgcolor="aqua" >背景颜色
<h1 align="center">标题一<h1/>设置字体
<a href="hreft.html" target="_self">打开本地</a>//只能指向网页自己
<a href="hreft.html" target="_blank">打开本地</a>//不变
<h2 class="HID">标题二</h2>//标题，class是标签
<b>定义粗体文字</b>
<big>定义大号文字</big>
<em>定义着重文字</em>
<i>定义斜体文字</i>
<small>定义小号文字</small>
<strong>定义加重语气文字</strong>
<sub>定义下标字</sub>
<sup>定义上标字</sup>
<ins>定义插入字</ins>
<del>定义删除字</del>

列表
无序列表
<ul>
<li>苹果</li>
<li>橘子</li>
<li>香蕉</li>
</ul>

<ul type="square">图标的形状，圆的，空心圆的，方的

有序列表
<ol>
<li>苹果</li>
<li>橘子</li>
<li>香蕉</li>

</ol>

<ol type="A">//可有A，即A，B，C，D
a,有a,b,c,d

<body >

<ul type="square">
    <li>ios</li>
    <li>android</li>
    <li>html5</li>
    <li>swift</li>
</ul>

<ol type="A">
    <li>ios</li>
    <li>android</li>
    <li>html5</li>
    <li>swift</li>
</ol>
<ul>
    <li>宠物</li>
        <ul>
            <li>猫</li>
            <li>狗</li>

        </ul>
</ul>
<ol>
    <li>人类</li>
    <ol>
        <li>英国人</li>
        <li>中国人</li>
    </ol>
    <li>植物</li>
</ol>
<dl>
    <dt>hello world</dt>
    <dd>每一门新的语言都会打印一个hello world</dd>
    <dt>hello world</dt>
    <dd>每一门新的语言都会打印一个hello world</dd>
    <dt>hello world</dt>
    <dd>每一门新的语言都会打印一个hello world</dd>
</dl>

 <title>块元素</title>
    <link rel="stylesheet" type="text/css" href="mycss.css">
    <style type="text/css">
        span{
            color :aqua;
        }
    </style>

</head>
<body  >
<!--块-->
<p>大家好！</p>
<h1>大家好</h1>
<b>这是一个加重标签</b>
<a>这是一个超链接标签</a>
<div id="divid">
    <p>hello jiekexueeyuan</p>
    <a> 点击我啊</a>
</div>
</body>
<div id="divspan">
    <p><span>这是一个测试效果</span>span是一个什么样子</p>
</div>

注释 ""ctrl"+"/"是注释

1、HTML块元素
块元素在显示2时，通常会以新行开始，如<h1>;<p>;<ul>
2、HTML内联元素
通常不会以新行开始，如：<b>;<a>;<img>

3、HTML<div>元素
<div>元素也被称为块元素，主要是组合HTML元素的容器

4、HTML<span>元素
<span>元素是内联元素，可做文本的容器

<link rel="stylesheet" type="text/css" href="mycss.css">
类标签类型样式

#divid p{//只显示p标签的颜色
color:blueviolet;
}