HTML总结-1 基础结构

Meteoritex
176 阅读6分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

这篇文章是小卷卷用来回顾之前学过的Html基础的学习日志 重拾基础 记录时光

希望能给初学者作为简单的复习资料使用

基础结构

1<!DOCTYPE html>文档类型声明，表示该文件为 HTML5文件。<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前

  1. <html></html>标签对：<html>标签位于HTML文档的最前面，用来标识HTML文档的开始；标签位于HTML文档的最后面，用来标识HTML 文档的结束；这两个标签对成对存在，中间的部分是文档的头部和主题。

  2. <head></head>标签对：标签包含有关HTML文档的信息，可以包含一些辅助性标签。如<title></title>，<link /><meta />，<style></style>，<script></script>等，但是浏览器除了会在标题栏显示<title>元素的内容外，不会向用户显示head元素内的其他任何内容。

  3. <body></body>标签对：它是HTML文档的主体部分，在此标签中可以包含<p><h1><br>等众多标签，<body>标签出现在</head>标签之后，且必须在闭标签</html>之前闭合。

head

  1. head标签为双标签，有尾标签，<head></head>。
  2. head标签表示头部标签,通常用来嵌套meta、title、style等标签。
  3. <title>标签：在和标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。
  4. <meta charset="UTF-8">设置当前文件字符编码
  5. style标签：双标签中设置当前文件样式

例如title标签：

<head>
    <title>hello world</title>
</head>

span {
color:blue;
    }

其他标签

  1. span标签

  2. 使用<hx>标签为网页增加标题如markdown
  3. 使用<div>标签自定义块 页面上相互关联的一组元素

  4. header footer section 对应头部 底部以及定义区段 aside 侧边栏

  5. br 换行 &nbsp 空格 hr 水平线标签

  6. ul li 无序列表 ol li 有序列表

img标签

格式

<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

  1. src：标识图像的位置；

  2. alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；

  3. title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；

  4. 图像可以是GIF，PNG，JPEG格式的图像文件。

    a 标签 网页添加超链接

<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>

a标签中的target属性

<a href="www.baidu.com" target="_blank"(新窗口打开) target="_self"(当前页面打开)>百度</a>

创建表格的四个元素：table、tr、th、td

1、

…
：整个表格以标记开始、
标记结束。

2、…：表格的一行，所以有几对tr 表格就有几行。

3、…：表格的一个单元格，一行中包含几对...，说明一行中就有几列。

4、…：表格的头部的一个单元格，表格表头。

5、表格中列的个数，取决于一行中数据单元格的个数。

6、border属性可以为表格添加边框，属性值为数字。

注意：

1、table标签用来定义整个表格，为双标签，必须有结束标签。

2、table标签里面可以放caption标签和tr标签。

3、caption标签用来定义表格的标题。

4、tr标签用来设置表格的行，tr里面只能放th或者td标签，一组tr标签代表一行。

5、th用来设置表格的标题，会加粗居中显示。也就是th标签中的文本默认为粗体并且居中显示。

6、td同来设置表格的列，一组td标签代表一列。

7、table表格在没有添加border属性之前, 在浏览器中显示是没有表格线的。

使用thead、tbody、tfoot定义表格

img

1、<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。

2、<tbody>…</tbody>：如果不加 , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）

3、<tfoot> 元素用于对 HTML 表格中的表注（页脚）内容进行分组。

4、thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

form 创建表单 语法：

1.<form> ：<form>标签是成对出现的，以

开始，以结束。

2.action：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

3.method： 数据传送的方式（get/post）。‘

注意:

1、所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间（否则用户输入的信息可提交不到服务器上哦！）。

**2、method : post/get 的区别这一部分内容属于后端程序员考虑的问题。

<form   method="传送方式"   action="服务器文件">
<form    method="post"   action="save.php">
        <label for="username">用户名:</label>
        <input type="text" name="username" />
        <label for="pass">密码:</label>
        <input type="password" name="pass" />
</form>

输入输出

<form>
   <input type="text/password" name="名称" value="文本" />
</form>

<form>
  姓名：
  <input type="text" name="myName">
  <br/>
  密码：
  <input type="password" name="pass">
</form>
img

placeholder 占位符img

  <input type="text" placeholder="请输入关键字">

数字输入框

<input type="number">

url输入框（输入时需要以http://或者https://开头）

<input type="url">

email 同理

使用标签创建文本域

语法：

<textarea  rows="行数" cols="列数">文本</textarea>

1、<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。

2、cols ：多行输入域的列数。

3、rows ：多行输入域的行数。

4、在<textarea></textarea>标签之间可以输入默认值。

举例：

<form  method="post" action="save.php">
        <label>联系我们</label>
        <textarea cols="50" rows="10" >在这里输入内容...</textarea>
</form>

label标签

语法：

<label for="控件id名称">

例子：

<form
  <label for="email">输入你的邮箱地址</label>
  <input type="email" id="email" placeholder="Enter email">
</form>

单选复选框框

语法：
<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>

1、type:

当 type="radio" 时，控件为单选框

当 type="checkbox" 时，控件为复选框

2、value：提交数据到服务器的值（后台程序PHP使用）

3、name：为控件命名，以备后台程序 ASP、PHP 使用

4、checked：当设置 checked="checked" 时，该选项被默认选中

使用select、option标签创建下拉菜单

<form>
        <select>
            <option value="看书">看书</option>
            <option value="旅游" selected="selected ">旅游</option>
            <option value="运动">运动</option>
            <option value="购物">购物</option>
        </select>
    </form>

注意 双标签 select里面只能放option 设置selected="selected"属性，则该选项就被默认选中。

提交/重置按钮

语法：

<input   type="submit"   value="提交">
<input   type="reset"   value="充值">

type：只有当type值设置为submit/reset时，按钮才有提交/重置作用

value：按钮上显示的文字

avatar
文章
阅读
粉丝