前端 day 30 html 基础一

前情提要:

　　html基础一

　　一:html标签入门

1 HTML结构

1）一个html文件有且只有一个html标签。这个就是HTML的根标签。
2）一个HTML文件主要由两部分组成：文件头和文件体。文件头就是<head>标签包含的部分，它是用来告诉浏览器如何解析HTML文件；文件体就是<body>标签包含的部分，它是用来存放网页显示的内容。

2:注意事项

⦁ 注意事项：
⦁ HTML标签必须成对存在。例如：<b>和</b>；
⦁ HTML开始标签和结束标签中间是标签内容。标签内容可以是文本，也可以是其他标签；
⦁ 标签名对大小写不敏感，<b>和<B>是一样的，但是建议标签名使用小写。
⦁ 标签名是固定的，不能够任意修改；

　　二:基本标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>基本标签</title>

</head>

<body>

<!--标题标签-->

<h1>晚来天欲雪,能饮一杯无.</h1>

<h2>晚来天欲雪,能饮一杯无.</h2>

<h3>晚来天欲雪,能饮一杯无.</h3>

<h4>晚来天欲雪,能饮一杯无.</h4>

<h5>晚来天欲雪,能饮一杯无.</h5>

<h6>晚来天欲雪,能饮一杯无.</h6>

<!--总计6个-->

<!--段落标签-->

<p>年年岁岁花常在,岁岁年年人不同</p>

<p>年年岁岁花常在,岁岁年年人不同</p>

<!--换行增加一条横线-->

<hr/>

<!--换行-->

<br/>

</body>

</html>

　2>　字符实体:

　　三:html属性

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>html标签的属性</title>

</head>

<body bgcolor="blue">

<!--背景颜色-->

<h1 align="center">hehehe</h1>

<font color="pink" size="1">我是女神</font><br/>

<font color="red" size="2">楼上是女神</font><br/>

<font color="yellow" size="3">楼上说的对</font><br/>

<font color="yellow" size="4">赞同</font><br/>

<table border="1">zhangsanlisi</table>

<table border="2">123123</table>

<table border="3">zhangsanlisi</table>

</body>

</html>

　　四:html格式化标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>格式化输出</title>

</head>

<body>

<b>测试粗体</b>

<br/>

<!--加粗--><big>测试大字号</big>3<br/><em>测试着重文字</em>2<br/>

<i>测试斜体</i><br/>

<small>测试小号字</small><br/>

<strong>测试加重语气</strong><br/>

h<sub>2测试下标记</sub>0<br/>

h<sup>2测试上标记</sup>0<br/>

</body>

</html>

　　五:html列表标签

　　　　1:无序列表

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>列表标签</title>

</head>

<body>

<!--无序列表

type属性:指定列表类型

disc:点

square:方块

<circle:圆圈-->

<ul type="circle">

    <li>

        haha

        <p>chifan</p>

        <p>shuijiao</p>

        <h1>dadoudou</h1>

    </li>

    <li>

        nihao

    </li>

    <li>

        fwnzi

    </li>

</ul>

<!--有序列表
type属性:指定类型可以是1,A,a,i,I-->
<ol type="i">
    <li>早乙女</li>
    <li>泰勒</li>

</ol>
</body>
</html>

　2:自定义列表

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>自定义列表</title>

</head>

<body>

<dl>

    <dt>

        cook

    </dt>

    <dd>huoji</dd>

    <dd>mianao</dd>

    <dt>

    <dd>chifan    </dd>

    </dt>

    <dt>xiaoshuo</dt>

    <dd>wenshan</dd>

    <dd>wensha1231233n</dd>

</dl>

</body>

</html>

　　六:html超链接标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>超链接标签</title>

</head>

<body>

<a href="1html标签入门.html">标签入门</a>

<!--

        a标签：超链接标签

            工作原理：

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

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

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

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

           target：指定网页的打开方式

            _self：在当前窗口中打开

            _blank: 在新窗口中打开

    -->

<a href="2%20基本标签.html" target="_blank">基本标签</a>

</body>

</html>

　　七:锚点

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>锚点</title>

    <!--锚点可以直接跳到对应name的位置上-->

</head>

<body>

sadadasdasd<a href='#aa'>asdasdasdasdwadasd</a>asdadadadadqweqead

adadasdasdadfdsfs

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<a name="aa">asdadadaweqeqeqqe

<p>chidahisdasd</p>

</a>

</body>

</html>

　　八:图像

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>图像</title>

 </head>

 <body>

 <a href="5_html列表标签.html"><img src="img/mmexport1550366443161.jpg"></a>

 </body>

 </html>

　　九:表格

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>表格</title>

</head>

<body>

<!--table标签-->

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

    <!--

        border: 设置表格边框的宽度

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

        height：设置表格的最小高度

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

    -->

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

    <caption >测试代码</caption>

    <tr align="left">

        <!--表格头-->

        <th>姓名</th>

        <th>性别</th>

        <th>年龄</th>

    </tr>

    <tr align="left">

        <td>wz</td>

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

        <!--纵向合并单元格-->

        <td>20</td>

    </tr>

    <tr align="left">

        <td>lp</td>

        <td>22</td>

    </tr>

    <tr align="left">

        <td>hehe</td>

        <td>21</td>

    </tr>

    <tr align="left">

        <td>xm</td>

        <td>女</td>

        <td>18</td>

    </tr>

    <tr align="left">

        <td>平均年龄</td>

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

        <!--横向合并单元格-->

    </tr>

</table>

</body>

</html>

　　十:框架

　　　　框架html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>框架</title>

</head>

<frameset rows="100,500,*">

    <frame src="toubu.html"/>

    <frameset cols="200,*">

        <frame src="_菜单.html">

        <frame name="connent" src="_公司简介.html"/>

    </frameset>

    <frameset>

        <frame src="_底部.html">

    </frameset>

</frameset>

</html>

　　　　　　　公司产品html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<p>这是产品</p>

</body>

</html>

　　　　　　　　公司简介html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<p>这是公司公司简介</p>

</body>

</html>

　　　　　　　　加入我们html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<font>zheshineirong</font>

</body>

</html>

　　　　　　　底部html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>底部</title>

</head>

<body>

<p>这是底部</p>

</body>

</html>

　　　　　　菜单html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>菜单</title>

</head>

<body bgcolor="blue">

<ul>

    <li><a href="_公司简介.html" target="connent"><font color="yellow">公司简介</font></a></li>

    <li><a href="_公司产品.html" target="connent">公司产品</a></li>

    <li><a href="_加入我们.html" target="connent">加入我们</a></li>

    <li><a href="_这是版权管理.html" target="connent">版权管理</a></li>

</ul>

</body>

</html>

　　　　　　版权管理html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<font>这是版权管理</font>

</body>

</html>

　　　　　　头部html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>头部</title>

</head>

<body>

<img src="img/mmexport1550366443161.jpg">

</body>

</html>

前端 day 30 html 基础一的更多相关文章

前端开发：css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局前言楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
我的前端之旅--SeaJs基础和spm编译工具运用[图文]
标签:seajs nodejs npm spm js 1. 概述本文章来源于本人在项目的实际应用中写下的记录.因初期在安装和使用Seajs和SPM的时候,有点不知所措的经历.为此,我 ...
[转]前端利器：SASS基础与Compass入门
[转]前端利器:SASS基础与Compass入门 SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让 ...
第四篇前端学习之JQuery基础
一 jQuery是什么? jQuery就是一个JavaScript的库. <1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入 ...
【前端】之JavaScript基础知识
JS 基础知识 JS中,简单类型的数据存储在栈中,复杂类型的数据存储在堆中,其引用存储在栈中 JS中的深拷贝和浅拷贝: 浅拷贝:将对象中的所有简单类型的属性拷贝出来,引用类型属性直接赋值null 深拷 ...
前端(五)-Vue简单基础
1. Vue概述 Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架,发布于2014年2月. 与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用. Vue的核心库只 ...
百度前端技术学院2015JavaScript基础部分代码实现
2. JavaScript数据类型及语言基础(一) 2.1 任务描述创建一个JavaScript文件,比如util.js: 实践判断各种数据类型的方法,并在util.js中实现以下方法: / ...
前端利器：SASS基础与Compass入门
SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让css看起来更像是一门语言,这种特性也被称为“cs ...
通过PHP前端后台交互/通过ajax前端后台交互/php基础传输数据应用/简单的留言版/简单的注册账户/简单的登录页/
前言 PHP 通过上一篇博客,注册账号与登录页面--前后台数据交互跳转转到index主页,接下来进入主页留言板功能,通过ajax向后台传输数据,同时发表留言. 具体的内容分析如下 ...

随机推荐

SqlServer和MySql允许脏读的实现方式，提高查询效率
--Sql Server 允许脏读查询sqlselect * from category with(nolock) --MySql 允许脏读查询sql Mysql没有语法糖,需要原生的sqlSET S ...
W-D-S-UART编程
1.协议原理 2.原理框图 3.开发板底板与核心板图 4.开始配置寄存器 a).使相应I/O引脚配置为UART引脚 b).配置数据发送模式 c).设置为中断或查询模式 d).使能串口缓存 e).流量控 ...
前端之JavaScript笔记1
一 JavaScript的引入方式 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
2018.10.14 bzoj4571: [Scoi2016]美味（主席树）
传送门自认为是一道思想很妙的题. 直接分析问题. 如果没有xxx的干扰直接上可持久化01trie01trie01trie走人. 但现在有了xxx这个偏移量. 相当于把整个01trie01trie01 ...
BeanUtils.populate的方法的作用
BeanUtils位于org.apache.commons.beanutils.BeanUtils下面,其方法populate的作用解释如下: 完整方法: BeanUtils.populate( Ob ...
UVa 11732 "strcmp()" Anyone? （左儿子右兄弟前缀树Trie）
题意:给定strcmp函数,输入n个字符串,让你用给定的strcmp函数判断字符比较了多少次. 析:题意不理解的可以阅读原题https://uva.onlinejudge.org/index.php? ...
第二届普适计算和信号处理及应用国际会议论文2016年 The 2nd Conference on Pervasive Computing, Signal Processing and Applications(PCSPA, 2016)
A New Method for Mutual Coupling Correction of Array Output Signal 一种阵列输出信号互耦校正的新方法 Research of Robu ...
CF1096D Easy Problem(DP)
题意:给出一个字符串,去掉第i位的花费为a[i],求使字符串中子串不含hard的最小代价. 题解:这题的思路还是比较套路的, dp[i][kd]两维,kd=0表示不含d的最小花费,1表示不含rd ...
（原创）Hibernate persistentSet的remove（）方法不起作用
情景再现:hibernate 多对多 User对象(员工).Educate对象(培训课程),我想干的事情是想把第三方表格user_educate中的员工_培训课程中的一行信息删掉(删掉员工所选的一门 ...
jvm 中的 ”永生代“
“方法区” 主要存储的信息包括:常量信息,类信息,方法信息,而且是全局共享的(多线程共享): jvm 有多种实现方式(不同的厂商): 并不是所有的jvm 都有永生代的概念: 通常情况下, 很多人把 “ ...

前端 day 30 html 基础一

前端 day 30 html 基础一的更多相关文章

随机推荐

热门专题