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)

<b>加粗</b><br/>

<strong>强调</strong><br/>

<h1>标题</h1><small>小标题</small><br/>

下标：水的化学式：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的更多相关文章
	

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

	


随机推荐
	

    
									
  1. mui init 出现无法引入子页面问题
			
    1. 检查项目中是否重复出现了 mui.init() 函数; mui.init({ subpages: [{ styles: { // top: "44px", top: &quo ...
    
			
    2. 
						
  2. vue:监听数据
			
    1:普通的监听: data () { return { watchNum:1, } }, watch: { watchNum(newValue, oldValue) { console.log(old ...
    
			
    3. 
						
  3. 跨域（一）——CORS机制
			
    Ajax是严格遵守同源策略的,既不能从另一个域读取数据,也不能发送数据到另一个域.但是,W3C的新标准中CORS(Cross Origin Resource Sharing)推进浏览器支持这样的跨域方 ...
    
			
    4. 
						
  4. IP地址的含义
			
    不管是学习网络还是上网,IP地址都是出现频率非常高的词.Windows系统中设置IP地址的界面如图1所示,图中出现了IP地址.子网掩码.默认网关和DNS服务器这几个需要设置的地方,只有正确设置,网络才 ...
    
			
    5. 
						
  5. Spring+Quartz 实现定时任务的配置方法
			
    Spring+Quartz 实现定时任务的配置方法 整体介绍 一.Quartz介绍 在企业应用中,我们经常会碰到时间任务调度的需求,比如每天凌晨生成前天报表,每小时生成一次汇总数据等等.Quartz是 ...
    
			
    6. 
						
  6. [Shell]一张图知道Shell（图）
			
    
			
    7. 
						
  7. Asp.Net WebApi 学习记录（一）
			
    刚创建的 Asp.Net Web Api 项目,在进行简单的测试时发现返回的 JSON 数据很丑陋.与平时我们使用的 JSON.NET 序列化出来的字符串不一样.通过下面的设置就可以了: // 清除所 ...
    
			
    8. 
						
  8. server安装
			
    ArcGIS Server Enterprise10 安装过程 1.ArcGIS Server Enterprise10 安装之前先检查下系统有没有安装IIS.右击电脑--管理--服务和应用程序--I ...
    
			
    9. 
						
  9. 吴裕雄 20-MySQL NULL 值处理
			
    MySQL NULL 值处理我们已经知道 MySQL 使用 SQL SELECT 命令及 WHERE 子句来读取数据表中的数据,但是当提供的查询条件字段为 NULL 时,该命令可能就无法正常工作.为了 ...
    
			
    10. 
						
  10. 关于池化（pooling）理解！！！
			
    网上看到一个池化的解释是: 为了描述大的图像,可以对不同位置的特征进行聚合统计,如计算平均值或者是最大值,即mean-pooling和max-pooling 我的想法是,图像做卷积以后,将图像信息(特 ...
    
			
    11.