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

随机推荐

halcon——缺陷检测常用方法总结（模板匹配（定位）+差分）
引言机器视觉中缺陷检测分为一下几种: blob分析+特征模板匹配(定位)+差分光度立体:halcon--缺陷检测常用方法总结(光度立体) - 唯有自己强大 - 博客园 (cnblogs.com) ...
MySQL进阶：主主复制+Keepalived高可用
Blog:博客园个人概述 mysql主主复制所谓主主复制,即双主备份,或者叫互作主从复制,每台master既是master,又是slave.这种方案,既做到了访问量的压力分流,同时也解决了单点故 ...
C# Net Core 使用 itextsharp.lgplv2.core 把Html转PDF
C# Net Core 使用 itextsharp.lgplv2.core 把Html转PDF 只支持英文(中文我不知道怎么弄,懂的朋友帮我看一下)!!!!![补充:评论区的小伙伴已解决] 引入包it ...
消息队列面试题、RabbitMQ面试题、Kafka面试题、RocketMQ面试题（史上最全、持续更新、吐血推荐）
文章很长,建议收藏起来,慢慢读! 疯狂创客圈为小伙伴奉上以下珍贵的学习资源: 疯狂创客圈经典图书 : <Netty Zookeeper Redis 高并发实战> 面试必备 + 大厂必备 ...
csp-s模拟测试「9.14」A·B·C(三分，贪心)
博客大概咕了很久了......... T1 A 大概推下式子就好了,考试时数据点分治DFS前30点T了,然后后70分因为两数相乘爆long long然后本来可以A掉,就WA零了....... 式子推出 ...
DBA入门相关知识介绍
DBA(database administrator):数据库管理员 DBMS(database management system):数据库管理系 ...
重新整理 .net core 实践篇—————领域事件[二十九]
前文前面整理了仓储层,工作单元模式,同时简单介绍了一下mediator. 那么就mediator在看下领域事件启到了什么作用吧. 正文这里先注册一下MediatR服务: // 注册中间者:Medi ...
Vue（9）购物车练习
购物车案例经过一系列的学习,我们这里来练习一个购物车的案例需求:使用vue写一个表单页面,页面上有购买的数量,点击按钮+或者-,可以增加或减少购物车的数量,数量最少不得少于0,点击移除按钮,会 ...
Go语言Slice作为函数参数详解
Go语言Slice作为函数参数详解前言首先要明确Go语言中实质只有值传递,引用传递和指针传递是相对于参数类型来说. 个人认为上诉的结论不对,把引用类型看做对指针的封装,一般封装为结构体,结构体是值 ...
一次性讲清楚spring中bean的生命周期之二：FactoryBean的前世今生
前言在<spring中FactoryBean是什么bean>一文中,带着小伙伴学习了spring中的FactoryBean,了解了到了FactoryBean其实是一种生产Bean的bea ...

前端基础html（二）