首页 > 其他分享 >html学的皮毛

html学的皮毛

时间：2023-03-26 17:23:36浏览次数：38  
标签：-- 标签 31 html color 皮毛 宝安 选择器

1、标题标签

<!DOCTYPE html>                                   　　　　    　　<!--声名文档的类型是html-->

<html>                                         　　　　　　　　　　　 <!--这个<>叫做标签，这里html的开始 -->          

　　<head>                                       　　　　　　　　 　<!--这里是html的头部-->

　　　　<meta charset="UTF-8">            　　　　　　       <!--表示当前页面的编码的格式-->

　　　　<title>百度一下你就知道</title>     　　　　　　      <!--表示html的title-->

　　</head>                                      　　　　　　　　　　  <!-- 这是html的结束      -->

　　<body>                                   　　　　　　　　　　      <!-- 体部开始-->

　　　　<h1>加油干，走上人生巅峰</h1>

　　　　<h2>加油干，走上人生巅峰</h2>

　　　　<h3>加油干，走上人生巅峰</h3>　　　　　　　　（输出结果：字体从大到小h1>h2>h3>h4）

　　　　<h4>加油干，走上人生巅峰</h4>

　　</body>                                   　　　　　　　　　　　　      <!--体部结束-->

</html>                              

 

 

2、段落标签

<!DOCTYPE html>

<html>

　　<head>

　　　　<meta charset="UTF-8">

　　　　<title>段落标签</title>

　　</head>

　　<body>

　　　　<!--p标签就是段落标签可以字段换行有间距-->

　　　　<!--em标签和i标签可以把字体变斜体 代表的是空格-->

　　　　<!--font标签空格输入color选择字体颜色-->

　　　　<!--b和strong标签代表加粗字体-->

　　　　<p>我是一个段落</p>

　　　　<p>我又是一个段落</p>

　　　　<em>我是一个斜体</em>

　　　　<i>我也是一个  斜体</i>

　　　　<font color="red">深圳多测师</font>

　　　　<b>多测师</b>

　　　　<strong>深圳<font color="red">多测师</font></strong>

　　</body>

</html>

 

3、图片标签

<!DOCTYPE html>

<html>

　　<head>

　　　　<meta charset="UTF-8">

　　　　<title>图片标签</title>

　　</head>

　　<body>

　　　　<!--谷歌浏览器不支持alt属性可以改成title-->

　　　　<!--title这种红色的字体都称为属性，等于号后面的都称为属性的值-->

　　　　<!--引用本地资源-->

　　　　<img src="../img/京东.png" title="剁手的地方" height="100px" width="200px"/>

　　　　<!--引用网络资源-->

　　　　<img src="//imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2000368/10044338947321/FocusFullshop/CkJqZnMvdDEvNzk3NTAvMjkvMjA3MTgvNzE2NjEvNjJiN2YxNjRFZTU3MTA0NTcvMDgwYWY1ZjJhN2QwNjdhYy5qcGcSCjk5OS10eV8wXzEwATjwi3pY-YmFiqqkAg/cr/s/q.jpg"/>

　　　　<!--超链接标签里面嵌套图片-->

　　　　<!--点击图片的时候回跳转这个网址-->

　　　　<a href="https://www.baidu.com/"><img src="../img/京东.png" alt="" /></a>

　　</body>

</html>

 

 

4、链接标签

<!DOCTYPE html>

<html>

　　<head>

　　　　<meta charset="UTF-8">

　　　　<title>链接标签</title>

　　</head>

　　<body>

　　　　<!--链接标签也叫a标签，在当前页面打开会覆盖当前页面-->

　　　　<a href="https://www.baidu.com/">百度一下你就知道</a>

　　　　<!--新窗口打开一个网页，加一个target属性为_blank（空白页）-->

　　　　<a href="https://www.baidu.com/" target="_blank">百度一下你就知道</a>

　　　　<!--在a标签里面嵌套图片-->

　　　　<a href="https://www.baidu.com/"><img src="../img/京东.png" alt="" /></a>

　　　　<!--死链接-->

　　　　<a href="#">这是一个死链接</a>

　　　　<a href="https://www.baidu.comfdsfdsa/">这也是一个死链接</a>

　　</body>

</html>

 

5、有序列标签

<!DOCTYPE html>

<html>

　　<head>

　　　　<meta charset="UTF-8">

　　　　<title>有序列标签</title>

　　</head>

　　<body>

　　　　<ol>

　　　　　　<li>

　　　　　　　　<ol>

　　　　　　　　<li>跑车</li>

　　　　　　　　<li>篮球</li>

　　　　　　　　<li>LOL</li>

　　　　　　　　<li>爬山</li>

　　　　　　　</ol>

　　　　　　</li>

　　　　　</ol>

　　　　　<!--ol>li>ol>li*4  +按住tab键 快速生成-->

　　</body>

</html>

 

 

6、无序列标签

<!DOCTYPE html>

<html>

　　<head>

　　　　<meta charset="UTF-8">

　　　　<title>无序列标签</title>

　　</head>

　　<body>

　　　　<ul>

　　　　　　<li>男生

　　　　　　　　　　<ui>

　　　　　　　　　　　　<li>奔驰</li>

　　　　　　　　　　　　<li>宝马</li>

　　　　　　　　　　　　<li>法拉利</li>

　　　　　　　　　　　　<li>迈巴赫</li>

　　　　　　　　　　</ui>

　　　　　　　　</li>

　　　　　　</ul>

　　　　</body>

</html>

 

 

7、表格标签

<!DOCTYPE html>

<html>

　　<head>

　　　　<meta charset="UTF-8">

　　　　<title>表格标签</title>

　　</head>

　　<body>

　　　　<!--border表格最外层的加粗,cellspacing 最外层跟表格的间距,align值为center表示居中显示-->

　　　　<table border="1" cellspacing="5" cellpadding="20" height="200px" width="300px" align="center">

　　　　　　<!--一个tr标签表示一行，td表示一列-->

　　　　　　<!--th标签表示表头，在td的基础上把字体加粗并把字体居中-->

　　　　　　<tr>

　　　　　　　　<td align="center">姓名</td>

　　　　　　　　<td align="center">工资</td>

　　　　　　　　<!--<th>姓名</td>-->

　　　　　　　　<!--<th>工资</td>-->

 

　　　　　　　</tr>

　　　　　　　<tr>

　　　　　　　　　　<td align="center">小程</td>

　　　　　　　　　　<td align="center">1800</td>

　　　　　　　</tr>

　　　　　　　<tr>

　　　　　　　　　　<td align="center">小张</td>

　　　　　　　　　　<td align="center">2000</td>

　　　　　　　</tr>

　　　　　</table>

　　　</body>

</html>

 

 

8、表格行合并标签

<!DOCTYPE html>

<html>

　　<head>

　　　　<meta charset="UTF-8">

　　　　<title>表格标签</title>

　　</head>

　　<body>

　　　　<!--border表格的间隔,cellspacing 单元格和单元格之间的间距,cellpadding表示单元和表格之间的间距，align值为center表示居中显示-->

　　　　<table border="1" cellspacing="0" cellpadding="20" height="200px" width="300px" align="center">

　　　　　　<!--一个tr标签表示一行，td表示一列-->

　　　　　　<!--th标签表示表头，在td的基础上把字体加粗并把字体居中-->

　　　　　　<tr>

　　　　　　　　<td align="center">姓名</td>

　　　　　　　　<td align="center">工资</td>

　　　　　　　　<!--<th>姓名</td>-->

　　　　　　　　<!--<th>工资</td>-->

 

　　　　　　　</tr>

　　　　　　　<tr>

　　　　　　　　　　<td align="center">小程</td>

　　　　　　　　　　<td align="center" rowspan="2">1800</td>     <!--rowspan属性是行合并-->

　　　　　　　</tr>

　　　　　　　<tr>

　　　　　　　　　　<td align="center">小张</td>

　　　　　　　　　　<!--<td align="center">2000</td>-->

　　　　　　　　</tr>

　　　　　　</table>

　　　　</body>

</html>

 

9、表格列合并标签

<html>

　　<head>

　　　　<meta charset="UTF-8">

　　　　<title>表格标签</title>

　　</head>

　　<body>

　　　　<!--border表格的间隔,cellspacing 单元格和单元格之间的间距,cellpadding表示单元和表格之间的间距，align值为center表示居中显示-->

　　　　<table border="1" cellspacing="0" cellpadding="20" height="200px" width="300px" align="center">

　　　　　　<!--一个tr标签表示一行，td表示一列-->

　　　　　　<!--th标签表示表头，在td的基础上把字体加粗并把字体居中-->

　　　　　　<tr>

　　　　　　　　<td align="center">姓名</td>

　　　　　　　　<td align="center">工资</td>

　　　　　　　　<!--<th>姓名</td>-->

　　　　　　　　<!--<th>工资</td>-->

 

　　　　　　</tr>

　　　　　　<tr>

　　　　　　　　<td align="center">小程</td>

　　　　　　　　<td align="center">1800</td>     

　　　　　　</tr>

　　　　　　<tr>

　　　　　　　　<td align="center" colspan="2">小张</td>   <!--colspan属性表示列合并-->

　　　　　　　　<!--<td align="center">2000</td>-->

　　　　　　</tr>

　　　　</table>

　　</body>

</html>

 

 

10、表单标签

<html>

　　<head>

　　　　<meta charset="UTF-8">

　　　　<title>表单标签</title>

　　</head>

　　<body>

　　　　<!--action后面接的是URL地址，method指的是接口的请求方法为post-->

　　　　<form action="https://www.baidu.com/" method="post">

　　　　　　<p>

　　　　　　　　用户名：<input type="text" name="classname" id="username" value="" placeholder="手机号码/用户名/邮箱"/>

　　　　　　</p>

　　　　　　<p>

　　　　　　　　密码：<input type="password" name="pwd" id="password" value=""/>

　　　　　　</p>

　　　　　　<!--单选框-->

　　　　　　<p>

　　　　　　　　<!--name属性的值需要加上sex否则会出现同时可以选择男和女的bug-->

　　　　　　　　<!--checked表示默认选择-->

　　　　　　　　<input type="radio" name="sex" id="" value="" />男

　　　　　　　　<input type="radio" name="sex" id="" value=""  checked=""/>女

　　　　　　</p>

　　　　　　<!--复选框-->

　　　　　　<p>请选择您的兴趣爱好

　　　　　　　　<input type="checkbox" name="" id="" value="" />篮球

　　　　　　　　<input type="checkbox" name="" id="" value="" />羽毛球

　　　　　　　　<input type="checkbox" name="" id="" value="" />乒乓球

　　　　　　</p>

　　　　　　<!--下选择框-->

　　　　　　<p>

　　　　　　　　<select name="">

　　　　　　　　　　<option value="">请选择您要就读的大学</option>

　　　　　　　　　　<option value="">深圳大学</option>

　　　　　　　　　　<option value="">广州大学</option>

　　　　　　　　</select>

　　　　　　</p>

　　　　　　<p>自我介绍：<br />    <!-- br标签表示换行-->

　　　　　　　　<textarea name="" rows="5" cols=""></textarea>

　　　　　　</p>

　　　　　　<!--上传文件框-->

　　　　　　<p>请选择你要上传的文件：

　　　　　　　　<input type="file" name="" id="" value="" />

 

　　　　　　</p>

　　　　　　<p>

　　　　　　　　<input type="button" name="" id="" value="按钮" />

　　　　　　　　<input type="reset" name="" id="" value="重置" />

　　　　　　　　<input type="submit" name="" id="" value="提交" />

　　　　　　</p>

　　　　</form>

　　</body>

</html>

 

11、层叠样式表

<html>

　　<head>

　　　　<meta charset="UTF-8">

　　　　<title>层叠样式表</title>

　　　　<!--第一种通过再head标签中加入style标签来修饰-->

　　　　<style type="text/css">

　　　　　　p{

　　　　　　　　color: red;

　　　　　　　}

 

　　　　</style>

　　　　<!--第三种通过外链方式修饰-->

　　　　　<link rel="stylesheet"  type="text/css" href="../css/text.css" />

　　</head>

　　<body>

　　　　<!--第二种在p标签加上style属性，优先级最高-->

　　　　<!--<p style="color: blue;">宝安31班</p>-->

　　　　<p>宝安31班</p>

　　　</body>

</html>

 

12、组合选择器

<html>

　　<head>

　　　　<meta charset="UTF-8">

　　　　<title>组合选择器</title>

　　　　<style type="text/css">

　　　　　　p,em{

　　　　　　　　color: red;

　　　　　　　}

　　　　</style>

　　</head>

　　<body>

　　　　<p>宝安31班</p>

　　　　<em>宝安31班</em>

　　</body>

</html>

 

13、id选择器

<html>

　　<head>

　　　　<meta charset="UTF-8">

　　　　<title>id选择器</title>

　　</head>

　　<style type="text/css">

　　　　#dcs31{

　　　　　　color: red;

　　　　}

　　</style>

　　<body>

　　　　<p id="dcs31">宝安31班</p>

　　</body>

</html>

 

14、class选择器

<html>

　　<head>

　　　　<meta charset="UTF-8">

　　　　<title>class选择器</title>

　　</head>

　　<style type="text/css">

　　　　.dcs31{

　　　　　　color: blue;

　　　　}

　　</style>

　　<body>

　　　　<p class="dcs31">宝安31</p>

　　</body>

</html>

 

 

15、伪类选择器

<html>

　　<head>

　　　　<meta charset="UTF-8">

　　　　<title>伪类选择器</title>

　　　　<style type="text/css">

　　　　　　p{

　　　　　　　　color: red;

　　　　　　}

　　　　　　p:hover{

　　　　　　　　color: blue;

　　　　　　　　cursor: pointer;

　　　　　　}

　　　　</style>

　　</head>

　　<body>

　　　　<p>宝安31班</p>

　　</body>

</html>

 

 

16、标签选择器

<html>

　　<head>

　　　　<meta charset="UTF-8">

　　　　<title>标签选择器</title>

　　　　<style type="text/css">

　　　　　　em{

　　　　　　　　color: red;

　　　　　　}

　　　　</style>

　　</head>

　　<body>

　　　　<p>宝安31班</p>

　　　　<em>宝安31班</em>

　　</body>

</html>

 

17、字体样式和文本样式

<html>

　　<head>

　　　　<meta charset="UTF-8">

　　　　<title>字体样式和文本样式</title>

　　　　<style type="text/css">

　　　　　　p{

　　　　　　　　color: red;

　　　　　　　　font: "微软雅黑";

　　　　　　　　font-family: "微软雅黑";

　　　　　　　　font-size: inherit;

　　　　　　　　cursor: pointer;

　　　　　　　}

　　　　　</style>

　　　　</head>

　　<body>

　　　　<p>深圳多测师宝安31班</p>

　　</body>

</html>

 

 

 实例：学生登记表

<!DOCTYPE html>
<html>
　　<head>
　　　　<meta charset="UTF-8">
　　　　<title >学生登记报名表</title>

　　</head>
　　<body >
　　　　<form action="" method="post" >
　　　　<table border="1" cellspacing="0" cellpadding="1" height="400" width="500" align="center" bgcolor="#00FF00">
　　　　　　<tr>
　　　　　　　　<style type="text/css">
　　　　　　　　　　th{font-size: 25px;}
　　　　　　　　</style>
　　　　　　　　<th height="90" colspan="2" >学生登记报名表</th>

　　　　　　</tr>

　　　　　　<tr>
　　　　　　　　<td width="100">用户名</td>
　　　　　　　　<td align="center">
　　　　　　　　<input type="text" name="" id="" value="" placeholder="请输入你的姓名" />
　　　　　　</td>

　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td width="100">密码</td>
　　　　　　　　<td align="center">
　　　　　　　　<input type="password" name="" id="" value="" placeholder="6位数字"/>
　　　　　　　　</td>
　　　　　　</tr>

　　　　　　<tr>
　　　　　　　　<td width="100">密码确认</td>
　　　　　　　　<td align="center">
　　　　　　　　<input type="password" name="" id="" value="" placeholder="再次确认您的密码"/>
　　　　　　</td>
　　　　　　</tr>

　　　　　　<tr>
　　　　　　　　<td width="100">性别</td>
　　　　　　　　<td>
　　　　　　　　<input type="radio" name="sex" id="" value="" />男
　　　　　　　　<input type="radio" name="sex" id="" value="" />女
　　　　　　　　</td>
　　　　　　</tr>

　　　　　　<tr>
　　　　　　　　<td width="100">选择科目</td>

　　　　　　　　<td>
　　　　　　　　　　<input type="checkbox" name="" id="" value="" />html
　　　　　　　　　　<input type="checkbox" name="" id="" value="" />python
　　　　　　　　　　<input type="checkbox" name="" id="" value="" />linux
　　　　　　　　　　<input type="checkbox" name="" id="" value="" />mysql
　　　　　　　　</td>
　　　　　　</tr>

　　　　　　<tr>
　　　　　　　　<td width="100">选择学校</td>
　　　　　　　　<td>
　　　　　　　　　　<select name="">
　　　　　　　　　　<option value="">-请选择您要就读的大学-</option>
　　　　　　　　　　<option value="">深圳大学</option>
　　　　　　　　　　<option value="">广州大学</option>
　　　　　　　　　　<option value="">社会大学</option>
　　　　　　　　　　</select>
　　　　　　　　</td>
　　　　　　</tr>

　　　　　　<tr>
　　　　　　　　<td width="100">选择文件</td>
　　　　　　　　<td>
　　　　　　　　　　<input type="file" name="" id="" value="" />
　　　　　　　　</td>
　　　　　　</tr>

　　　　　　<tr>
　　　　　　　　<td width="100" colspan="2" align="center">
　　　　　　　　<input type="reset" name="" id="" value="重置" />
　　　　　　　　<input type="submit" name="" id="" value="提交" />
　　　　　　　　</td>
　　　　　　</tr>

　　　　　　</table>
　　　　</form>
　　</body>
</html>

 

标签：--,标签,31,html,color,皮毛,宝安,选择器
From： https://www.cnblogs.com/jjm414/p/17259005.html

相关文章

  • Gin学习笔记--Gin Html模版渲染
    当后台html文件与前台html文件都存储在一个文件下，会显的很臃肿，这时我们需要将前台文件与后台文件区分开来，具体例子如下：案例代码：packagemainimport("github.co......
  • 一些常用的HTML标签
    空格nbsp;长传图片在上面实时显示<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,in......
  • HTML之表单中的label
    label可以获取焦点，将文字和input关联起来法一：当label中的for属性值与input中的id属性值相同时就能关联起来了1<labelfor="zhanghu">账户：</label>2<......
  • vue/html 日期与时间戳互相转换
    1、将日期转换成时间戳lettime=parseInt(newDate().getTime()/1000);console.log(time)2、接口传过来的UTC日期和13位时间戳格式化constformateDate=(time......
  • HTML 文本处理基础
    提前声明本博客只是将自己学到的知识做总结而已，细节学习请来这里，大佬的教学很详细很棒。学习结果展示本次学习学到了 标题的使用 无序列表的使用看，第二个无......
  • html 音频自动播放
    chrome处于安全考虑,不会自动播放音视频,只能与页面有交互后调用播放函数<!DOCTYPEhtml><html><head> <title>音乐自动播放</title></head><body> <audioautoplay="......
  • HTML标签盒模型
    一、自我介绍本人2021年6月参加工作，擅长技术主要有html/css/javaScript/vue/uni等，很懒一直都不想写文章，这是我第一篇博文。二、技术分享盒模型原理行内元素特性：1、无法设置......
  • 聊聊Python中的GIL https://www.cnblogs.com/ArsenalfanInECNU/p/9968621.html
    抄自:https://www.cnblogs.com/ArsenalfanInECNU/p/9968621.htmlGIL的全称是GlobalInterpreterLock，全局解释器锁。因为Python的执行依赖于解释器。Python最初的设计理......
  • 纯CSS和HTML打造树结构
    阅读目录源码HTML源码请到资源下载源码。HTML我们以某个公司的部门组织结构为例，其实就是一个无限级分类，我们首先定义好HTML结构，它有ulli组成，代码应该像这样：<!DOCTYPEhtml>......
  • Html字符转码
    标记十进制编码编码™&#8482; € &euro;Space&#32;&nbsp;!&#33; "&#34;"#&#35; ......

赞助商

阅读排行

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

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

Copyright © 2020-2023 IPS99 版权所有 IPS99