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. Arraylist JDk1.8扩容和遍历
			
    Arraylist作为最简单的集合,需要熟悉一点,记录一下---->这边主要是注意一下扩容和遍历的过程 请看以下代码 public static void main(String[] args) ...
    
			
    2. 
						
  2. javascript：width，innerwidth和outerwidth的区别
			
    width()方法用于获得元素宽度 innerWidth()方法用于获得包括内边界(padding)的元素宽 outerWidth()方法用于获得包括内边界(padding)和边框(border)的元 ...
    
			
    3. 
						
  3. KMP算法next数组求解
			
    关于KMP算法,许多教材用的是递推式求解,虽然代码简洁,但是有些不好理解,这里我介绍一种迭代求next数组的方法 KMP算法关键部分就是滑动模式串,我们可以每次滑动一个单位,直到出现可能匹配的情况,此 ...
    
			
    4. 
						
  4. js总结001
			
    JSTL 表达式与 EL 语言      http://leon906998248.iteye.com/blog/1502569 2   jquery中$each()方法的使用指南     http: ...
    
			
    5. 
						
  5. Haskell语言学习笔记（91）Comprehension Extensions
			
    Comprehension Extensions 关于解析式的相关语言扩展. List and Comprehension Extensions 24 Days of GHC Extensions:  ...
    
			
    6. 
						
  6. 【384】reduce归纳、map映射、filter筛选 的用法
			
    参考:4. Map, Filter and Reduce — Python Tips 0.1 documentation 参考:Python的functools.reduce用法 Map:映射,对于列 ...
    
			
    7. 
						
  7. 吴裕雄 05-mysql删除数据库
			
    drop database <数据库名>; 例如删除名为 RUNOOB 的数据库:drop database RUNOOB; 使用 mysqladmin 删除数据库你也可以使用 mysql ...
    
			
    8. 
						
  8. k近邻算法(KNN)
			
    k近邻算法(KNN) 定义:如果一个样本在特征空间中的k个最相似(即特征空间中最邻近)的样本中的大多数属于某一个类别,则该样本也属于这个类别. from sklearn.model_selection ...
    
			
    9. 
						
  9. Eclipse 合并GIT分支
			
    合并GIT分支: 1.  切换到主分支: 2.  右击项目——Team——Merge…: 3.  在弹出的Merge框中选择要合并的分支——Merge: 4.  合并后如果出现冲突,右击项目——Tea ...
    
			
    10. 
						
  10. Linux下SVN server 的使用及权限配置
			
    [Linux下SVN server 的使用及权限配置] 参考:http://www.cnblogs.com/heinoc/p/3805779.html
    
			
    11.