HTML 基础入门

最新推荐文章于 2024-05-31 01:11:18 发布

cike_9905

最新推荐文章于 2024-05-31 01:11:18 发布

阅读量153

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/cike_9905/article/details/131641164

版权

HTML5

一、HTML5和CSS的概述

应用场景:
  HTML用于编写网页，我们日常中通过浏览器网络访问的网页大部分都是使用HTML编写。
通过鼠标右键查看网页源代码就能查看到具体的HTML代码。
  网页内容包含：HTML代码、CSS代码、JavaScript代码等内容，俗称网页三剑客。
HTML代码：用于展示数据，即页面内容的呈现；   
  CSS代码：使页面内容展示不同的效果，即给页面内容化妆；
  JavaScript代码：使整个页面显示的元素具有动画的效果，并能与用户实现动态交互；

二、软件架构

目前市场上有两种流行的软件架构：
cs架构
bs架构

（一）C/S架构

C/S架构：Client/Server 客户端/服务器。要求用户安装一个客户端程序。
原理图:

主要特点:
交互性强、具有安全的存取模式、网络通信量低、响应速度快、利于处理大量数据。但是该结构的程序是针对性开发，变更不够灵活，维护和管理的难度较大。
常见应用：
qq音乐、王者荣耀、网易云、消消乐
优点：
用户体验好，效果炫
对信息安全的控制较强 
应用服务器运行数据负荷较轻，部分计算功能在客户端完成
缺点：
占用硬盘空间
维护麻烦
安装使用依赖其他条件

（二）B/S架构

B/S架构：Browser/Server 浏览器/服务器 。通过浏览器与服务器交互，不需要安装其他程序

主要特点:
分布性强、维护方便、开发简单且共享性强、总体拥有成本低。但数据安全性问题、对服务器要求过高、数据传输速度慢、软件的个性化特点明显降低。

常见应用：
12306、淘宝、京东、oa系统

优点：
维护和升级简单，无缝升级。
不用必须安装程序，操作系统内置了浏览器。大大减少了使用成本

缺点：
动画效果受浏览器限制
对信息安全控制较差。例如：网银就需要使用U盾，在浏览器端加密。
应用服务器运行数据负荷较重。大部分计算都在服务器端，增加服务器压力。使用Ajax可以改善部分用户体验。

（三）资源分类

资源分类分为:
静态资源 和 动态资源

1、静态资源

使用静态网页技术开发的资源(Html,CSS,JavaScript)
特点：所有用户访问，得到的结果是一样的。
如:文本，图片，音频，视频，Html,CSS,JavaScript都属于静态资源
如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器种内置了静态资源的解析引擎，可以展示静态资源浏览器本身也是一个应用程序

2、动态资源

是从资源的服务器里面的数据库拿出来的
使用动态网页技术发布的资源
 
特点：所有用户访问，得到的结果可能不一样
举例：jsp/servlet,php,asp…
如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给服务器。

三、HTML语言介绍

（一）什么是HTML

HTML:超文本标记语言(Hyper Text Markup language)。
超文本：一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。
简单说不仅可以加载文本还可以加载图片、视频、音频等
标记语言：由标签组成的语言，标记语言不是编程语言。如：<html></html>。
html:超文本标记语言不是编程语言
    机器语言   0 1
    汇编语言
    高级语言   
1、超文本
    文本:txt  汉字、字符、符号、英文
    超文本: 文本能做到的，超文本都能做到，还可以写视频、图片、音频等等
2、标记:
    标签，在html中，都是以标签存在的，标签都是官方定义好的，学习html就是学习官方定义好的标签

（二）HTML作用及版本

作用:
使用标记标签来描述网页 需要运行在浏览器上(推荐使用谷歌、火狐)
版本介绍：
HTML 5不只是 HTML规范的最新版本，它是用于生成现代 Web内容的一系列相关技术的总称

四、HTML入门案例

（一）HTML基本语法

基本语法包含：标签和属性
1. 文件的后缀：html的后缀名是 .html(推荐使用) 或者 .htm
2. 标签由尖括号包围的关键词，比如 <html>
3. 标签分类：① 双边标签：如 <html></html> ② 单边标签：如 <meta charset='UTF-8' /> 
4. 标签的嵌套：要正确嵌套
    •   正确演示：<html><body></body></html>
    •   错误演示：<html><body></html></body>
5. 标签不区分大小写（建议小写）
6. 在开始标签中可以定义属性，属性是以键值对的形式，值需要引号 引起来
7. 标签名都是预定义好的，可以直接使用但不可以随便定义
8. 属性：开始标签中定义的键值对成为属性，如：<body bgcolor='color' ></body>

（二）创建HTML文件

1、后缀名: html或者htm
2、标签官方定义好   
3、绝大数标签都是双标签，也有少部分单个标签
4、不区分大小写，建议小写

HTML基本文档结构如下:
1. <!DOCTYPE >：声明文档类型
2. html：html文档的根标签
3. head: 头标签，用于指定html一些属性和引入外部资源
4. title：标题标签，设置当前页面的标题
5. meta标签：指定当前页面的字符编码
6. body：体标签，显示在页面中内容
7. 注释：<!-- 注释内容  -->

（三）HTML编辑工具

1、记事本、增强记事本
2、HBuilder、webstrom、vscode、sublime
3、使用vscode  免费的
	傻瓜式安装   不要有中文路径、不要安装到c盘

4、下载中文插件

5、打开到浏览器

6、如何运行

1、在计算机随意创建一个文件夹  打开
2、在该文件夹中创建一个HelloWorld.html
	在输入！ 回车  生成html基本模板
3、运行  右键 点击 open default browser

7、调节字体大小 ctrl + 加号或者减号

8、设置文件自动保存

说明：

<!DOCTYPE html>这是一个HTML版本的声明，这个声明表示当前HTML版本为H5。

<meta charset="UTF-8">用来做页面声明，例如网页缩放、页面编码、搜索引擎关键字等。
<meta name="viewport" content="width=device-width,initial-scale=1.0">移动端配置

谷歌插件
https://chrome.pictureknow.com/

五、HTML常见标签

常见标签分类介绍：
文本标签、多媒体标签、列表标签、链接标签、表格标签、表单标签、架构标签、字符实体、无意义标签已经html5的语义标签

（一）标题标签

HTML提供<h>系列标签，这里的代表1-6，用于修饰标题，其中<h1>定义最大的标题，<h6>定义最小的标题。
标题标签： <h>

（二）段落标签

<p> 段落标签，使得文本独立成段。

（三）文本格式化标签

文本格式化标签:
主要用于修饰文本内容的标签

1、换行标签

<br/> 换行标签，是一个单标记标签，每次需要换行就添加一个<br/>标签，换几行加几个。

2、分割线标签

<hr/>标签在HTML页面中创建一条水平的分割线，用于定义内容的主题变化。

属性解析:

属性名	属性说明
width	定义水平线的长短单位是像素/百分比
size	定义水平线的粗细单位是像素/百分比
color	定义水平线的颜色颜色可以是英文单词：例如red,blue,yellow,pink颜色也可以是编码：#FF0000

3、加粗标签

<b> 、<strong>标签可以使字体加粗。

4、斜体标签

<em> 、<i>标签可以使字体倾斜。

5、上标标签

上标标签: 
在html中，sup标签是使用来定义上标文本的，所谓上标文本就是显示在当前文本的右上角，而且比当前文本更小的文本内容。

6、下标标签

下标标签: 
在html中，sub标签是使用来定义下标文本的，所谓下标文本就是显示在当前文本的右下角，而且比当前文本更小的文本内容。

7、字体格式化标签

<font> 用于设置字体尺寸、字体颜色等。

属性解析:

属性名	属性说明
size	定义字体大小, 默认大小3号。取值范围:1~7号最小，7号最大
color	设置字体的颜色颜色可以是英文单词：例如red,blue,yellow颜色也可以是编码：#FF0000

8、居中标签

居中标签:
<center>标签用于将文本居中显示。

总结:
1、标题  h1-h6
2、段落  p
3、加粗  b strong
4、倾斜  i em
5、换行  br
6、分割线  hr
	size 大小   width宽度    color
7、字体  font
	size  1-7    color 颜色
8、居中  center
9、上标签 sup 
10、下标签  sub

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- ctrl + / 注释   
        快速向下复制一行  alt + shift + ↓
        1、标题标签   h1-h6  h1最大的  h6最小的
        2、段落标签  p
        3、加粗 b strong
        4、倾斜标签   i em
        5、分割线  hr    
            <hr 属性名=属性值>
            px 像素    
            color=""  颜色的英文单词  #FF0000  红绿蓝
            属性:
                color 颜色
                width 宽度
                size  大小 高度
        6、换行标签  br
        7、上标签  sup
        8、下标签 sub
        9、字体标签  font
            color 字体颜色
            size 字体大小     1-7   3默认
        10、居中标签  center
    -->
    <h1>我是最大的</h1>
    <h2>我是老二</h2>
    <h6>我是最小的</h6>
    我是第一行 <br>
    我是第二行

    <p>故人西辞 <b>富士康</b>,</p>
    <p>为学 <i>技术</i> 到南翔。</p>
    <p>南翔技校 <strong><em>包分配</em></strong> ,</p>
    <p>尼玛还是富士康。</p>

    <hr width="200px" color="#FF0000" size="100px">


    <sup>上单vn</sup> 中单ez <sub>下单寒冰 </sub> 
    <br>
    <font color="green" size="4">法外狂徒张三</font>

    <center>我在最中间</center>

</body>
</html>

（四）HTML多媒体标签

1、HTML图片标签

在我们日常上网中大家会发现网站上会有很多的图片信息展示，这样会使整个网站所表达的意思更加明确，也让整个网站看着非常舒服，接下来带领大家学习如何在HTML中添加图片。
图片标签<img>
如果我们想要在HTML网页中展示图片，首先需要准备好图片，格式不限，jpg、png、gif 均可。

属性解析：

属性名	属性说明
src	设置图片的引用路径，可以是相对路径或绝对路径1. 相对路径 ./ 当前目录 ../ 上一级目录 ../../ 上上一级目录2. 绝对路径l 网络绝对路径：通过url地址加载资源如：https://timgsa.baidu.com/timg?image/xx.pngl 磁盘绝对路径需要通过本地访问该页面如：D:\images\1.jpg
width	设置图片的宽度，以像素为单位。
height	设置图片的高度，以像素为单位
title	悬浮文字，当鼠标悬浮到图片上时的提示文字
alt	替代文本，由于某种原因图片无法显示时会使用替代文本替代图片内容。

2、HTML音频标签

<audio> 标签定义声音，比如音乐或其他音频流。

属性解析:

属性名	属性说明
src	要播放的音频的 URL
controls	如果出现该属性，则向用户显示控件，比如播放按钮

loop	如果出现该属性，则每当音频结束时重新开始播放
muted	规定视频输出应该被静音

3、HTML视频标签

<video> 标签定义视频，比如电影片段或其他视频流。

属性解析:

属性名	属性说明
src	要播放的视频的 URL
controls	如果出现该属性，则向用户显示控件，比如播放按钮
height	设置视频播放器的高度
width	设置视频播放器的宽度
loop	如果出现该属性，则当媒介文件完成播放后再次开始播放
muted	规定视频的音频输出应该被静音

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        
        1、图片标签(重点)  img  单个标签
            1、src 连接图片的路径       搞清楚相对路径和绝对路径 
            2、width和height 宽和高
            3、title 鼠标悬浮的标题
            4、alt  图片加载失败的提示消息
    
    -->
    <img src="image/1.jpg" width="200px" height="300px" title="忘了我把" alt="555...图片不存在"> <br>

    <!-- 音频  audio 
        1、src 连接的音频路径
        2、controls 显示控件
        3、loop 循环播放
        4、muted  默认静音
    -->
    <audio src="image/1.mp3" controls loop muted></audio> <br>

    <!-- 视频  video
        1、src 连接的视频路径
        2、controls 显示控件
        3、loop 循环播放
        4、muted  默认静音
        5、height和width 宽和高
    -->
    <video src="image/2.mp4" controls="controls" width="400px" height="400px" loop muted></video>

    <br>
    <a href="#">点我1</a>
</body>

</html>

（五）HTML列表标签

<ul> 定义无序列表

<ol> 定义有序列表

<li> 列表项, 是ul和ol的子标签

特别说明：
	ul和ol标签都有type属性，可以用来设置列表项前面的项目符号类型。

属性解析:

属性名	属性说明
type	定义列表的符号类型。有序列表：取值：A、a 、I 、i 、1 等(默认type="1")无序列表：取值：disc 实心圆、square 方块、circle 空心圆(默认type="disc")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--  ul > li 无序
          ol > li 有序

          可以通过type去设置列表前面的符号
        
          必须:
          img
          a标签
    -->
    <ul type="circle">
        <li>暗夜猎手</li>
        <li>暴走萝莉</li>
        <li>圣枪游侠</li>
        <li>寒冰射手</li>
    </ul>

    <!--  ol>li*4  按tab -->
    <ol type="I">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
        <li>赵六</li>
        <li>田七</li>
    </ol>
</body>
</html>

（六）超链接标签

超链接标签是在html页面中提供一种页面间跳转的方式。
语法结构：
<a href="" target="">热点文字或图片</a>

属性解析：

属性名	属性说明
href	访问目标的url地址（必填）地址取值:目标路径或者锚点
target	定义打开页面的方式 ,常用的两种方式取值为：取值：blank 在新的选项卡中打开self 在本页面打开（默认）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 超链接  a (重要)-->

    <a href="https://www.baidu.com">点我跳转到百度</a>
    <!--  回到页面顶部  -->
    <a href="#">点我1</a>
    <!-- 禁止a标签跳转 -->
    <a href="javascript:void(0)">点我2</a>
    <!-- 
        target=_self 在本页面跳转
        target=_blank 打开一个新的选项卡跳转

     -->
    <a href="https://www.baidu.com" target="_blank">点我3</a>
</body>
</html>

六、HTML表格标签

1、案例介绍

2、案例相关标签

2.1、表格标签

HTML中一个表格由<table>标签及一个或多个<tr>加若干<td>标签组成。

常用标签:

标签名	作用
table	父标签，相当于表格的容器
tr	用来定义行，写在<table>标签内
td	用来定义列（单元格），写在<tr>标签内
th	表格的列标题: 加粗，居中
caption	表格的标题

属性解析：

属性名	属性说明
border	表格边框的宽度(粗细)
width	表格的宽度
height	表格的高度
align	可以用在<table>标签中，表示表格相对于整个浏览器窗口的居中对齐；也可用在<tr>或<td>标签中，设置单元格内容的对齐方式取值：left 居左、right 居右、center 居中
bgcolor	表格的背景颜色
rowspan	合并行
colspan	合并列
cellspacing	单元格之间的空白
cellpadding	表格边缘与内容之间的空白
thead	标签定义表格的表头
tbody	标签表格主体(正文)。该标签用于组合 HTML 表格的主体内容

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

    <!-- 
        table 根标签
        tr 代表一行
        td代表单元格
        th 代表单元格   字体加粗和居中


        属性:
        1、border 边框的宽度
        2、bordercolor 边框的颜色
        3、width和height 宽和高
        4、bgcolor  背景颜色
        5、cellspacing  单元格和单元格之间的空白
        6、cellpadding  边框和内容之间的空白
        7、align  center  left  right
            设置在table上   表格在浏览器上的位置
            设置tr上   代表该行字体的位置
            设置在td上  代表该单元格字体的位置

     -->
    <table border="1" width="400px" height="200px"
     bordercolor="red" bgcolor="pink" cellspacing="0" cellpadding="10px" align="center">
        <caption>
            <h2>学生信息表</h2>
        </caption>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>爱好</th>
        </tr>
        <tr align="center">
            <td>刘德华</td>
            <td>男</td>
            <td>唱歌</td>
        </tr>
        <tr>
            <td>cxk</td>
            <td>男</td>
            <td>唱、跳、rap</td>
        </tr>
        <tr>
            <td align="center">马保国</td>
            <td>男</td>
            <td>闪电五连鞭</td>
        </tr>
    </table>
</body>
</html>

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

   <!--  合并行  rowspan

    1、搞清楚是合并行还是合并列?
    2、合并几行或者几列
-->
    <table border="1" width="400px" height="200px"
     bordercolor="red" bgcolor="pink" cellspacing="0" cellpadding="10px" align="center">
        <caption>
            <h2>学生信息表</h2>
        </caption>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>爱好</th>
        </tr>
        <tr align="center">
            <td>刘德华</td>
            <td rowspan="2">男</td>
            <td>唱歌</td>
        </tr>
        <tr>
            <td>cxk</td>
            
            <td>唱、跳、rap</td>
        </tr>
        <tr>
            <td align="center" colspan="3">68岁的老同志。很快</td>
           
        </tr>
    </table>
</body>
</html>

七、HTML表单标签

1、案例介绍

HTML 表单的主要作用是接收用户的输入，当用户提交表单时，浏览器将用户在表单中输入的数据打包，并发送给服务器，从而实现用户与Web服务器的交互。
表单是控件的容器，一个表单由form元素、表单控件和表单按钮三部分组成。

2、案例相关标签

2.1、表单标签

<form>是在页面中创建出一个表单，表单标签在HTML中是没有效果展示的，能展示的是表单中的各种标签。如果数据需要提交给服务器，负责收集数据的标签必须放在表单之中。

属性解析:

属性名	属性说明
action	数据提交的路径，指向数据提交的服务器地址
method	数据提交的方式，常用取值：get、post
enctype	规定在发送到服务器之前应该如何对表单数据进行编码取值三种方式:1. application/x-www-form-urlencoded:默认的编码方式。但在用文本的传输和MP3等大型文件的时候，使用这种编码就显得效率低下(也就是说上传文本格式的文件)。2. multipart/form-data:指定传输数据为二进制类型，比如图片，mp3，文件。3. text/plain：纯文本的传输。空格转换为"+"号，但不对特殊字符编码。

2.2、输入域标签

<input>标签用于获取用户输入信息，通过指定type值达到搜集不同信息的目的。是我们在html中最常用的标签。

input属性：

属性名	属性说明
id	为当前组件提供一个唯一的标识
type	定义表单输入项input的组件类型详见下一个表格type属性值说明
name	为当前组件提供一个名称服务器会根据当前的名称获取当前组件提供的数据
value	为当前组件设置值。value属性的设置策略：①文本框、密码框这样的表单输入项，可以不强制指定value，因为用户可以自由输入②单选框、复选框这样的表单输入项，必须强制指定value，因为用户无法输入，只能选择，如果不指定value，那么提交上去的只有on
checked	设置单选框/复选框的默认选中状态（全选、反选）
readonly	设置该标签的参数值只读，用户无法手动更改。但是数据是可以正常提交
disabled	设置该标签不可用（禁用），参数值无法更改，且参数值也无法提交
maxlength	设置允许输入的最大的长度
placeholder	输入框的提示信息

input-type属性值说明:

属性值	说明
text	文本框(默认)，单行的输入字段，用户可在其中输入纯文本。
password	密码框。内容为非明文
radio	单选框。必须将其设置为同一组(name的名字必须相同)
checkbox	复选框。必须将其设置为同一组(name的名字必须相同)
file	附件框。用于文件上传。
hidden	隐藏域。数据可以通过表单发送至服务器，但是浏览器不会显示。
submit	提交按钮。用于控制表单提交数据。name属性一般不用设置，设置value属性将按钮起一个名字
reset	重置按钮。用于将所有的表单输入项恢复到默认状态
button	普通按钮。需要和JavaScript事件一起用

总结
1、form表单  根标签   input标签都要写在里面
	属性
		1、action  提交的地址
		2、method  提交的方式   get post  不写默认是get
		3、enctype  现在不用关注
2、input框
	id  唯一标识
	name 标签的名称
	value  标签的值    
		输入框  修改输入框的内容  修改value值的操作
		单选和复选框   强制给上value值和name值
	placeholder  输入框的提示消息
	readonly  只读
	disabled   禁用    包括单选和复选框的禁止选择
	单选和复选的默认选中  checked
	多个单选框只能选中一个    设置相同的name值
	maxlength    设置输入的最大长度
3、input的type类型
	type=text  文本框
	password  密码框
	radio  单选框
	checkbox 复选框
	email   邮箱框
	date   日期框
	number  数字框
	submit  提交按钮
	button  按钮
	file    文件框
	hidden  隐藏框
	reset  重置按钮

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        form表单
        三个属性
            action 提交的地址
            method 请求的方式  get /post   不写默认是get
            enctype   

        input框的属性
            id  页面的唯一标识  服务css和js的
            placeholder 输入框的提示消息
            name   标签的名称     
            value  输入框的默认值       了解:name和value有什么用   后台通过name值去获取对应的value
            readonly  只读  设置标签只读  不能输入数据
            disabled  禁用
            maxlength 输入的最大长度
        
        input的type属性
            text  文本框
            password 密码框
            radio  单选框
            checkbox  复选框
            submit  提交按钮
     -->

    <form action="北京" method="get">

        姓名: <input placeholder="请输入姓名" type="text" id="inp" name="username" value="" disabled> <br>
        密码: <input type="password" maxlength="6"> <br>
        <!-- 多个单选框只能选中一个，需要设置相同的name值
            单选和复选的默认选中

            单选和复选的禁用
        -->
        性别: <input type="radio" name="sex" value="男" > 男
        <input type="radio" name="sex" checked value="女">女 <br>
        爱好: <input type="checkbox"> 吃
            <input type="checkbox" checked> 喝
            <input type="checkbox" checked> 拉
            <input type="checkbox" disabled> 睡 <br>


        数字框: <input type="number"> <br>
        邮箱框: <input type="email"> <br>
        <!-- 隐藏框的作用: 提交数据到后台并且不想让用户看到 -->
        隐藏框: <input type="hidden" name="mark" value="add"> <br>
        <input type="button" value="我是按钮"> <br>
        文件框: <input type="file"> <br>
        日期框: <input type="date"> <br>
        <input type="reset" value="重置">
        <input type="submit" value="提交">
        
    </form>
</body>

</html>

2.3、下拉列表标签

提供一个下拉列表框，让用户进行选择。 <select>

属性解析:

属性值	说明
name	下拉列表框的名字。
<option>子标签	属性selected选中项、value为当前下拉项的值
multiple	multiple 属性规定输入字段可选择多个值

2.4、文本域标签

HTML提供了多行输入的文本控件：<textarea>

属性解析:

属性值	说明
cols	设置文本域的列数
rows	设置文本域的行数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 下拉列表框 select    快速切换到下一行  ctrl + enter 
        下拉的默认选中  selected="selected"   简写selected

         multiple="true"  设置下拉展开显示 可以选中多个

         optgroup 设置标题  label="标题名"
    
    -->

    <select name="学校">

        <optgroup label="小学">

            <option value="春天花花幼稚园">春天花花幼稚园</option>
            <option value="青青草原小学" disabled>青青草原小学</option>
        </optgroup>
        <optgroup label="大学">
            <option value="家里扶泥巴大学">家里扶泥巴大学</option>
            <option value="家蹲大学" selected="selected">家蹲大学</option>
        </optgroup>
    </select> <br>

    <!-- 文本域  textarea
        rows 设置行
        cols设置列
        placeholder 输入的提示消息
        设置默认值 就是文本值
    -->
    <textarea  cols="20" rows="5" placeholder="请输入" >placeholder</textarea>

</body>
</html>

1、重点
	img
	a
	table 
	form

cike_9905

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML 基础入门

HTML:超文本标记语言(Hyper Text Markup language)。超文本：一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。简单说不仅可以加载文本还可以加载图片、视频、音频等标记语言：由标签组成的语言，标记语言不是编程语言。如：<html></html>。html:超文本标记语言不是编程语言机器语言 0 1汇编语言高级语言1、超文本文本:txt 汉字、字符、符号、英文。
复制链接

扫一扫