一、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的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互 ...

随机推荐

移动通信-5G
1.移动通信的发展历程: "G"代表一代,每10年一个周期 1G 2G 3G 4G 5G 1980s 1990s 2000s 2010s 2020s 语音短信社交应用在线.互 ...
面试官：一个TCP连接可以发多少个HTTP请求？
曾经有这么一道面试题:从 URL 在浏览器被被输入到页面展现的过程中发生了什么? 相信大多数准备过的同学都能回答出来,但是如果继续问:收到的 HTML 如果包含几十个图片标签,这些图片是以什么方式.什 ...
『无为则无心』Python基础 — 3、搭建Python开发环境
目录 1.Python开发环境介绍 2.Python解释器的分类 3.下载Python解释器 4.安装Python解释器 5.Python解释器验证 1.Python开发环境介绍所谓"工欲 ...
有模有样解决Flutter里Webview无法访问HTTP页面的问题
探索过程 Android9(好像是吧)开始谷歌就默认不让开发者访问不安全HTTP内容了,如果非要用HTTP,那必须在networkSecurityConfig里配置cleartextTrafficPe ...
ES6中的Module与Interator
小编今天在用Vue做项目的时候,发现组件中有import和export,刚好今天看到相关的语法介绍和一些实例,下面小编就和大家一起进步.对于模块化规范,在es6出现之前,有以下三种规范,分别是Comm ...
计算机网络参考模型与5G协议
计算机网络参考模型与5G协议目录一.分层思想 1.1·2:分层思想概念 1.2.优点二.OSI七层参考模型三.TCP/IP协议族 3.1.TCP/IP协议族的组成 3.2.OSI模型与TCP/ ...
python之str 字符串
str,字符串,有序的,存储多个字符,不可修改,通过下标值访问快捷方式 1, 定义一个空字符串 2,定义一个非空字符串 3,索引,又名下标值 4,切片与延长 5,转义字符 6, python 属于面向 ...
ceph-csi源码分析（5）-rbd driver-nodeserver分析（上）
更多 ceph-csi 其他源码分析,请查看下面这篇博文:kubernetes ceph-csi分析目录导航 ceph-csi源码分析(5)-rbd driver-nodeserver分析(上) 当c ...
Unity MVC思想
MVC框架概念MVC全名是Model View Controller,是模型(Model)-视图(View)-控制器(Controller)的缩写,一种软件设计典范,用一种业务逻辑.数据.界面显示分离 ...
43、uniq命令
相邻去重 uniq -c 表示相邻去重并统计: 1.uniq介绍: uniq是对指定的ascii文件或标准输入进行唯一性检查,以判断文本文件中重复出现的行,常用于系统排查及日志分析: 2.命令格式: ...

前端基础html（二）