HTML基础学习(一)—HTML
一、HTML的介绍
HTML(HyperText Markup Language)超文本标记语言,不是一种编程语言,而是一种描述性的标记语言,用于描述超文本的内容的显示,比如字体颜色或者大小。
HTML是最基础的网页语言,它是通过标签定义的语言,代码是由标签所组成的。
<!DOCTYPE html>
<html><head><!--1.放置一些属性信息,辅助信息。2.引入一些外部的文件(css js)。3.它里面的内容会先加载。--><meta charset="UTF-8" /><title>这是HTML标题</title></head><body><font color="red">这是网页正文</font> </body>
</html>
二、HTML标签的使用
1.排版标签
(1)<br/>
换行。
(2)<p></p>
段落标签,在开始和结束的位置上留一个空行。
属性: align="left/center/right"对齐方式。
(3)<hr/>
一条水平线。
(4)div
声明一块区域。
<div>数据</div>
(5)span
声明一块区域。
<!DOCTYPE html>
<html><head><title>HTML学习</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"></head><body>---------------------p标签测试---------------------<p>HTML(HyperText Markup Language)超文本标记语言,不是一种编程语言,而是一种描述性的标记语言,用于描述超文本的内容的显示,比如字体颜色或者大小。</p>---------------------hr标签测试---------------------<hr align="left" width="50%"/>---------------------div标签测试---------------------<br><div>这是div区域1</div><div>这是div区域2</div>---------------------span标签测试---------------------<br><span>这是span区域1</span><span>这是span区域2</span></body>
</html>
结果:
2.字体标签
(1)<font></font>
中间放文字,设置文字的颜色大小。
sieze:字号大小最大值7,最小值1。
(2)标题标签
<h1></h1>
……字体从大到小……
<h7></h7>
(3)<b></b>
粗体。
(4)<i></i>
斜体。
3.列表标签
数据对齐格式化。
(1)<ol></ol>
有序列表。
(2)<ul></ul>
无序列表。
<!DOCTYPE html>
<html>
<head>
<title>HTML学习</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head><body><h2>有序列表</h2><ol type="a"><li>AAA</li><li>BBB</li><li>CCC</li></ol><h2>无序列表</h2><ul><li>AAA</li><li>BBB</li><li>CCC</li></ul></body>
</html>
结果:
4.图片标签
<img />
属性:
src: 文件的位置。
width:文件宽度。
height: 文件高度。
alt: 文件的说明文字。
5.超链接标签
<a></a>
(1)链接资源
href="" 必须指定协议,默认为file文件协议。
(2)定位资源
name 锚点
<a name="top">顶部</a>
<a name="center">中间</a>
<a href="#top">回到顶部</a>
6.表格标签
<!DOCTYPE html>
<html>
<head>
<title>HTML学习</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head><body><table border="1" width="50%" align="center" cellpadding="8"><caption>用户列表</caption><tr><th>姓名</th><th>性别</th><th>年龄</th></tr><tr align="center"><td>AAA</td><td>男</td><td>22</td></tr><tr align="center" ><td>BBB</td><td>女</td><td>21</td></tr><tr align="center" ><td colspan="3">人数总计: </td></tr></table></body>
</html>
结果:
7.表单标签
<form></form>
(1)form标签中常见的属性
action: 指定表单组件数据发送的位置。如果没有定义action属性,那么默认提交到当前页面。
method: 定义表单提交的方式。只有两种常用 get post.如果没有指定method,默认就是get提交方式。
(2)input标签中type的类型如下
文本框 text。输入的文本信息直接显示在框中。
密码框 password。输入的文本以原点或者星号的形式显示。
单选框 radio 复选框 checkbox 如:兴趣选择。
隐藏字段 hidden 在页面上不显示,但在提交的时候随其他内容一起提交。
提交按钮 submit 用于提交表单中的内容。
重置按钮 reset 将表单中填写的内容设置为初始值。
按钮 button 可以为其自定义事件。
文件上传 file 后期扩展内容,会自动生成一个文本框,和一个浏览按钮。
(3)两个特殊的
A:<select>
选择标签 提供用户选择内容。如:用户所在的省市。size 属性为显示项目个数。
<option>:子项标签 属性 selected 没有属性值,加在子项上,其中一个子项上,子项就变成默认被选项。
B: <textarea>
多行文本框。如:个人信息描述。
转载于:https://www.cnblogs.com/yangang2013/p/5407959.html
HTML基础学习(一)—HTML相关推荐
- 【转】oracle PLSQL基础学习
[转]oracle PLSQL基础学习 --oracle 练习: /**************************************************PL/SQL编程基础****** ...
- python创建对象的格式为_Python入门基础学习(面向对象)
python基础学习笔记(四) 面向对象的三个基本特征: 封装:把客观事物抽象并封装成对象,即将属性,方法和事件等集合在一个整体内 继承:允许使用现有类的功能并在无须重新改写原来的类情况下,对这些功能 ...
- 虚幻引擎虚拟现实开发基础学习教程
流派:电子学习| MP4 |视频:h264,1280×720 |音频:AAC,44.1 KHz 语言:英语+中英文字幕(根据原英文字幕机译更准确)|大小解压后:3.93 GB |时长:5h 15m 了 ...
- 动画产业基础学习教程 Rad How to Class – Animation Industry Fundamentals
如何分类--动画产业基础 大小解压后:6.2G 含课程素材 1920X1080 mp4 语言:英语+中英文字幕(根据原英文字幕机译更准确) 信息: 绘画技巧.解剖学.角色设计.透视和整体讲故事--这门 ...
- Blender纹理基础学习视频教程 CGCookie – Fundamentals of Texturing in Blender
Blender纹理基础学习视频教程 CGCookie – Fundamentals of Texturing in Blender Blender纹理基础学习视频教程 CGCookie – Funda ...
- ue5新手零基础学习教程 Unreal Engine 5 Beginner Tutorial - UE5 Starter Course
ue5新手零基础学习教程 Unreal Engine 5 Beginner Tutorial - UE5 Starter Course! 教程大小解压后:4.96G 语言:英语+中英文字幕(机译)时长 ...
- 0基础学好python难不难_零基础学习Python难不难?Python有什么优势?
原标题:零基础学习Python难不难?Python有什么优势? Python是一种计算机程序设计语言.首先,我们普及一下编程语言的基础知识.用任何编程语言来开发程序,都是为了让计算机干活,比如下载一个 ...
- 计算机一级ps2019,2019年计算机一级考试PS基础学习点子:PS菜单中英文对照表.docx...
2019 年计算机一级考试 PS 基础学习点子: PS 菜单中英文对照表 PS菜单中英文对照表 一.File New 2.Open 3.Open As 4.Open Recent Close 6.Sa ...
- Java零基础学习难吗
java编程是入行互联网的小伙伴们大多数的选择,那么对于零基础的小伙伴来说Java零基础学习难吗?如果你是初学者,你可以很好的理解java编程语言.并不困难.如果你的学习能力比较高,那么你对Java的 ...
- 零基础学习java,这些书一定要看!
学习java技术除了看视频,看书也是非常重要的,尤其是零基础同学,本文包含学习Java各个阶段的书籍推荐,史上最全,学习Java,没有书籍怎么行,就好比出征没带兵器一个道理,这些书籍整理出来给大家作为 ...
最新文章
- Boost:can_prefer的使用测试程序
- 【数据结构与算法】之深入解析“求根节点到叶节点数字之和”的求解思路与算法示例
- 计算机单词修改是否正确,计算机组装必懂的53个单词及装机步骤51条.doc
- Web框架——Flask系列之CSRFToken详解(四)
- JAVA入门级教学之(内存地址的引用示例)
- 详解ROS中的TF使用
- Hibernate bean 对象配制文件
- OSG三维渲染引擎编程指南(详读)
- latex 设置表格的字体大小和行高
- Windows提权 cmd 开启 3389
- 菊安酱的机器学习实战
- Oracle 建表语句,表结构操作sql
- 【小5聊】重装系统之台式电脑BIOSTAR映泰主板,启动U盘PE系统以及重装后无法启动情况
- 大写1234(大写123456汉字)
- c语言程序图像抠图,Opencv使用鼠标任意形状的抠图
- /usr/bin与/usr/local/bin/区别总结
- android 锁屏界面 sim卡,注意!手机的这个密码比锁屏密码更重要,赶紧设置!攻略→...
- 解决误删Android系统的tmp目录
- oracle ORA-28000: the account is locked 28000. 00000
- 【JavaScript】关于手机中的触摸手势操作实现过程详解
热门文章
- python【蓝桥杯vip练习题库】ADV-288成绩排名
- python【蓝桥杯vip练习题库】ALGO-79删除数组零元素
- python【Matlibplot绘图库】曲线样式的两种设置方式(看不懂你来打我)
- 全卷积神经网路【U-net项目实战】U-Net源码上实现自己数据集的分割任务
- 后端传输大量log数据_京东智联云MySQL读写分离最佳实践 ,轻松搞定数据库高性能扩展...
- java数据库视图工具_数据库视图工具类
- 公司网络推广教你网站初期SEO优化该如何做?
- 数字经济时代下老年群体手机APP软件网络推广适老化需求日益明显
- 网站优化时需注意哪些事项可有效防止排名下降?
- 手机桌面隐藏大师_受够了内置主题?扒一扒Windows 10隐藏主题