前端复习1：HTML

最新推荐文章于 2024-05-08 07:28:03 发布

小小菜鸟2222

最新推荐文章于 2024-05-08 07:28:03 发布

阅读量213

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_42476709/article/details/114661897

版权

前端复习1：HTML

1、Web标准
2、HTML

1、Web标准

（1）Web标准不是某一个标准，而是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C 万维网联盟是国际最著名的标准化组织(1994年成立）
（2）构成：结构（html）、表现（css）和行为（javascript）
结构类似人的身体，表现类似人的着装，行为类似人的行为动作

结构：用于对网页元素进行整理和分类（HTML）。
表现：设置网页元素的版式、颜色、大小等外观样式（CSS）
行为：网页模型的定义及交互的编写（ Javascript）

2、HTML

2.1.介绍

HTML 指的是超文本标记语言 (Hyper Text Markup Language)，是用来描述网页的一种语言。

HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
所谓超文本，有2层含义：
（1）. 因为它可以加入图片、声音、动画、多媒体等内容（**超越文本限制 **）
（2）. 不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（**超级链接文本 **）。

2.2.骨架标签

<html>   
    <head>     
        <title></title>
    </head>
    <body>
    </body>
</html>

html骨架
约定：HTML标签名、类名、标签属性和大部分属性值统一用小写

小技巧：生成页面骨架结构

html: 5 按下tab键或者
! 按下tab键

2.3 标签分类

（1）常规元素（双标签）
（2）空元素（单标签）如：换行<br />，图像标签<img src="图像URL" />，<input type="属性值" />，链接标签<link rel="stylesheet" href="url">

2.4 标签关系

（1）嵌套关系（父子级）
（2）并列关系（兄弟级）

2.5 常用标签

2.5.1 排版标签
1）标题标签h，一行只能放一个标题
2）段落标签p
3）水平线标签hr
4）换行标签br
5）div 和 span标签，都是盒子标签，用来装网页元素，进行网页布局

div：一行只能放一个
span：一行上可以放多个

2.5.2 文本格式化标签
在这里插入图片描述
2.5.3 图像标签img

<img src="图像URL" />

src属性用于指定图像文件的路径和文件名，img标签的必需属性
在这里插入图片描述

	<h4> 正常的图片： </h4>
	<img src="img.gif" />
	<h4> 带有alt 替换文本：（图片不能正常显示，就显示文字） </h4>
	<img src="img.gif" alt="图片不能正常显示，就显示文字" />
	<h4> 带有title 提示文本：（鼠标放到图片上，显示的文字） </h4>
	<img src="img.gif" title="鼠标放到图片上，显示的文字" />
	<h4> 修改图片大小 宽度 width  高度 height </h4>
	<img src="img.gif" width="600"  />
	<h4> 带有边框的图片 </h4>
	<img src="img.gif" border="10"  />

2.5.4 链接标签a

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

href：用于指定链接目标的url地址（必须属性），当为标签应用href属性时，它就具有了超链接的功能
target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，__blank为在新窗口中打开方式。

	<h4>外部链接：</h4>
	<a href="http://www.baidu.com" target="_blank"> 百度 </a>
	<h4>内部链接：</h4>
	<a href="index.html">首页 </a>
	<h4>空链接：</h4>
	<a href="#"> 链接 </a>
	<h4> 图像链接：</h4>
	<a href="http://www.baidu.com" target="_blank"> <img src="img.jpg" /> </a>

(1)锚点定位

创建锚点链接分为两步：

1. (找目标)使用相应的id名标注跳转目标的位置
  <h3 id="two">第2集</h3> 
2. （拉关系） 使用<a href="#id名">链接文本</a>创建链接文本（被点击的） 
  <a href="#two">

（2） base 标签

<base target="_blank" />

base 可以设置整体链接的打开状态
base 写到 <head> </head> 之间
把所有的连接都默认添加 target="_blank"

2.5.5 注释标签
 快捷键是： ctrl + / 或者 ctrl +shift + /

2.5.6 预格式化文本pre标签可定义预格式化的文本

被包围在 <pre> 标签元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
有了这个标签，里面的文字，会按照我们书写的模式显示，不需要段落和换行标签了。但是，比较少用，因为不好整体控制。

2.6 路径

2.6.1 相对路径
以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。

同级<img src="图像URL" />
上一级<img src="images/图像URL" />
下一级<img src="../图像URL" />

2.6.2 绝对路径
绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的。

2.7 表格、表单、列表

在这里插入图片描述
2.7.1 表格table

<table>
  <tr>
    <td>单元格</td>
  </tr>
</table>

table用于定义一个表格标签。
tr标签用于定义表格中的行，必须嵌套在 table标签中。
td 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
<td></td>标签，可以容纳所有的元素
表头单元格标签th：一般表头单元格位于表格的第一行或第一列，并且文本加粗居中，只需用表头标签 <th></th>替代相应的单元格标签 <td></td>即可。
表格标题caption

<table>
   <caption>表格标题</caption>
</table>

1). caption 元素定义表格标题，通常这个标题会被居中且显示于表格之上。
2). caption 标签必须紧随 table 标签之后。
3). 这个标签只存在表格里面才有意义。

表格属性

三参为0，开发时这三个参数 border cellpadding cellspacing 为 0
合并单元格，跨行合并：rowspan=“合并单元格的个数”，跨列合并：colspan=“合并单元格的个数”；合并的顺序我们按照先上后下先左后右的顺序；删除多余的单元格单元格
表格划分结构：题头thead、正文tbody和脚注tfoot来标注

2.7.2 列表标签

无序列表 ul>li
1). <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。

<ul>
  <li>列表项1</li>
</ul>

2). <li>与</li>之间相当于一个容器，可以容纳所有元素。

有序列表 ol>li

<ol>
  <li>列表项1</li>
</ol>

自定义列表 dl>dt dd

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
</dl>

2.7.3 表单标签

由表单控件（也称为表单元素）、提示信息和表单域3部分构成
1).表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
2).提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
3).表单域：相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。
input 控件 (单标签)

<input type="属性值" value=" 默认的文本值">

在这里插入图片描述
1). name属性，用于区别不同的表单。radio 如果是一组，我们必须给他们命名相同的名字，就实现可以多个选一个；checkbox 如果是一组，也要命名相同的名字
2). checked属性，表示默认选中状态 checked="checked"

label标签：为了提高用户体验
1). 概念：label 标签为 input 元素定义标注（标签）
2). 作用：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
3). 实现绑定元素方式：

1、(第一种)用label直接包括input表单，适合单个表单选择
<label> 用户名： <input type="属性值" value=" 默认的文本值">   </label>
2、(第二种) for 属性规定 label 与哪个表单元素绑定
<label for="id名">文本</label>
<input type="属性值" id="id名">

textarea控件(文本域)，通过textarea控件可以轻松地创建多行文本输入框，cols=“每行中的字符数” rows=“显示的行数” 实际开发不用
select下拉列表，至少包含一对 option，实际开发会用的比较少

<select>
  <option selected =" selected ">选项1 （当前项为默认选中项）</option>
  <option>选项2</option>
</select>

form表单域，实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

1). action：url地址，用于指定接收并处理表单数据的服务器程序的url地址。
2). method：get/post，用于设置表单数据的提交方式，其取值为get或post。
3). name：用于指定表单的名称，以区分同一个页面中的多个表单。

2.8 特殊字符

在这里插入图片描述
总结

在这里插入图片描述

小小菜鸟2222

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端复习1：HTML

前端复习1：HTML1、Web标准2、HTML2.1.介绍2.2.骨架标签2.3 标签分类2.4 标签关系2.5 常用标签2.6 路径2.7 表格、表单、列表2.8 特殊字符1、Web标准（1）Web标准不是某一个标准，而是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C 万维网联盟是国际最著名的标准化组织(1994年成立）（2）构成：结构（html）、表现（css）和行为（javascript）结构类似人的身体，表现类似人的着装，行为类似人的行为动作结构：用于对网页元素进行整理和
复制链接

扫一扫