前端 HTML（1）
2024-05-22 21:44:53
<!doctype html>
<!--@@@ 2021/1/23 @@@-->
<html lang="en">
<head><meta charset="UTF-8"><title>html 第一天</title>
</head>
<body><!-- 1. html 文件包括头部分和身体部分，头部分的内容不会显示在网页中，身体部分的内容会显示在网页中 --><!-- 2. 标签语法：尖括号包围关键字形成；分类：单标签和双标签--><p>双标签</p><!-- 类似 <开始标签></结束标签> 的是双标签 --><hr/><!-- 单标签(自闭合标签)--><!-- 3. 基本标签-->
<!-- 标题标签(1,2,3,4级)--><h1>我是1级标题</h1><h2>我是2级标题</h2><h3>我是3级标题</h3><h4>我是4级标题</h4>
<!-- 一般标签(其 align 属性可以决定其对齐方式)--><p align="right">我是向右对齐的一般标签</p><p align="left">我是向左对齐的一般标签</p><!-- 特别注意...--><!-- 标签pre中保留空格和换行 --><!-- 一个标签p表示一个段落，在此标签里加上换行br，仍表示一个段落；空格需要用 代替 --><p> 我是猪猪侠.<br/> 我是驹驹波.</p><!-- 标签pre中保留空格和换行 --><pre align="left"> 我是猪
我也是猪</pre><!-- 4. 特殊标签-->
<!-- 加粗(b)/斜体(i)/下标(sub)/上标(sup)/下划线(ins)/删除线(del)/水平线(hr) --><p>i <b>love</b> you!</p><p>i <i>love</i> you!</p><p>i <sub>love</sub> you!</p><p>i <sup>love</sup> you!</p><p>i <ins>love</ins> you!</p><p>i <del>love</del> you!</p><hr/><!-- 5. 特殊符号 -->
<!-- 已注册(®)/版权(©)/空格( )/小于号(<)/大于号(>) --><p>i love you!®</p><p>i love you!©</p><p>i love you! </p><p>i love you!<p></p><p>i love you!></p><!-- 6.列表标签 --><!-- 6.1. 无序列表标签 -->
<!-- ul/li；ul 代表无序列表，li 代表列表中的项目-->
<!-- 引领项目的元素默认为小黑点(disc)，可以通过 type 参数修改为正方形(square)和空心圆(circle) --><ul type="circle"><li>lv na is a girl!</li><li>lv pei tong is a girl, too!</li></ul><!-- 6.2. 有序列表标签 -->
<!-- ol/li；ol 代表有序列表，li 代表列表中的项目 -->
<!-- 引领列表的序号默认为数字(1)，可以通过 type 参数修改为小写字母(a)、大写字母(A)、小写罗马字母(i)和大写罗马字母(I) --><ol type="I"><li>苹果是圆的.</li><li>香蕉是弯的.</li></ol><!-- 6.3. 自定义列表标签 -->
<!-- dl/dt/dd；dl 代表列表，dt 代表列表中的项目；dd 代表项目描述项--><dl><dt>苹果</dt><dd>苹果是红的.</dd><dd>苹果可以吃.</dd><dt>鸟</dt><dd>鸟很漂亮.</dd><dd>鸟会飞.</dd></dl><!-- 7. 图片标签 -->
<!-- 参数 src 代表图像的路径；参数 width 和 height 分别代表图像的宽和高(数值和百分比表示)；
当图片路径错误或者图片误删，参数 alt 可以添加描述文字 --><img src="data:images/first.png" alt="图片没有找到." width="100px" height="100px"><!-- 8. 超链接标签 -->
<!-- 参数 href 表示链接地址，参数 title 表示链接提示文字，参数 target 表示跳转的窗口(默认是_self原窗口跳转，_blank新建窗口跳转) --><a href="http://www.4399.com/" target="_blank" title="这个超链接是游戏的.">4399</a><!-- 9. div与span标签 -->
<!-- div 代表块元素，表示一块内容；唯一的格式就是换行(借助br标签)；常结合css用于页面布局 -->
<!-- span 代表行内元素，内容有多宽就占多宽的空间距离；常用于修饰段落中的布局样式 --><div>我喜欢你.我喜欢你.我喜欢你.我喜欢你.我喜欢你.我喜欢你.我喜欢你.我喜欢你.我喜欢你.我喜欢你.我喜欢你.我喜欢你.我喜欢你.我喜欢你.我喜欢你.我喜欢你.我喜欢你.我喜欢你.我喜欢你.我喜欢你.我喜欢你.我喜欢你.我喜欢你.</div>
<!-- 利用 span 标签，通过其 style 方法修饰段落标签p的内容 --><p>鲜红色的<span style="color:red">草莓.</span></p><!-- 10. 表格标签 -->
<!-- table/tr/td；table 表示表格，tr 代表行，td 代表列 -->
<!-- 参数 border 代表表格的边框(单位为像素)-->
<!-- 表格一般都有一个明显的表头；如果我们想让第一行元素标黑显示，我们需要把第一行全部的列标签 td 换成 th 标签 -->
<!-- 表格参数：width，height；表格列参数：align(内容居中：center；内容居左(默认)：left；内容居右：right) -->
<!-- 表格列参数：valign(内容居顶：top；内容居中(默认)：middle；内容居底：bottom) --><table border="1px" width="300px" height="200px"><tr><th>1</th><th>2</th><th>3</th></tr><tr><td align="center" valign="top">4</td><td align="center" valign="bottom">5</td><td align="center" valign="middle">6</td></tr></table><br/><br/><br/><br/><br/>
<!-- rowspan/colspan 分别代表垂直合并和水平合并 --><table border="1px solid black" width="300px" height="300px"><tr><th rowspan="2">姓名</th><th colspan="2">爱好</th></tr><tr><td align="center">萝卜</td><td align="center">青菜</td></tr><tr><td align="center">Susu</td><td align="center">是</td><td></td></tr><tr><td align="center">Nana</td><td></td><td align="center">是</td></tr></table><br><br><br><!-- 11. 表单标签 -->
<!-- form 代表表单标签，label 代表表单文字标注标签 input -->
<!-- 表单单标签的 type 属性：text(明文输入框)， password(暗文输入框)，radio(单选框)，checkbox(多选框) -->
<!-- textarea(多行文本输入框) -->
<!-- select(下拉框) option(选项) -->
<!-- 表单的提交：input 标签的 submit 属性可以用来提交；其 value 值可以修改提交按钮的标注 --><form action=""><lable>用户名：</lable><input type="text"><br><!-- 三个空格代表一个汉字的长度 --><label>密 码：</label><input type="password"><br><!-- 单选框必须选择 --><!-- 单选框的属性 name 表示几个选择框为同一组单选框，只能选择其一 --><!-- label 的 for 属性与单选框的 id 属性关联可以实现点击文字勾上单选框 --><label>喜 欢：</label><input type="radio" name="love" id="apple"><label for="apple">苹果</label><input type="radio" name="love" id="orange"><label for="orange">橘子</label><br><!-- 多选框的属性 name 表示几个选择框为同一组多选框 --><!-- label 的 for 属性与多选框的 id 属性关联可以实现点击文字勾上多选框 --><label>喜 欢：</label><input type="checkbox" name="love" id="watermelon"><label for="watermelon">西瓜</label><input type="checkbox" name="love" id="pie"><label for="pie">派</label><br><!-- rows 代表初始高；cols 代表初始宽 --><textarea cols="80px" rows="20px"></textarea><br><select><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option></select><br><input type="submit" value="娜娜催你快提交."></form>
<!-- 需要提交表单时，要用到 name 属性-->
<!-- 表单的 action 定义表单数据提交地址，默认为当前页面 -->
<!-- 表单的 method 定义表单数据提交方式(get/post)，post 更加安全，采用 http 协议加密运输 -->
<!-- get 提交会把数据返回到指定页面的 url 上 -->
<!-- post 提交不会把数据返回到指定页面的 url 上 --><form action="" method="get"><lable>用户名：</lable><input type="text" name="username"><br><br><label>密 码：</label><input type="password" name="password"><input type="submit" value="憨憨.快提交."></form>
</body>
<!-- 多行文本输入框 -->
</html>
前端 HTML（1）相关推荐
- etcd 笔记（02）— etcd 安装（apt 或 yum 安装 、二进制包安装、Docker 安装 etcd、etcd 前端工具etcdkeeper）
1. 使用 apt 或 yum 安装 etcd 命令如下: sudo apt-get install etcd 或者 sudo yum install etcd 这样安装的缺点是:安装的 etcd 版 ...
- 【牛腩新闻发布系统】开始前端03
前言: 后台代码写好后,开始按照设计实现前端,之前有做过关于网页的东西,不过是用Dreamweaver做的静态,不能实现和数据库的交互,如果只是单纯学界面设计的话,用Dreamweaver容易上手,在 ...
- LLVM Clang前端编译与调试
LLVM Clang前端编译与调试 iOS 关于编译 o 一.Objective-C 编译过程 o 为什么需要重新编译? o 编译步骤 o 二.编译步骤的详细说明 o 1.预处理 o 2.编译 o 词 ...
- Clang：LLVM 的 C 语言家族前端
Clang:LLVM 的 C 语言家族前端 Clang 项目为LLVM 项目的 C 语言家族(C.C++.Objective C/C++.OpenCL.CUDA 和 RenderScript)中,提供 ...
- TensorFlow Frontend前端
TensorFlow Frontend前端 TensorFlow前端有助于将TensorFlow模型导入TVM. Supported versions: • 1.12 and below Tested ...
- Clang：LLVM的C语言家族前端
Clang:LLVM的C语言家族前端 Clang项目为LLVM 项目的C语言家族(C,C ++,Objective C / C ++,OpenCL,CUDA和RenderScript)中的语言提供了语 ...
- 前端的单页面模式和多页面模式
一.前言 前端部分的搭建,需要考虑使用哪种模式进行页面之间的跳转交互, 而项目内的页面交互,不可避免的需要相互之间的数据共享. 这就引出了本篇博客的目的,一起来谈谈:项目前端部分的构建方式以及数据共享 ...
- JavaScript—— 前端编程语言
JavaScript 前端编程语言 http://caibaojian.com/javascript/ 转载于:https://www.cnblogs.com/highpointengineer/ ...
- day44前端开发1之html基础
web前端开发1 一.前端三剑客之html 1.为标记语言,是非编程语言 2.自身不具备逻辑,遇到负责重复操作只能全部手写(Ctrl+C > V) 3.组成:标签, 指令, 实体 标签: ...
- 转 前端工程师凭什么这么值钱？
[CSDN编者按]前端工程师的薪资之高是业界公认的事实,但是很多人会质疑前端工程师,认为他们并不能称为软件工程师,也"配不上"高昂的报酬.本文的作者分享了自己从一个前端菜鸟成长为一 ...
最新文章
- 五分钟看懂抓包神技：DPDK
- Python+selenium 自动化 - 实现自动导入、上传外部文件实例演示
- Resnet的pytorch官方实现代码解读
- C/C++中extern关键字详解与应用
- 企业定时任务调度器Quartz，定时查询数据库(这里还需要继续做研究)
- VB.NET怎样开发自定义Windows控件
- unet图像分割_UNet++解读 + 它是如何对UNet改进 + 作者的研究态度和方式
- 我是如何从双非本科到拿到微软校招offer的？
- hashmap修改对应key的值_死磕 java集合之HashMap源码分析
- 安装TinyOS需要六个步骤
- 专家答疑：揭开虚拟化的迷雾
- 送书丨超级畅销书《漫画算法》50 本免费送！
- 编程C语言集装箱体积,《我的第①本c语言编程书：C语言从入门到精通》国家863中部软件孵化器【pdf】...
- ‘scope‘ is defined but never used (vue/no-unused-vars) at src\views\manage\List.vue:18:51: 解决方法
- 移动支付新趋势：短信支付「Pay by Text」
- PON串口链接详细步骤说明
- IE浏览器高通网站打不开dump分析选择目录总结
- 基于图像特征点匹配的三维立体重建
- 因为洋红色被告垄断，德国电信心塞
- 使用apk来控制指纹（指纹型号迈瑞微 ECS120）