HTML基础

2020-07-26  本文已影响0人  八步里
前端开发

B/S架构

B/S架构是指将浏览器作为客户端、WEB服务器作为服务端的一种计算机架构，基于网页与用户实现交互，网页包括内容、表现和行为（内容即页面中的文本数据，表现即数据的展现形式，行为即数据交互过程中页面元素的变化），这三种组成分别依赖于三种网页设计语言（HTML、CSS、JS）来实现。

HTML

HTML（超文本标记语言）即Hyper Text Markup Language通过标签来标记要显示的网页中的各个部分。通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容。

  1. HTML文件的整体结构
    HTML文件可以类比人体组成，如头部和脖子即身体，头部有眼睛（titile）。
<html> 表示整个html 页面的开始
<head> 头信息
<title>标题</title> 标题
</head>
<body> body 是页面的主体内容
页面主体内容
</body>
</html> 表示整个html 页面的结束
  1. HTML标签
  • 标签的格式：<标签名>封装的数据</标签名>
  • 标签名大小写不敏感。
  • 标签有基本属性和事件属性
  • 标签分为单标签和双标签

注意：标签不能交叉嵌套，属性必须有值，属性值必须加引号。

标签
常用标签
  1. font字体标签
<font color="red" face="宋体" size="7">我是字体标签</font>

对于一些特殊字符需要键入字符实体才能显示出来，如标签对的“<”


字符实体
  1. 标题标签
    标题标签是h1到h6的大小依次递减
<body>
<!-- 标题标签
需求1：演示标题1 到标题6 的
h1 - h6 都是标题标签
h1 最大
h6 最小
align 属性是对齐属性
left 左对齐(默认)
center 剧中
right 右对齐
-->
<h1 align="left">标题1</h1>
<h2 align="center">标题2</h2>
<h3 align="right">标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<h7>标题7</h7>
</body>
  1. 超链接
    用于点击后实现页面跳转,target 属性设置确定当前页面跳转或者新页面打开。
<body>
<!-- a 标签是超链接
href 属性设置连接的地址
target 属性设置哪个目标进行跳转
_self 表示当前页面(默认值)
_blank 表示打开新页面来进行跳转
-->
<a href="http://localhost:8080">百度</a><br/>
<a href="http://localhost:8080" target="_self">百度_self</a><br/>
<a href="http://localhost:8080" target="_blank">百度_blank</a><br/>
</body>
  1. 列表标签
    列表分为无序和有序，无序列表始于 <ul> 标签。每个列表项始于 <li>；有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
  2. img标签

img 标签是图片标签,用来显示图片
src 属性可以设置图片的路径
width 属性设置图片的宽度
height 属性设置图片的高度
border 属性设置图片边框大小
alt 属性设置当指定路径找不到图片时,用来代替显示的文本内容

在web路径中有相对路径和绝对路径之分
5.1. 相对路径:
. 表示当前文件所在的目录
.. 表示当前文件所在的上一级目录
文件名表示当前文件所在目录的文件,相当于./文件名./ 可以省略
5.2. 绝对路径:
正确格式是: http://ip:port/工程名/资源路径
错误格式是: 盘符:/目录/文件名

  1. 表格标签
    表格标签用于创建表格，table 标签是表格标签包括以下属性：
    border 设置表格标签
    width 设置表格宽度
    height 设置表格高度
    align 设置表格相对于页面的对齐方式
    cellspacing 设置单元格间距
<table align="center" border="1" width="300" height="300" cellspacing="0">
<tr>
<th>1.1</th>
<th>1.2</th>
<th>1.3</th>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
</body>
  1. 跨行跨列的表格
    在body结构中创建一个跨行跨列的表格,在td标签中用colspan属性来指定横向跨越的格数，用rowspan属性来指定纵向跨越的格数，可以叠加使用。
<table width="500" height="500" cellspacing="0" border="1">
<tr>
<td colspan="2">1.1</td>
<td>1.3</td>
<td>1.4</td>
<td>1.5</td>
</tr>
<tr>
<td rowspan="2">2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
<td>2.5</td>
</tr>
<tr>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
<td>3.5</td>
</tr>
<tr>
<td>4.1</td>
<td>4.2</td>
<td>4.3</td>
<td colspan="2" rowspan="2">4.4</td>
</tr>
<tr>
<td>5.1</td>
<td>5.2</td>
<td>5.3</td>
</tr>
</table>
跨行跨列表格
  1. iframe 框架标签
    iframe 框架标签可以在html页面上创建一个小窗口来加载单独的页面，指明name属性便可以在当前页面的a标签的target属性进行绑定，点击后便可以在该内嵌页面进行显示。
  2. 表单标签
    表单就是html 页面中,用来收集用户信息的所有元素集合，然后把这些信息发送给服务器。form 标签就是表单，表单中有以下几种元素集合：

9.1 输入框input

input type=text 是文件输入框value 设置默认显示内容
input type=password 是密码输入框 value 设置默认显示内容
input type=radio 是单选框name 属性可以对其进行分组checked="checked"表示默认选中
input type=checkbox 是复选框，checked="checked"表示默认选中
input type=reset是重置按钮 value 属性修改按钮上的文本
input type=submit 是提交按钮 value 属性修改按钮上的文本
input type=button 是按钮 value 属性修改按钮上的文本
input type=file 是文件上传域
input type=hidden 是隐藏域当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器）

9.2 下拉列表select
下拉列表中的选择单元项的标签是option，selected="selected"设置默认选中。
9.3 文本输入框textarea
文本输入框可以在内部书写文本
总结：表单提交时依赖内容的键值对，即在标签属性中用name属性来确定键而用value来作为输入框的默认值，如果实际输入了内容则作为值（但是对于下拉列表框中的value可以对双标签中的内容进行转换）。

  1. 表单提交细节
    form 标签是表单标签：action 属性设置提交的服务器地址，method 属性设置提交的方式GET(默认值)或POST。
  1. 其他标签
上一篇下一篇

猜你喜欢

热点阅读