一、什么是html

html是用来描述网页的一种超文本标记标记语言，由浏览器负责将它解析成具体的网页内容。

二、html学习内容

1 .html主干部分

<!DOCTYPE html>
<html><head><title>            </title><!--空格中写入标题--></head>
<body><!--body间写入正文内容--></body>
</html>

2 .HTML的语法：

标签：带有特殊含义的网页标记元素。

基本格式：<标签名>标签体</标签名>

标题：<h1>,<h2>,<h3>,<h4>,<h5>,<h6>()
段落：<p></p>
换行：<br>
容器：<div>,<span>（用来容纳其他标签）
表格：<table>,<tr>,<td>
列表：<ul>,<ol>,<li>
图片：<img>
表单：<input>
链接：<a>
批注：

注：部分标签不是成对出现的，如<br>，<hr>，</hr>等。

部分标签详解（只展示代码body部分）：

【1】换行<br>:

<body>
12345678910<br>12345678910
</body>

运行结果:

【2】水平分割线<hr> 或<hr/>:

<body>
12345678910
<hr>
12345678910
<hr/>
12345678910
</body>

运行结果：

【3】有序列表<ol > <li> </li> :

<body>
<ol type="A">    <!--""中的A可替换为1、a;""后可加补充内容，reversed(倒序），start(从...开始)-->
<li>12345678910</li>
<li>12345678910        <!--</li>有无皆可-->
<li>12345678910<li>    <!--1--若不加/则会在下一行增加一项-->
</body>

运行结果：

【4】原样输出<pre> </pre>：

<body>
<pre>12345678910
<hr>12345678910
<hr/>12345678910
</pre>
</body>

运行结果：

【5】上下角标<sup> </sup> <sub></sub>:

<!DOCTYPE html>
<html><head><title>测试</title> </head>
<body>
a<sup>2</sup><br>O<sub>2</sub>
</body>
</html>

运行结果：

【6】文本框type="text" :

<body>
<tr  valign=middle align=center><input type="text"name="1"                                       控件的名称size="20"                                      控件的长度maxlength="4"                                  最长的字符数value="请输入值">                             <!--未输入文字时默认显示的内容-->
<input type="text" name="1" size="20"  maxlength="4" placeholder="请输入值">                       <!--未输入文字时默认显示的内容-->
</body>

运行结果：

注：value形式输入时需删除代码中value的内容，placeholder形式可直接输入。

【7】<table>、<tr>、<td>：

<body>
一列:
<table border="1">
<tr><td>文字</td>
</tr>
</table>
一行三列:
<table border="1">
<tr><td>文字</td><td>文字</td><td>文字</td>
</tr>
</table>
两行三列:
<table border="1">
<tr><td>文字</td><td>文字</td><td>文字</td>
</tr>
<tr><td>文字</td><td>文字</td><td>文字</td>
</tr>
</table>
</body>

运行结果：

注：每个表格从一个 table 标签开始, 每个表格行从 tr 标签开始,每个表格的数据从 td 标签开始。

【8】文字在页面中的位置：

<head>
<style>
.center { height: 200px;position: relative;
}.center p {margin: 0;position: absolute;top: 50%;left: 50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="center">
<p>
内容
</p></div>
</body>

注：用positioning和 transform属性来设置水平和垂直居中；数字均可调整。

【9】添加网站背景

<style>
div{
width:450px;
height: 300px;
background-image: url("图片地址")
}
</style>

三、PHPstudy

1.开启小皮：

2.创建新的根目录

3.管理根目录使用。

四、任务结果：

<!DOCTYPE html>
<html><head><title>登录界面</title></head>
<style>
.aaa{height: 700px;position: relative;}
.aaa p {margin: 0;position: absolute;top: 50%;left: 50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);
}.center { height: 400px;position: relative;
}.center p {margin: 0;position: absolute;top: 50%;left: 50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);
}
</style>
<body><div class="center">
<p><font size="16px">攻防实验室</font>
</p>
<div class="aaa">
<p><tr><td><label>First name：</label></td><td><input type="name" size="20" placeholder="请输入姓氏"/></td></tr>
<br><br><tr><td><label>Last name：</label></td><td><input type="name" size="20" placeholder="请输入名字"/></td></tr>
<br><br>
<tr><td><label>Student ID：</label></td><td><input type="digit" size="20" placeholder="请输入学号"/></td></tr>
</p>
</div>
</body>
</html>

通过PHPstudy打开结果：

html基础（第一次任务）相关推荐

计算机的构成有时也划分,计算机应用基础第一次作业答案
计算机应用基础第一次作业答案计算机应用基础4 1.在第一代计算机时代,编程采用______.B:机器语言和汇编语言 2.个人计算机即PC机,按其规模分类,应该属于______.A:微型计算机 3.下 ...
福师计算机基础,福师计算机基础第一次作业.docx
<福师计算机基础第一次作业.docx>由会员分享,提供在线免费全文阅读可下载,此文档格式为docx,更多相关<福师计算机基础第一次作业.docx>文档请在天天文库搜索. 1. ...
19秋软件工程基础第一次作业
个人第一次作业:阅读与思考这个作业属于哪个课程课程链接这个作业要求在哪里作业要求链接我在这个课程的目标是掌握软件工程这门课的核心知识点,对职业规划有清晰的认识,在完成该课程之后对未来学习历 ...
川大网教计算机文化基础考试题,川大网教计算机文化基础第一次作业统一标准答案.doc...
你得分:100.0完成日期:20XX年03月13日18点12分说明:每道小题括号里答案是您最高分那次所选答案,标准答案将在此次作业结束(即20XX年03月15日)后显示在题目旁边. 一.单项选择题. ...
计算机基础第1次作业,计算机应用基础第一次作业
该楼层疑似违规已被系统折叠隐藏此楼查看此楼需求咨询:aopengs 需求咨询:aopengs 第一次作业已完成0%(共21题,还剩 21题) 单选题 (共20道题)收起1.(3.0分) 操作系统 ...
计算机应用基础110003,江苏开放大学计算机应用基础第一次
110003计算机应用基础(专)第一单元形成性考核作业 A.表示文件类型 B.表示文件属性 C.表示文件重要性 D.可以随便命名 47.Windows操作系统中,文件组织采用()目录结构. A.分区 ...
软件工程基础第一次作业：阅读与准备作业
软件工程基础作业1:阅读与准备作业这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/Autumn2019SoftwareEngineeringFounda ...
软件工程基础第一次作业
课程名称 https://edu.cnblogs.com/campus/xnsy/Autumn2019SoftwareEngineeringFoundation 作业要求 https://edu.cn ...
李秀计算机文化基础,计算机文化基础（李秀）绪论.pptx
1 计算机文化基础第一次大课:说在前面的话任课教师:李秀 lx@ 办公电话办公地点:东主楼8区313室 2 绪论课程定位课程要求及安排从信息技术产业的发展规律视角,对该产业建立一个整体概貌 ...
SQLServer商业智能系列：MDX基础
SQLServer商业智能系列:MDX基础第一次使用MDX 轴的应用 MDX语法基础 [IT168 专稿] 一.什么是MDX MDX是一种和SQL类似的语言,它也可以用于查询.计算和定义一些元数据. ...

html基础（第一次任务）

一、什么是html

二、html学习内容

1 .html主干部分

2 .HTML的语法：

部分标签详解（只展示代码body部分）：

【1】换行<br>:

【2】水平分割线<hr> 或<hr/>:

【3】有序列表<ol > <li> </li> :

【4】原样输出<pre> </pre>：

【5】上下角标<sup> </sup> <sub></sub>:

【6】文本框type="text" :

【7】<table>、<tr>、<td>：

【8】文字在页面中的位置：

【9】添加网站背景

三、PHPstudy

四、任务结果：

html基础（第一次任务）相关推荐

最新文章

热门文章