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公司笔试后靠记忆记下来的,经过整理献给与我 ...

随机推荐

【Noip模拟 20161005】友好城市
问题描述小ww生活在美丽的ZZ国.ZZ国是一个有nn个城市的大国,城市之间有mm条单向公路(连接城市ii.jj的公路只能从ii连到jj).城市ii.jj是友好城市当且仅当从城市ii能到达城市jj并 ...
C# 2018.9.17
C#的优点:1,不会有运行时崩溃,解决了C++的痛点一,难预防,难查错2,使用文件不需要包含进来,只需要using namespace即可,解决了C++的痛点二,包含复杂,路径复杂,编译复杂3,编译速 ...
Shell条件表达式
Shell编程中经常需要判断文件状态.字符串是否相等以及两个数值大小等情况,基于这些比较结果再做执行相关操作.本文主要讲述文件状态.字符串.数值大小的判断比较方法. 文件状态判断文件状态的判断通常使 ...
Linux下GDB调试简单示例
这里介绍对文件first.c的基本GDB调试操作,只有部分命令,只是一个示例,运行环境为装有gcc编译器和gdb调试器的Linux环境,基本GDB调试命令如下表: 命令 ...
SQLServer 的数据分页:
假设现在有这样的一张表:CREATE TABLE test( id int primary key not null identity, names varchar(20))然后向里面插入大约1000 ...
升级nodejs的方法（3）
第一种找到目录删除再重装第二种安装模块n n stable 第三种 nvm https://blog.csdn.net/weibo392/article/details/77368550 ...
关于三层(dao,serviece,servlet)
在登陆校验中, dao:返回的是resultset 对象,就是 ps.executeQuery(需要强化的是jdbc的具体的流程) 其中的数据库连接时可以自己写可以通过工厂类可以通过数据库的连接 ...
js对象和jquery对象互相转换
javascript对象转成jquery对象 jquery对象转成javascript对象
Jetty 与 Tomcat 的比较
Tomcat 和 Jetty 都是作为一个 Servlet 引擎应用的比较广泛,可以将它们比作为中国与美国的关系,虽然 Jetty 正常成长为一个优秀的 Servlet 引擎,但是目前的 Tomcat ...
linux安装mysql5.1
一.卸载mysql 1.检测系统是否已经安装过mysql或其依赖,若已装过要先将其删除 # yum list installed | grep mysql mysql-libs.i686 ...

day 30 HTML

day 30 HTML的更多相关文章

随机推荐

热门专题