1.HTML学习_通过( )控件可以轻松地创建多行文本输入框。-CSDN博客

本文链接：https://blog.csdn.net/qq_43447661/article/details/108689012

1.HTML学习

(1)文本标记

换行标记：

段落标记：

标题：n的取值1-6，随着数字越大字体越小

字体属性设置（颜色，大小）：

字体加粗：

字体斜体设置：

字体带下划线：

字体删除线：

引用（下坐标）：

引用（上坐标）：

展示一条水平线：

. 属性:

color:颜色

width:宽度

size:高度

align：对齐方式（center：居中，left：左对齐，right：右对齐）

文本居中：

属性：color(颜色) size（大小），face（字体）

（2）图像标记

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uxZthqmw-1600560810331)(C:%5CUsers%5C6018203135%5CDesktop%5Cimg_wps%E5%9B%BE%E7%89%87.png)]

(3)超链接标记

发邮箱：（前提有邮件工具比如：Foxmail软件）

注意：

1.外部链接需要添加 http:// www.baidu.com

2.内部链接直接链接内部页面名称即可比如 < a href=“index.html”> 首页

3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。

4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

base 标签

base 可以设置整体链接的打开状态

base 写到之间

特殊字符标签（理解）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KSTcZd1I-1600560810333)(C:%5CUsers%5C6018203135%5CDesktop%5Czifu_wps%E5%9B%BE%E7%89%87.png)]

(4)列表标记

无序列表：

(列表项)
(列表项)

有序列表：
(列表项1)

(列表项2)

(5)表格标记

table:表格（包含行（tr)和表头(th) 名(caption)

一般表头放在第一行

1.tr 用于定义表格中的一行，必须嵌套在 table /table标签中，在 table /table中包含几对 tr /tr，就有几行表格。

2.td /td：用于定义表格中的单元格，必须嵌套在标签中，一对中包含几对，就表示该行中有多少列（或多少个单元格）。

注意：1. 中只能嵌套

2.标签，他就像一个容器，可以容纳所有的元素

表格属性：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HCdr0OXt-1600560810334)(C:%5CUsers%5C6018203135%5CDesktop%5Ctt_wps%E5%9B%BE%E7%89%87.png)]

合并单元格

跨行合并：rowspan 跨列合并：colspan

合并单元格的思想：

将多个内容合并的时候，就会有多余的东西，把它删除。例如把 3个 td 合并成一个，那就多余了2个，需要删除。

公式：删除的个数 = 合并的个数 - 1

（6）表单标记

1.表单在bai网页中主要负责数据采集功du能。一个表单有三个基本组成部分：表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

2.表单标签：form标签

用于申明表单，定义采集数据的范围，也就是和里面包含的数据将被提交到服务器或者电子邮件里。

action=url用来指定处理提交表单的格式.它可以是一个URL地址(提交给程式)或一个电子邮件地址.

method=get或post指明提交表单的HTTP方法.可能的值为： post：POST方法在表单的主干包含名称/值对并且无需包含于action特性的URL中. get：不赞成。GET方法把名称/值对加在action的URL后面并且把新的URL送至服务器.这是往前兼容的缺省值.这个值由于国际化的原因不赞成使用.

enctype=cdata指明用来把表单提交给服务器时(当method值为"post")的互联网媒体形式.这个特性的缺省值是"application/x-www-form-urlencoded"

TARGET="…"指定提交的结果文档显示的位置： _blank ：在一个新的、无名浏览器窗口调入指定的文档； _self ：在指向这个目标的元素的相同的框架中调入文档； _parent ：把文档调入当前框的直接的父FRAMESET框中；这个值在当前框没有父框时等价于_self； _top ：把文档调入原来的最顶部的浏览器窗口中(因此取消所有其它框架)；这个值等价于当前框没有你框时的_self.

input控件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1y29Bb48-1600560810336)(C:%5CUsers%5C6018203135%5CDesktop%5Cinput_wps%E5%9B%BE%E7%89%87.png)]

input 文本框（type=“text”),密码框（type=“password”），单选框（type=“radio”,如果默认则 checked=“checked”），复选框（type=“checkbox")

下拉列单：

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

注意：

<select></select>中至少应包含一对<option></option>。
在option 中定义selected =" selected "时，当前项即为默认选中项。

默认表单 selected=“selected”

上传文件：input type=“file"

textarea控件（文本域）

如果需要输入大量的信息，就需要用到<textarea></textarea>标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：

<textarea cols="每行中的字符数" rows="显示的行数">
  文本内容
</textarea>

表单域

在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

表单提交方式：

get：默认方式，表单提交的数据会显示在地址栏，提交数据有大小限制：128k

post:表单提交的数据不会再地址栏显示，提交的数据无大小限制

form action="" methon=“post”

action 属性规定bai当提交表单时，向何处du发送表单数据。

（7）HTML框架

frameset标签：基本组成部分是frame，当然frameset是可以嵌套另一个frameset，主要通过frameset将整个网页按照需求分割为多个区域。

<frameset rows="15%,*" frameborder="no"> <!--<frameborder="no"> 表示去掉分界边框-->
    <frame src="header.html" noresize="noresize"/> <!-- noresize="noresize" 表示不改变各个部分的大小，滚动条不滚动-->
    <frameset cols="12%,*">
        <frame src="menu.html" noresize="noresize"/>
        <frame src="welcome.html" noresize="noresize" name="main"/>

    </frameset>

</frameset>

（8）div和span标签：

div：每一个div占满一整行。块级标签

span:文本信息（多个span）在一行展示，行内标签内联标签

html5新标签与特性

常用新标签：

header：定义文档的页眉

nav：定义导航链接的部分

footer：定义文档或节的页脚

article：标签规定独立的自包含内容

section：定义文档中的节（section、区段）

aside：定义其所处内容之外的内容

常用新属性：

属性******	用法****	含义****
placeholder****		占位符提供可描述输入字段预期值的提示信息
autofocus****		规定当页面加载时 input 元素应该自动获得焦点
multiple****		多文件上传
autocomplete****		规定表单是否应该启用自动完成功能
required****		必填项
accesskey****		规定激活（使元素获得焦点）元素的快捷键

新增的type属性值：

类型****	使用示例****	含义****
email****		输入邮箱格式
tel****		输入手机号码格式
url****		输入url格式
number****		输入数字格式
search****		搜索框（体现语义化）
range****		自由拖动滑块
time****
date****
datetime****
month****
week****

综合案例

<form action="">
  <fieldset>
    <legend>学生档案</legend>
    <label for="userName">姓名:</label>
    <input type="text" name="userName" id="userName" placeholder="请输入用户名"> <br>
    <label for="userPhone">手机号码:</label>
    <input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><br>
    <label for="email">邮箱地址:</label>
    <input type="email" required name="email" id="email"><br>
    <label for="collage">所属学院:</label>
    <input type="text" name="collage" id="collage" list="cList" placeholder="请选择"><br>
    <datalist id="cList">
      <option value="前端与移动开发学院"></option>
      <option value="java学院"></option>
      <option value="c++学院"></option>
    </datalist><br>
    <label for="score">入学成绩:</label>
    <input type="number" max="100" min="0" value="0" id="score"><br>
    <label for="level">基础水平:</label>
    <meter id="level" max="100" min="0" low="59" high="90"></meter><br>
    <label for="inTime">入学日期:</label>
    <input type="date" id="inTime" name="inTime"><br>
    <label for="leaveTime">毕业日期:</label>
    <input type="date" id="leaveTime" name="leaveTime"><br>
    <input type="submit">
  </fieldset>
</form>

多媒体标签

embed：标签定义嵌入的内容

audio：播放音频

video：播放视频

多媒体 embed（会使用）

embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。

因为兼容性问题，我们这里只讲解插入网络视频，后面H5会讲解 audio 和video 视频多媒体

<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>