Web前端学习day1

  • 一、html的基本介绍
  • html基本框架
  • 二、html元素
  • 1.标题标签
  • 2.水平线标签
  • 3.段落标签
  • 4.强制换行标签
  • 5.文本格式化标签
  • 6.超链接标签
  • 7.图片标签
  • 8.列表标签
  • 9.盒子标签
  • 10.表格元素
  • 11.表单标签
  • 12.框架标签
  • 13.行块级元素


一、html的基本介绍

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。

浏览器默认渲染模式: 从左到右 上到下

html文档后缀.html或.htm两种后缀名没有区别,都可以使用。

html基本框架

代码如下(示例):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

注释:
!DOCTYPE html 网页类型的声明

<head lang="en">  lange='en'  网页的语言类型   en   ch
    <meta charset="UTF-8">  浏览器的编码格式
    <title>网页的标题</title>   网页的标题标签位置
</head>
<body>   网页的内容区域
  网页的内容
</body>

二、html元素

1.标题标签

代码如下(示例):

<h1>这里是标题</h1>
    <h2>这里是标题</h2>
    <h3>这里是标题</h3>
    <h4>这里是标题</h4>
    <h5>这里是标题</h5>
    <h6>这里是标题</h6>

效果:

这里是标题
这里是标题
这里是标题
这里是标题
这里是标题
这里是标题

2.水平线标签

代码如下(示例):

<hr/>

效果:


3.段落标签

代码如下(示例):

<p>这里是段落标签</p>
<p>这里也是段落标签</p>

效果:
这里是段落标签
这里也是段落标签

4.强制换行标签

代码如下(示例):

<br>

作用:强制换行

5.文本格式化标签

代码如下(示例):

<b>加粗</b>
<strong>加重</strong>
<i>斜体</i>
<em>斜体</em>
<small>小号字体</small>
<del>添加删除线</del>
<ins>添加下滑线</ins>
文本<sup>上标签</sup>
文本<sub>下标签</sub>

效果:
加粗
加重
斜体
斜体
小号字体
添加删除线
添加下滑线
文本上标签
文本下标签

6.超链接标签

代码如下(示例):

当前页面跳转
<a href="https://www.baidu.com/" target="_self" >访问百度</a>
打开新页面跳转
<a href="https://www.baidu.com/" target="_blank" >访问百度</a>

效果:
当前页面跳转
访问百度 打开新页面跳转
访问百度

属性:

1.href="" 跳转链接的URL地址
2.target="" 跳转方式 _self当前页面跳转_blank打开新页面跳转

7.图片标签

代码如下(示例):

<img src="" alt="">

属性:
1.src="" 图像的 URL 地址
2.alt="" 为图像定义一串预备的可替换的文本

8.列表标签

ol li 有序列表
代码如下(示例):

<ol>
      <li>北京</li>
      <li>上海</li>
      <li>广州</li>
</ol>

效果:

  1. 北京
  2. 上海
  3. 广州

ul li 无序列表
代码如下(示例):

<ul>
     <li>北京</li>
     <li>上海</li>
     <li>广州</li>
</ul>

效果:

  • 北京
  • 上海
  • 广州

** 无序列表**

<dl>
     <dt>北京
          <dd>烤鸭</dd>
     </dt>
     <dt>上海</dt>
     <dt>广州</dt>
</dl>

效果:


烤鸭

9.盒子标签

代码如下(示例):

<div>div块级元素内容</div>
<span>span行级元素内容</span>

效果:


div是块级元素内容


span行级元素内容

10.表格元素

代码如下(示例):

<table border="1" cellspacing="0">
        <caption>
            学生信息管理
        </caption>
        <tr>
            <th rowspan="4">10086班</th>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>地址</th>
        </tr>
        <tr>
            <td>1</td>
            <td>李四</td>
            <td>17</td>
            <td>西安市</td>
        </tr>
        <tr >
            <td>2</td>
            <td>王五</td>
            <td>16</td>
            <td>西安市</td>
        </tr>
        <tr>
            <td>3</td>
            <td>张三</td>
            <td>18</td>
            <td>西安市</td>
        </tr>
        <tr>
            <th colspan="5">备注:简单统计学生信息</th>
        </tr>
    </table>

效果:

学生信息管理

10086班

序号

姓名

年龄

地址

1

李四

17

西安市

2

王五

16

西安市

3

张三

18

西安市

备注:简单统计学生信息

属性:
1.border 给表格添加边框
2.cellspacing 设置表格和单元格之间的距离的
3.cellpadding 设置单元格的内间距的
4.width 设置table的宽
5.align 设置表格的对齐方式
6.跨行(rowspan) 跨列(colspan) 在计算时包含自身
7.background-color设置表格颜色

11.表单标签

代码如下(示例):

<form action="" method="">
		文本框
        <input type="text">
        密码框
        <input type="password">
        单选框
        <input type="radio">
        多选框
        <input type="checkbox">
        提交按钮
        <input type="submit">
        普通按钮
        <input type="button">
        重置按钮
        <input type="reset">
        资源管理
        <input type="flie" accept=".mp3,.mp4,.wmv" 类型限制 multiple 支持多选>
        下拉表单
        <select>
              <option>--请选择--</option>
              <option value="西安市">--西安市--</option>
              <option value="宝鸡市">--宝鸡市--</option>
        </select>
        文本域
        <textarea></textarea>
</form>

form属性:
1.action="" 写的是当前表单提交的服务器路径
2.method=""表单提交的方式
get :显示提交 值拼接在路径的后边 不安全 数据量较大 类似在location地址栏 输入地址
post: 隐式提交 安全的 提交的数据量比较小

input属性:
1.type="" input类型
2.placeholder=“请输入…” 智能提示

12.框架标签

代码如下(示例):

<a href="./pages/one.html" target="targetPage">one页面</a>
<a href="./pages/two.html" target="targetPage">two页面</a>
<a href="./pages/three.html" target="targetPage">three页面</a>
<iframe name="targetPage" src="./pages/one.html"></iframe>

作用:
当前网页内部内嵌其他网页,主要做小型的企业系统

13.行块级元素

常见行级元素: p,div,ul,ol,dl,table,h1,form

常见块元素: a,span,img,input,select,strong,label,b