day 30 HTML

HTML:

超文本标记语言（Hyper Text Markup Language）

Html基本结构

<!DOCTYPE html>

<html>    <!-- 定义HTML文档 -->

<!--  注释 -->

<head>

    <meta charset="UTF-8">

    <title>helloworld</title>

</head>

<body>   <!-- 定义文档主题 -->

    <h1>标题1</h1>

    <h2>标题2</h2>

    <h6>标题6</h6>

    <br><br/>    <!-- 插入折行, 换行 -->

    <hr>         <!-- 插入水平线 -->

    <p>定义段落</p>

    <p>曲曲折折的荷塘上面弥漫着甜甜的叶子</p>

    <p>曲曲折折的荷塘上面弥漫着甜甜的叶子</p>

    <p>曲曲折折的荷塘<br>上面弥漫着甜甜的叶子</br></p>

</body>

</html>

基本标签

字符实体 （区分大小写）

格式化标签

标题标签： <h1>标题</h1> (h1--h6)

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

定义水平线： <hr/>

字体标签: <font color=red size="1">Python</font> (size范围 1--7)

下标：水的化学式：H<sub>2</sub>O<br/>

上标：X的平方：X<sup>2</sup><br/>

<pre>

保持原格式不变

             静 夜 诗
    床前明月光，疑似地上霜；
    举头望明月，低头思故乡；
</pre>

有序列表，无序列表

有序列表 <ol>

　　type属性：指定列表类型。它的值可以是：1、a、A、i、I

无序列表 <ul>　

　　type属性：指定列表类型

            disc: 点

            square: 方块

            circle: 圆圈

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <!-- 无序列表

        type属性：指定列表类型

            disc: 点

            square: 方块

            circle: 圆圈

    -->

    你喜欢的菜：

    <ul type="circle">

        <li>宫保鸡丁</li>

        <li>黄焖鸡</li>

        <li>包角</li>

    </ul><br/>

    <!-- 有序列表

          type属性：指定列表类型。它的值可以是：1、a、A、i、I

    -->

    你喜欢的明人：

    <ol type="A">

        <li>刘德华</li>

        <li>刘明星</li>

        <li>凤姐</li>

    </ol><br/>

    <!-- 定义标签 -->

    <dl>

        <dt>Coffee</dt>

        <dd>Black hot drink</dd>

        <dt>Milk</dt>

        <dd>White cold drink</dd>

    </dl>

</body>

</html>

列表

<body>

    <dl>

        <dt>car</dt>

            <dd>玛莎拉蒂</dd>

            <dd>本田</dd>

            <dd>奔驰</dd>

        <dt>tea</dt>

            <dd>普洱</dd>

            <dd>龙井</dd>

    </dl>

</body>

超链接标签

<a href="https://www.baidu.com" target="_self">百度一下</a>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <!--

        a标签：超链接标签

            工作原理：

            1）如果a标签的href属性是以http开头，那么浏览器就会启用http协议解析该网址内容；

            2）如果a标签的href属性是以其他协议开头，那么浏览器就会检查注册表中是否存在处理该协议的软件。

                如果存在就打开软件处理该协议。

            3）如果a标签是以file协议开头，那么浏览器就会在当前目录下查找是否存在指定资源；

           target：指定网页的打开方式

            _self：在当前窗口中打开

            _blank: 在新窗口中打开

    -->

    <a href="http://www.oldboyedu.com" target="_blank">老男孩</a>

</body>

</html>

锚点定位

<body>

<pre>

    type <a href="#aa">CorruptInputError</a>

<!-- 定义锚点

        name: 指定锚点名字

 -->

<a name="aa">type CorruptInputError</a>
   .....很多正文

    </pre>

</body>

图像

<body>

    <a href="http://www.jd.com"><img src="img/time2.jpg" alt="这是美女"/></a>

</body>

图像由<img>标签定义

src属性用于指定图像的位置

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。

表格

<thead>定义表格头，可以没有；<tfoot>定义表格底部，也是可以没有；<tbody>定义表格体，至少有一个

<table border="1" width="400" height="200" cellspacing="0" >
cellspacing:设置每一个单元格之间的空白
border: 设置边框的宽度

<caption>学员成绩表</caption>  表格的标题

rowspan：跨行，即指定单元格向下合并；

colspan：跨列，即指定单元格向右合并

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <!--<h1>学员成绩表</h1>-->

    <!--

        border: 设置表格边框的宽度

        width: 表格的宽度，以像素为单位

        height：设置表格的最小高度

        cellspacing：设置每一个单元格之间的空白

    -->

    <table border="1" width="500" height="200" cellspacing="0" align="left">

        <!-- 表格标题 -->

        <caption>学员成绩表</caption>

        <thead>

            <!--

                align: 设置行或列的对其方式，它的值可以是：

                    left左对齐、center居中、right右对齐、justify两边对齐

            -->

            <tr align="left">

                <!-- 表格头 -->

                <th>姓名</th>

                <th>性别</th>

                <th>成绩</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td align="center">小宝</td>

                <td rowspan="3">男</td>

                <td>100</td>

            </tr>

            <tr align="center">

                <td>大宝</td>

                <!--<td>男</td>-->

                <td>90</td>

            </tr>

            <tr>

                <td>大大宝</td>

                <!--<td>男</td>-->

                <td>95</td>

            </tr>

            <tr>

                <td>平均成绩:</td>

                <td colspan="2">95</td>

                <!--<td></td>-->

            </tr>

        </tbody>

    </table>

</body>

</html>

示例

框架标签

day 30 HTML的更多相关文章

总结30个CSS3选择器
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 ;; ...
值得收藏！国外最佳互联网安全博客TOP 30
如果你是网络安全从业人员,其中重要的工作便是了解安全行业的最新资讯以及技术趋势,那么浏览各大安全博客网站或许是信息来源最好的方法之一.最近有国外网站对50多个互联网安全博客做了相关排名,小编整理其中排 ...
CSharpGL(30)用条件渲染(Conditional Rendering)来提升OpenGL的渲染效率
CSharpGL(30)用条件渲染(Conditional Rendering)来提升OpenGL的渲染效率当场景中有比较复杂的模型时,条件渲染能够加速对复杂模型的渲染. 条件渲染(Conditio ...
30分钟学会XAML
1.狂妄的WPF 相对传统的Windows图形编程,需要做很多复杂的工作,引用许多不同的API.例如:WinForm(带控件表单).GDI+(2D图形).DirectX API(3D图形)以及流媒体和 ...
Shell脚本编程30分钟入门
Shell脚本编程30分钟入门转载地址: Shell脚本编程30分钟入门什么是Shell脚本示例看个例子吧: #!/bin/sh cd ~ mkdir shell_tut cd shell_t ...
ViEmu 3.6.0 过期解除30天限制的方法
下载:链接: http://pan.baidu.com/s/1c2HUuWw 密码: sak8 删除下面2个地方 HKEY_CLASSES_ROOT\Wow6432Node\CLSID\{B9CDA4 ...
AlloyTouch全屏滚动插件发布--30秒搞定顺滑H5页
原文链接:https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-FullPage-Plugin 先验货插件代码可以在这里找到. 注意,虽然是 ...
C#求斐波那契数列第30项的值（递归和非递归）
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
JS组件系列——又一款MVVM组件：Vue（一：30分钟搞定前端增删改查）
前言:关于Vue框架,好几个月之前就听说过,了解一项新技术之后,总是处于观望状态,一直在犹豫要不要系统学习下.正好最近有点空,就去官网了解了下,看上去还不错的一个组件,就抽空研究了下.最近园子里vue ...
精选30道Java笔试题解答
转自:http://www.cnblogs.com/lanxuezaipiao/p/3371224.html 都是一些非常非常基础的题,是我最近参加各大IT公司笔试后靠记忆记下来的,经过整理献给与我 ...

随机推荐

Python中fileinput模块使用方法
fileinput模块提供处理一个或多个文本文件的功能,可以通过使用for循环来读取一个或多个文本文件的所有行.python2.7文档关于fileinput介绍:fileinput fileinp ...
TCP/IP网络协议的通俗理解，SOCKET，HTTP，SOAP
TCP/IP,HTTP,SOAP等协议之区别术语TCP/IP代表传输控制协议/网际协议,指的是一系列协议.“IP”代表网际协议,TCP和UDP使用该协议从一个网络传送数据包到另一个网络.把IP想 ...
npm run dev 报错：missing script:dev
一.问题: 今天在运行vue项目时,在mac终端输入npm run dev,结果报错: 翻译是: npm错误:缺少script:dev npm错误:完整路径见:users/mymac/ .npm/_l ...
Nodejs 第一站
Node.js 就是运行在服务端的 JavaScript. Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台. Node.js 是一个事件驱动I/O服务端JavaSc ...
ubuntu去除带锁文件的锁 sudo chown 用户名目标文件夹/ -R
sudo chown 用户名目标文件夹/ -R sudo chown han dir/ -R
python类中方法加单下划线、双下划线、前后双下滑线的区别
首先看一段代码: class Foo(): def __init__(self): print "__init__ method" def public_method(self): ...
unity 三种注入示例
/* * 演示Unity 注入 * */ using Microsoft.Practices.Unity; using System; namespace Unity.Property.Inject ...
C# DataTable to Html
原地址:忘了 /// <summary> /// DataTable 转换为 Html /// </summary> /// <param name="dt&q ...
Appium appium 安装不了
npm --registry http://registry.cnpmjs.org install -g appium使用npm的国内镜像可以安装,速度很不错.以后不想输入ip的话可以输入以下命令:n ...
第三章，DNA序列的进化演变
31.前言 3.1.两个序列间的核苷酸差异来自同一祖先序列的两条后裔序列,之间的核苷酸的差异随着时间的增加而变大.简单的计量方法,p距离 3.2.核苷酸代替数的估计 3.3.Jukes和Cantor ...

day 30 HTML

day 30 HTML的更多相关文章

随机推荐

热门专题