首页 > 其他分享 >01_HTML

01_HTML

时间：2023-07-25 21:57:26浏览次数：27  
标签：... 01 标签 元素 表单 HTML 页面

HTML

1.什么是HTML

HTML全称：Hyper Text Markup Language(超文本标记语言)

  • 超文本：页面内可以包含图片、链接，甚至音乐、程序等非文字元素（超出文本的范畴）；
  • 标记：标签，不同的标签实现不同的功能
  • 语言：人与计算机的交互工具

2.HTML书写规范

  • HTML元素标签用<>括起来，通常情况下<>表示开始，</>表示结束；

  • 部分标签不是成对存在，而是在标签内结束:<br/>、<hr/>、<img/>；

  • 标签内部可以添加属性

    <标签名 属性名1="属性值1" 属性名2="属性值2">
    网页元素
</标签名>

  • 标签不区分大小写；

  • 标签与标签之间可以嵌套；

  • 标签可以通过设置属性达到页面设计的要求；

  • HTML的主体标签是<body></body>，在浏览器中显示的文字内容编写在<body>标签中，这些内容包括普通的文字、空格符号和特殊符号以及页面的注释。

3.头部

1.说明

undefinedundefined开始标记，`结束标记，作用范围是整篇文档，且head中包含的内容不会显示在浏览器的窗口中。

2内部常见元素

1.title（掌握）

语法结构：<title>...</title>

说明页面的用途，显示在浏览器的标题栏中

2.meta（掌握）

元信息元素，用来指定有关这个文档的相关信息，包括页面的文字编码，关键字，版权和作者等信息。

通常我们使用该标签设置编码，这个编码告诉浏览器以什么编码格式解析页面中的字符。

<meta charset="UTF-8">

3.style（暂时了解）

创建当前页面中所使用的样式

<style type="text/css">
	...
    ...
    ...
</style>

4.link（暂时了解）

调用其他文档的内容，例如：引入外部css文件。

5.script（暂时了解）

定义一段可执行脚本，完成相应的行为或引入外部脚本文件。注意：script不仅可以放在head中，还可以放到body中

4.HTML基本标签（掌握）

1.注释

<!-- 这是一个单行注释 -->

<!-- 
	这是一个多行注释
-->

2.排版标签

<p>这是一个段落</p>
<p align="left">这是一个段落</p>
<p align="center">这是一个段落</p>
<p align="right">这是一个段落</p>

<!-- 这是一个水平线 -->
<hr/>
<!-- 
	width属性：水平线的长度(两种:第一种:像素表示；第二种，百分比表示) 
	size属性：水平线的粗细 (像素表示，例如：10px)                         
	color属性：水平线的颜色                                  
	align属性：水平线的对齐方式
-->
<hr width="50%" size="5px" color="#0000FF" align="center"/>

3.标题标签

<h1>这是一级标题</h1>

4.基本文字标签

font标签处理网页中文字的显示方式。

<!-- 
	size属性：用于设置字体的大小，最小1号，最大7号
	color属性：用于设置字体的颜色
	face属性：用于设置字体
-->
<font size="7" color="yellow" face="微软雅黑">设置字体</font>

5.文本格式化标签

使用标签实现标签的样式处理

<b>粗体标签</b><br/>
<strong>加粗</strong><br/>
<em>强调字体</em><br/>
<i>斜体</i><br/>
<small>小号字体</small><br/>
<big>大号字体</big><br/>
<p>上标标签<sup>2</sup></p>
<p>下标标签<sub>2</sub></p>
<del>删除线</del>

6.列表标签

无序列表：使用一组无序的符号定义。

<!--
	type属性用来定义符号的类型
		cicle：空心圆
		disc：实心圆
		square：黑色方块
-->
<ul type="circle">
    <li>JavaSE</li>
    <li>JavaWeb</li>
    <li>SSM</li>
    <li>SpringBoot</li>
</ul>

有序列表：使用一组有序的符号定义。

<!--
	type属性用来定义符号的类型
 		1：数字类型
 		A：大写字母类型
 		a：小写字母类型
 		I：大写古罗马
 		i：小写古罗马
	start用来定义起始值
-->
<ol type="1" start="1">
    <li>JavaSE</li>
    <li>JavaWeb</li>
    <li>SSM</li>
    <li>SpringBoot</li>
</ol>

7.图片标签

<!--
	src属性：规定显示图像的URL；
	width属性：设置图像的宽度；
	height属性：定义图像的高度；
	alt属性：规定图像的替代文本，图片无法加载时显示；
	title属性：鼠标悬停时显示的文本。
-->
<img src="./img/pic1.jpg" width="100px" height="100px" alt="大脑" title="brain">

<!-- 
	关于路径：
		./表示当前路径下
		../表示上一级路径下
		什么都不写表示当前路径下
-->
<!-- 当前路径下，和当前html同一级目录下 -->
<img src="./img/pic1.jpg" width="100px" height="100px" alt="大脑">
<!-- 上一级路径下，当前html上一级目录下 -->
<img src="../img/pic1.jpg" width="100px" height="100px" alt="大脑">
<!-- 当前路径下，和当前html同一级目录下 -->
<img src="img/pic1.jpg" width="100px" height="100px" alt="大脑">

8.链接标签

文档的任何部分（如文本、页面、表单、动画或图像等）都可用作超级链接，超级链接可用于指向网站的不同页面或页面的特定部分。

<!--
	href属性：指定连接路径，既可以是本地的路径，也可以是网络中的路径
	title属性：指定连接提示文字
	target属性：连接目标窗口打开方式，target的取值如下
		_blank:在新窗口中打开链接文档
		_self:默认值 在相同框架中打开被链接文档
		_parent:在父框架集中打开被链接文档（了解）
		_top:在整个窗口中打开被链接文档（了解）
	title属性和target属性可以没有
-->
<a href="https://www.baidu.com" title="百度" target="_blank">百度</a>

当一个网页的主题较多或内容较长时，可以在网页内建立多个标记点，将超链接指向这些标记点，使浏览者能快速找到要阅读的内容。

<!-- 创建锚点 -->
<a name="start"></a>
<!-- 创建能回到start位置的连接 -->
<a href="#start">回到顶部</a>

通过上述操作可以完成类似回到顶部的效果。

5.表格标签

  • table：定义表格；

  • caption：定义表格标题；

  • th：定义列标题；

  • tr：定义表格行；

  • td：定义表格单元。

作业

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跨行跨列作业</title>
</head>
<body>
<table border="1">
    <caption> 年终工资报表 </caption>
    <tr>
        <th>区域办</th>
        <th>岗位</th>
        <th>姓名</th>
        <th>工资</th>
    </tr>
    <tr>
        <td rowspan="3">华东区</td>
        <td rowspan="2">人事专员</td>
        <td>张民</td>
        <td>1500</td>
    </tr>
    <tr>
        <td>王红</td>
        <td>15000</td>
    </tr>
    <tr>
        <td rowspan="3">软件开发</td>
        <td>李元凯</td>
        <td>6000</td>
    </tr>
    <tr>
        <td rowspan="2">中南区</td>
        <td>杨涛</td>
        <td>5000</td>
    </tr>
    <tr>
        <td>粮草</td>
        <td>5000</td>
    </tr>
    <tr>
        <td colspan="3">合计</td>
        <td>19000</td>
    </tr>
</table>
</body>

6.表单标签

与网站有交互功能的网页，获取用户输入的数据，提交给后台。

1.基本框架

<!--
	action：表示动作，值为服务器的地址，把表单的数据提交到该地址上处理
	method：提交表单的方式，值为get或post
		get：
			默认的一种传递数据的方法
            通过地址来传递表单中的数据
            不建议传递敏感的数据,如:密码
            不能传递大量的数据,每次只能传递1024字节
            不能上传附件
		post：
			不是通过地址传递数据,相对安全
            可以传递海量的数据
            能上传附件
	enctype：表示是表单提交的类型
		默认值：application/x-www-form-urlencoded，普通表单
		multipart/form-data：多部分表单(一般用于文件上传)	
-->
<form action="服务器地址" method="请求方式" enctype="表单提交的类型">
	...
    ...
    ...
</form>

2.input元素

作为表单中的重要元素，可根据不同type属性值呈现为不同状态，value属性表示初始值，name属性表示当前表单元素对象，表单元素名称。

常见type值：

  • text：单行文本域，常用与较短信息的输入，用户名，联系方式等
    • size:指定控件的宽度，以字符为单位
    • maxlength:可以接收的最大字符数
  • password：密码域，用来输入密码，掩码显示
    • size指定控件的宽度
    • maxlength:可以接收的最大字符数
  • radio：单选按钮，限制选择一项的操作，如性别
    • 同组name值相同
    • checked指定是否被选中
  • checkbox：复选按钮，允许选择多个的操作，如个人爱好
    • 同组name值相同
    • checked指定是否被选中
  • button：普通按钮
  • submit：提交表单按钮
  • reset：重置表单按钮
  • date：日期
  • time：时间
  • datetime：日期+时间
  • email：电子邮件
  • number：数值
    • max规定允许的最大值
    • min规定允许的最小值
    • value默认值
  • file：文件域，用于文件上传操作
  • hidden：隐藏域
  • range：范围
    • max规定允许的最大值
    • min规定允许的最小值
    • step规定合法的数字间隔
    • value规定默认值
  • color：取色按钮
  • month：类型允许选择一个月份
<form action="a.html" method="post">
    <!--
        type表示表单元素类型
        value表示初始值
        name表示表单元素名称，通常用于给服务器传递数据时使用
    -->
    账号:<input type="text" value="aaa" name="username" /><br/>
    密码:<input type="password" name="password" /><br/>
    <!--
        同组name相同
        checked表示选中
    -->
    性别:<input type="radio" name="gender" value="男" checked />男<br/>
    <input type="radio" name="gender" value="女" />女<br/>
    <!--
        同组name相同
        checked表示选中
    -->
	爱好:<input type="checkbox" name="hobby" value="sleep1" checked/>睡觉
    <input type="checkbox" name="hobby" value="sleep2"/>睡觉1
    <input type="checkbox" name="hobby" value="sleep3"/>睡觉2<br/>
    <!-- 按钮 -->
    <input type="submit" value="注册" />
    <input type="reset" value="重置" />
    
    
    <!-- 以下了解即可 -->
    <!-- 
        color 用于选取颜色
        RGB 十六进制数表示颜色
        R---Red红色
        G---Green绿色
        B---Blue蓝色
        六位十六进制的值
        白  #FFFFFF
        黑  #000000
   	-->
    <input type="color" name="color" /><br/>
    <!-- date 日期 -->
	<input type="date" name="date" /><br/>
	<!-- email @ -->
	<input type="email" name="email" /><br/>
	<!-- month 月份 -->
	<input type="month" name="month" /><br/>
	<!-- number 数字
			min最小值
			max最大值
			step每次变化的值
			value默认值
	-->
	<input type="number" name="number" min="1" max="10" step="2" value="5" /><br/>
	<!--
		range 滑动条
	-->
	<input type="range" name="range" min="1" max="100" step="1" value="1"/><br/>
	<!-- 
		time 时 分
	-->
	<input type="time" /><br/>
</form>

3.select 元素(下拉列表)

单选下拉列表：<select></select>

列表项：<option></option>

默认选中属性：selected="selected"

<!-- name:当前下拉列表的名称 -->
<select name="province">
    <option value="beijing">北京市</option>
    <option value="tianjin">天津市</option>
    <option value="chongqing" selected="selected" >重庆市</option>
</select>

多选列表：multiple="multiple"

<select name="hobby" multiple="multiple">
    <option value="game">网游</option>
    <option value="swim">游泳</option>
    <option value="learn">学习</option>
    <option value="sleep">睡觉</option>
</select>

4.文本域

行文本框：< textarea cols="列" rows="行">< /textarea>

人生格言：<textarea rows="5" cols="5"></textarea><br/>

标签：...,01,标签,元素,表单,HTML,页面
From： https://www.cnblogs.com/AaaalexQaQ/p/17581136.html

相关文章

  • xpath丶BeautifulSoup丶pyquery丶jsonpath 解析html与json串
    XPath与jsonpath1importjson2fromlxmlimportetree3fromjsonpathimportjsonpath45defjson_test():6str1='{"name":"埃里克森"}'7#将字符串转为Pythondict对象8js_obj=json.loads(str1)9print(typ......
  • html 之 Bootstrap
    一、Bootstrap介绍1、Bootstrap的由来Bootstrap是一个流行的开源前端框架，用于快速构建响应式和现代化的网站和Web应用程序。它由Twitter的前端工程师MarkOtto和JacobThornton在2011年开发，最初命名为TwitterBlueprint。后来，他们将其开源并更名为Bootstrap。Bootst......
  • 使用安全的HTML编码函数解决XSS攻击
    https://www.sohu.com/a/229034179_100158559https://blog.csdn.net/mgxcool/article/details/73028502对url链接进行转义publicStringhtmlEncode(Stringstr){returnServer.HtmlEncode(str);}......
  • MURF20100CTR-ASEMI快恢复对管封装、尺寸、参数
    编辑：llMURF20100CTR-ASEMI快恢复对管封装、尺寸、参数型号：MURF20100CTR品牌：ASEMI芯片个数：2芯片尺寸：102MIL*2封装：TO-220F恢复时间：50ns工作温度：-50°C~150°C浪涌电流：200A正向电流：20A反向耐压：1000V正向压降：1.10V引脚数量：2漏电流：＞10uaMURF20100CTR二极管特性：MURF20100......
  • ASEMI快恢复二极管SFP6012A参数， SFP6012A规格
    编辑-ZSFP6012A参数描述：型号：SFP6012A最大峰值反向电压(VRRM)：1200V平均整流正向电流(IF)：60A非重复峰值浪涌电流(IFSM)：500A工作接点温度和储存温度(TJ,Tstg)：-40to+175℃最大热阻(RθJC)：0.5℃/W正向电压(VF)：2.4V最大瞬时反向电流(IR)：0.01mA最大反向恢复时间(TRR)：≤100ns......
  • 洛谷 P3291 [SCOI2016] 妖怪
    设每只怪物经过环境影响后的攻击力和防守力分别为\(x_i,y_i\)，则有：\(y_i=dnf_i-\dfracba(x_i-atk_i)\)。设\(k=-\dfracba\)，则有\(y_i=kx_i+dnf_i-k\cdotatk_i\)。设直线\(l_i:y_i=kx_i+dnf_i-k\cdotatk_i\)，第\(i\)只怪物在\((a,b)\)的环境下......
  • 洛谷P3629 [APIO2010] 巡逻题解
    题目链接P3629[APIO2010]巡逻-洛谷|计算机科学教育新生态(luogu.com.cn)思路n个村庄，n-1条道路，原图为树1.若k=0（不修建道路）那么答案为（n-1）*2 每个道路会走两遍2.若k为1（修建一条道路）设修建的道路（r1）所在的环长度为L那么答案为（n-1）*2-L+2可以看到r1所在环的道路只走了......
  • visual studio community 2017 许可证即将过期
     打开发现通知，许可证即将过期点击后如图所示发现点击更新后根本没用，打不开其内容，看了数个文章，尝试后发现这是只需要关闭wifi（PS：比如校园网等），打开使用自己的热点进行连接即可进去加载页面然后根据提示进行简单操作即可，我使qq邮箱登录的社区版，这样微软直接给你发个qq邮箱验......
  • 题解 CF1501A 【Alexey and Train】
    postedon2021-03-1321:57:02|under题解|source简单模拟题，考验选手的读题能力和使用谷歌翻译的能力。先定义一个\(now=0\)，我们最后算出来的结果为\(now\)。对于每个站（不包括第\(n\)站），我们需要加上\(3\)个部分：额外时间，now+=ex[i]；第\(i-1\)站到第\(i\)站的时......
  • 题解 CF1501B 【Napoleon Cake】
    postedon2021-03-1617:42:06|under题解|source题目可以转化一下：给一个长为\(n\)的数组\(a\)，请求出一个长为\(n\)的数组\(b\)。要求若\(a_i\)不为\(0\)，则\([b_{i-a_i+1},b_i]\)这个区间要为\(1\)。知道这个题目意思就好办了。题目说\(n\leq2\times10^5\)，......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99