一、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的概念

二、互联网三大基石

三、文档结构

四、常用标签

4.1梗概

4.2 head标签中子标签

4.2.1 title的使用

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

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

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

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

4.3 body中的子标签

4.3.1 文本操作的标签

4.3.2 图片，音频，视频

1、图片: img

2、音频

3、视频

4.3.3 a标签

4.3.4 列表

1、无序列表

2、有序列表

五、html实体

六、表格

6.1 格式

6.2 表属性

七、表单元素

八、框架集

猜你喜欢

前端基础html（一）

一、html的概念

二、互联网三大基石

三、文档结构

四、常用标签

4.1梗概

4.2 head标签中子标签

4.2.1 title的使用

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

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

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

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

4.3 body中的子标签

4.3.1 文本操作的标签

4.3.2 图片，音频，视频

1、图片: img

2、音频

3、视频

4.3.3 a标签

4.3.4 列表

1、无序列表

2、有序列表

五、html实体

六、表格

6.1 格式

6.2 表属性

七、表单元素

八、框架集

猜你喜欢

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