前端基础html（一）

2021-04-08 02:27

阅读：681

标签：next style char 链接 pac 基础 bottom pos 本地

一、html的概念

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

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

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

二、互联网三大基石

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

2、http协议：https://

3、html：显示页面

三、文档结构

DOCTYPE html>  

               

html>  

   head>  

      meta charset="utf-8" />

      title>第一个网页title>

   head>

   

   body>

      h1>HelloWorldh1>

   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=””>XXXXXXXXXXXXXXXa>

7、锚链接

   a   name=” goods”>XXXXXa>

   a href=”#goods”>YYYYYa>

   a href=”index.html#goods”>zzzzzzzzzza>

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="_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>标题标签h1h1>

     h2>标题标签 h2h2>

     h3>标题标签 h3h3>

     h4>标题标签 h4h4>

     h5>标题标签 h5h5>

     h6>标题标签 h6h6>

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

3、加粗 strong ,倾斜 em

4、段内换行

5、水平线

6、预格式化文本

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 />

a href="https://www.taobao.com" target="_blank">淘宝a>  

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

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


  
爱吃  需要锚链接的位置

  爱吃  href写上锚链接的名称
a href="index.html#aichi">爱吃a>

4.3.4 列表
  1、无序列表 

ul type="disc">  

     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.00a>dd>
     dd>全国包邮！韩版修身长袖T恤 打底衫 纯棉圆领T恤dd>
dl>

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

[1] 空格

[2] 一个tab键的距离

[3]<小于号

[4]>大于号

[5]©版权符号

[6]"双引号

六、表格
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="#">123a>td>
    tr>
    tr>
        td>北京td>
        td>拉萨td>
        td>a href="#">28a>td>
    tr>
table>

6.2 表属性
1、

table标签中的属性: 
border:边框的宽度
width:表格的宽度
cellpadding:边框与内容之间的空白
cellspacing:格与格之间的空白

2、行

3、单元格
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">2td>
(3)align:表格中内容的水平对齐方式 left, center, right
(4)valign:表格中内容的垂直对齐方式 top , middle , bottom

七、表单元素

属性:

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 标签的作用：用户良好的体验度

标签的 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（一）

标签：next style char 链接 pac 基础 bottom pos 本地

原文地址：https://www.cnblogs.com/vole/p/12467108.html

上一篇：HttpOnly是怎么回事？

下一篇：upload.php

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：前端基础html（一）
文章链接：http://soscw.com/index.php/essay/72671.html

亲，登录后才可以留言！

前端基础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的使用：定义了与文档相关链的名称/值（键值对）