Web前端学习——HTML

最新推荐文章于 2021-06-04 11:29:24 发布

XUPT-前端在逃工程师

最新推荐文章于 2021-06-04 11:29:24 发布

阅读量137

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/Dimuzero/article/details/109149313

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Web前端学习day1

一、html的基本介绍
- - - - html基本框架
二、html元素

一、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>

效果：

北京
上海
广州

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

XUPT-前端在逃工程师

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web前端学习——HTML

Web前端学习day1一、html的基本介绍html基本框架二、html元素1.标题标签2.水平线标签3.段落标签4.强制换行标签5.文本格式化标签6.超链接标签7.图片标签8.列表标签9.盒子标签10.表格元素11.表单标签12.框架标签一、html的基本介绍超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。浏览器默认渲染模式：从左到右上到下html文档后缀.html或.htm两种后缀名没有区别，都可以使用。htm
复制链接

扫一扫