一、html的概念

1、概念：超文本标记语言。

2、超文本，超链接；超级不仅有文本，图片，还有音频，视频等。

3、html:作用: 显示服务器端的响应结果。

二、互联网三大基石

1、url:统一资源定位符，如：www.baidu.com

2、http协议：https://

3、html：显示页面

三、文档结构

<!DOCTYPE html>  <!--文档的类型    h5-->

<html>  <!--网页的开始标签-->

   <head>  <!--文档的标题，字符编码格式....-->

      <meta charset="utf-8" />

      <title>第一个网页</title>

   </head>

   <!--显示的内容-->

   <body>

      <h1>HelloWorld</h1>

   </body>

</html><!--结束标签-->

四、常用标签

4.1梗概

1、行级元素：根据元素的大小决定所占用的空间。

   img,a,embed,audio,video

2、块级元素：独占一行

   h1-h6,p,br,hr,ul,ol,dl

3、文本标签

   h1-h6, <p>,<br/>,<hr/>,<pre>

4、图片标签

  <img  src=””  width=”” height=”” title=””  alt=””/>

5、音频、视频

<embed src=”” width=”” constrols=”constrols”></embed>

<audio src=”” width=”” height=”” constrols=”constrols” > <audio>

<video src=”” width=”” height=”” constrols=”constrols” ></video>

6、超链接

 <a  href=””   target=””>XXXXXXXXXXXXXXX</a>

7、锚链接

   <a   name=” goods”>XXXXX</a>

   <a href=”#goods”>YYYYY</a>

   <a href=”index.html#goods”>zzzzzzzzzz</a>

8、列表标签

（1）       无序列表    <ul type=”disc”> <li></li></ul>

（2）       有序列表    <ol type=”A”><li></li></ol>

（3）       定义列表   <dl>  <dt></dt> <dd></dd></dl>

4.2 head标签中子标签

meta标签 ：描述文档，定义文档的关键词

title标签:文档的标题

base标签 ：url地址

style:样式

script:脚本

link:链接

4.2.1 title的使用

<title>第一个网页</title>

4.2.2 meta的使用：定义了与文档相关链的名称/值（键值对）

<meta charset="utf-8" /><!--单标签 -->

<meta http-equiv="content-type"  content="text/html; charset=UTF-8" />

<meta name="keywords"  content="第一个网页,html文档" />

<meta name="description" content="第一个网页........." />

三秒钟后自动跳转到url所指定的网址

<meta http-equiv="refresh" content="3;url=https://www.baidu.com" />

4.2.3 base的使用:为页面上所有的链接规定默认地址

<base href="https://www.baidu.com" />

<!--<base target="_self" />-->  覆盖自身页页

<base target="_blank" /> 新建页面打开

<a href="">百度</a>     

<a href ="">淘宝</a>

<img src=”/a.jpg”/>   路径为   https://www.baidu.com/a.jpg

4.2.4 style：用于为html定义样式信息

<style type="text/css">

    body{

        background-color: blueviolet;

    }

    h1{

        color: yellow;

    }

</style>

4.2.5 script:用于定义客户端的脚本信息

<script type="text/javascript">

      function test(){

         alert("helloworld");

      }

   </script>

页面加载时test()被调用

<body onload="test();">

4.3 body中的子标签

4.3.1 文本操作的标签

1、标题标签 h1-h6：块级标签

黑体，加粗，字号放大，自动换行

     <h1>标题标签h1</h1>

     <h2>标题标签 h2</h2>

     <h3>标题标签 h3</h3>

     <h4>标题标签 h4</h4>

     <h5>标题标签 h5</h5>

     <h6>标题标签 h6</h6>

2、段落标签 p ：前后自动换行块级标签

3、加粗 strong ,倾斜 em

4、段内换行 <br/>

5、水平线 <hr/>

6、预格式化文本 <pre>

4.3.2 图片，音频，视频

1、图片: img

【1】  属性 :src  图片的路径(1可以是网络地址，  2.本地地址)

<img src="https://www.baidu.com/img/bd_logo1.png" width="200px" /><br />

<img src="https://www.baidu.com/img/bd_logo1.png" width="30%" /><!--浏览器的页面大小--><br />

<img src="img/SXT_2470.jpg" width="300px"/>

【2】属性:width ,heigh  (1,像素值,2，百分比<浏览器页面的百分比>  )

只写一个width或者heigh,使用图片自动配置比例显示

【3】       属性:title  图片的标题，

【4】       属性:alt:图片的替换文本  搜索引擎所使用

<img  src=””  width=””  height=””  title=””  alt=”” />

2、音频

embed:音频，视频，flash动画

<embed src="video/青花瓷.mp3" height="200px" width="200px"></embed>

<embed src="video/1382329602.swf"></embed>

<embed src="video/蜗牛与黄鹂鸟.MP4" width="200"></embed>

audio:专门的音频文件

<audio src="video/青花瓷.mp3" controls="controls"></audio>

3、视频

video:专门播放视频

  <video src="video/蜗牛与黄鹂鸟.MP4" width="300" controls="controls"></video

4.3.3 a标签

1、href: 指定一个url地址

2、target:规定在何处打开链接文档

默认:_self: 在自身打开

_blank:新建页面打开

_top:在顶级页面打开

framename：在框架集中打开

用法一：用于超链接从一个页面跳转到另外一个页面

<a href="https://www.baidu.com">百度</a><br /><!--默认打开方式是_self-->

<a href="https://www.taobao.com" target="_blank">淘宝</a>  <!--target属性，决定打开方式-->

<a href="body_demo.html">打开本站中的页面</a>

用法二：锚链接用于链接到页面中的相应位置

<h2><a name="aichi">爱吃</a></h2> 需要锚链接的位置

<a href="#aichi">爱吃</a> href写上锚链接的名称

<a href="index.html#aichi">爱吃</a>

4.3.4 列表

1、无序列表

<ul type="disc">  <!--type  :circle  空心圆点  square  实心方块    disc 实心圆点   type=-->

     <li>用户注册</li>

     <li>余票查询</li>

     <li>用户登录</li>

     <li>我的保险</li>

</ul>

注意事项： type=”1”,火狐和IE中以有序列表的形式进行显示，谷歌不识别type=”a”,从a开始

2、有序列表

定义列表通常用于图文混排，图片放到 dt中，文本描述信息放到dd中，dd可以有多个

<dl>

     <dt><a href="#"><img src="img/photo_01.jpg" title="时尚女装" alt="全国包邮！韩版修身长袖T恤打底衫纯棉圆领T恤"/></a></dt>

     <dd><a href="#">一口价：49.00</a></dd>

     <dd>全国包邮！韩版修身长袖T恤 打底衫 纯棉圆领T恤</dd>

</dl>

五、html实体

html中的预留字符被替换为实。

[1]&nbsp;空格

[2]&emsp;一个tab键的距离

[3]&lt;小于号

[4]&gt;大于号

[5]&copy;版权符号

[6]&quot;双引号

六、表格

6.1 格式

<table border="1" width="50%" cellpadding="20" cellspacing="30">

    <tr>

        <td>出发地</td>

        <td>目的地</td>

        <td>8月 22日</td>

    </tr>

    <tr>

        <td>北京</td>

        <td>成都</td>

        <td><a href="#">123</a></td>

    </tr>

    <tr>

        <td>北京</td>

        <td>拉萨</td>

        <td><a href="#">28</a></td>

    </tr>

</table>

6.2 表属性

1、<table></table>

table标签中的属性:

border:边框的宽度

width:表格的宽度

cellpadding:边框与内容之间的空白

cellspacing:格与格之间的空白

2、行<tr></tr>
3、单元格<td></td>
4、表格的表头部分通常是居中，加粗显示

<tr>

    <th>出发地</th>

    <th>目的地</th>

    <th>8月 22日</th>

</tr>

5、表格进行分区块

<table border="1" width="400">

    <thead>

        <tr>

            <td colspan="2"><img src="img/newS.gif" /></td>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td><img src="img/register.jpg" /></td>

            <td><a href="#">新用户注册</a></td>

        </tr>

    </tbody>

    <tfoot>

        <tr>

            <td colspan="2"><img src="img/ico_tltel.gif"/></td>

        </tr>

    </tfoot>

</table>

td的属性:

(1)colspan:跨列，横跨的列数<td colspan="4">北京尚学堂C02学生成绩表</td>

(2)rowspan:跨行，横跨的行数<td rowspan="4">2</td>

(3)align:表格中内容的水平对齐方式 left, center, right

(4)valign:表格中内容的垂直对齐方式 top , middle , bottom

七、表单元素

<form></form>属性:

action：提交数据的处理地址

method：以什么方式进行提交 get ,post

表单元素标签：<input />

最重要的属性:type

属性值:

text 文本框

password 密码框

radio 单选按钮

checkbox多选按钮

file文件上传

button：普通按钮

submit:提交按钮

reset:重置

image:图片 –》与submit相同

属性 readonly 属性值readonly

属性 checked 属性值 checked

属性 id 属性值 自定义

属性 name 属性值 自定义

案例

<form action="" method="get"> <!--表单--> 

    用户名:<input type="text" name="username" id="username" value="zhangsan"/> <br /> <!--文本框 -->

    密码:<input  type="password" maxlength="4" /><br /><!--密码框-->

    性别:<input type="radio" name="sex" checked="checked">男 <input  type="radio" name="sex"/>女<br />

    你的兴趣爱好<input  type ="checkbox"/>蓝球

    <input  type ="checkbox"/>网球

    <input  type ="checkbox"/>足球

    <input  type ="checkbox"/>台球<br />

    <input type="file" /><br />

    <input  type="button" value="按钮" onclick="test();"/>

    <input type="submit" value="提交" />

    <input type="reset" value="重置" /><br/>

    <textarea rows="8" cols="40" readonly="readonly">请认真阅读本协议

    </textarea><br />

    <input type="image" src="img/next.jpg" /><br />

    <select name="cardtype">

        <option value="0">二代身份证</option>

        <option value="1">护照</option>

    </select>

</form>

action ：

%E6%9D%8E%E5%9B%9:汉字的十六进制

http://127.0.0.1:8020/test_html_02/input_2.html?wd=%E6%9D%8E%E5%9B%9B&pwd=123212323&uname=zhangsan

?之前是action 中的请求地址 ,action =””提交到本页面

?之后是请求参数 

http://127.0.0.1:8020/test_html_02/input_2.html?wd=sxt&pwd=31231&uname=zhangsan

多个请求参数之间使用&连接

wd:是百度的搜索框的name

sxt:是搜索框中的value

form中的method 默认是get

post：  

(1)相对比较安全

(2)数据大小默认不受限制

(3)效率低，没有缓存

 get：

(1)     不安全

(2)     数据比较小，因为url地址栏有限制

(3)     效率高  有缓存

label 标签的作用：用户良好的体验度

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

<form action="" method="post">

         <label for="username">用户名:</label><input type="text" id="username" name="wd" /><!--文本框-->

         密码 :<input type="password" name="pwd"  />

         性别:<input  type="radio" name="sex" id="male"/><label for="male">男</label>

             <input type="radio" name="sex" id="famale"/><label for="famale">女</label>

         <input  type="hidden" value="zhangsan" name="uname"/>

         <input type="submit" id="" name=""  value="提交"/>

   </form>

八、框架集

网页布局: (1)表格布局table (2)框架布局 (3)div+css布局

框架集 frameset

<frameset rows="20%,50%,*">  分三行  cols=” 20%,50%,*”分三列

      <frame name="left"  src="index.html" scrolling="no" noresize="noresize"/>

      <frame name="middle" src="register.html" />

      <frame name="right" src="input_2.html" />

   </frameset>

内联框架 iframe

<body>

      <iframe src="top.html" width="100%" height="190" scrolling="no" frameborder="0">

         <p>你的浏览器无法解析iframe内联框架</p>

      </iframe>

      <iframe src="left.html" width="200" height="500" frameborder="0">

         <p>你的浏览器无法解析iframe内联框架</p>

      </iframe>

         <iframe src="right.html" width="1000" height="500" scrolling="no" name="right" frameborder="0">

         <p>你的浏览器无法解析iframe内联框架</p>

      </iframe>

   </body>

框架集与内联框架共有的属性

  src:  链接地址

  name: 框架的名称

  scrolling：是否显示滚动条  yes,no,auto

  frameborder：框架的边框

  widthà宽度,  px,%

前端基础html（二）的更多相关文章

前端基础——HTML(二)
HTML标签标题标签<h1>.<h2>.<h3>.<h4>,标题标签之间是不能嵌套的,下一级标题与上级标题之间通过同级关于书写,下级标题解释说明的是 ...
web前端学习python之第一章_基础语法(二)
web前端学习python之第一章_基础语法(二) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...
web前端基础知识及快速入门指南
web前端基础知识及快速入门指南做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...
html css 前端基础学习方法及经验分享
前言: 入园第一天,想分享一点儿前端基础html css 的学习方法和一些经验给热爱前端,但是不知道从哪儿开始,依旧有些迷茫的新手朋友们.当然,适合每个人的学习方式不同,以下所讲的仅供参考. 一.关于 ...
前端工程化（二）---webpack配置
导航前端工程化(一)---工程基础目录搭建前端工程化(二)---webpack配置前端工程化(三)---Vue的开发模式前端工程化(四)---helloWord 继续上一遍的配置,本节主要记录 ...
前端基础面试题(JS部分)
1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String 值类型:数值.布尔值.null.und ...
前端基础之DOM和BOM
前端基础之DOM和BOM JavaScript分为 ECMAScript,DOM,BOM. BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏 ...
tableview前端基础设计（初级版）
tableView前端基础设计实现的最终效果操作目的:熟悉纯代码编辑TableView和常用的相关控件SearchBar.NavigationBar.TabBar等,以及布局和基本功能的实现. 一 ...
JS BOM DOM对象 select联动计时器时间 css操作节点(标签 ) 查找标签 {前端基础之BOM和DOM}
前端基础之BOM和DOM 前戏到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我 ...
前端基础之BOM和DOM day52
前端基础之BOM和DOM 前戏到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互 ...

随机推荐

反汇编EXE添加一个启动时的消息框
反汇编EXE添加一个启动时的消息框最近有一个要修改PE文件的需求,就先从EXE文件下手吧,我也是初学一个小时而已,不过之前接触过一点汇编罢了,这篇文章算是个DEMO,主要的思路是将其反汇编得到汇编代 ...
Redis-持久化策略
redis是一个内存数据库,一旦服务器宕机,内存中的数据将全部丢失.所以,对 Redis 来说,实现数据的持久化,避免从后端数据库中进行恢复,是至关重要的. 目前,Redis 的持久化主要有两大机制, ...
centos7 安装 bbr加速
脚本安装 1 查看内核版本 # [root@os]# uname -a Linux os 3.10.0-1127.13.1.el7.x86_64 x86_64 x86_64 x86_64 GNU/Li ...
JVM面试题（史上最强、持续更新、吐血推荐）
文章很长而且持续更新,建议收藏起来,慢慢读! 高并发发烧友社群:疯狂创客圈(总入口) 奉上以下珍贵的学习资源: 疯狂创客圈经典图书 : 极致经典 + 社群大片好评 < Java 高并发三部 ...
Windows操作系统添加永久静态路由
1.比如:添加一条去往 10.10.10.0/24网段的静态路由,指定去往此网段的路由都走 172.20.153.254网关 route -p add 10.10.10.0 mask 255.255. ...
精通LED驱动芯片HT1632C指令与编程应用
HT1632C是一款很常用的LED(数码管或点阵)驱动芯片,虽然官方已经宣布该芯片明年(2021年)即将寿终正寝(停产),但是相同厂家生产的同系列芯片的控制方式通常是相同的(事实上,大多数LED驱动芯 ...
OSPF 路由协议
OSPF路由协议目录一.OSPF路由协议概述 1.1.内部网关和外部网关协议 1.2.OSPF的工作过程 1.3.OSPF的基本概念二.OSPF 数据包类型 2.1.OSPF数包 2.2.OSP ...
kubelet分析-csi driver注册源码分析
kubelet注册csi driver分析 kubelet注册csi driver的相关功能代码与kubelet的pluginManager有关,所以接下来对pluginManager进行分析.分析将 ...
Devexpress-WPF初体验
最近使用wpf devexpress做一个wpf小项目,中间遇到了一些问题,这里记录下,同时也跟大家分享分享 1.devexpress安装 devexpress提供了很多控件,特别是各种形式的数据列表 ...
使用VS2017开发APP中使用VUE.js开发遇到打包出来的android文件在低版本的android（4.3）中无法正常使用
使用VS2017开发VUE的APP应用遇到的问题集合 1, 打包出来的apk文件在Android 6.0版本以上手机可以正常打开,在Android 4.3版本手机上无法打开原因:一开始猜测是不是V ...

前端基础html（二）