HTML 知识点简介

最新推荐文章于 2021-09-09 10:08:43 发布

Skye‘s Blog

最新推荐文章于 2021-09-09 10:08:43 发布

阅读量204

点赞数

分类专栏： web+Django 文章标签： html web

原文链接：https://www.cnblogs.com/yuanchenqi/articles/5976755.html

版权

web+Django 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML 是什么？

HTML（htyper text markup language）即超文本标记语言

超文本: 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

标记语言: 标记（标签）构成的语言.

网页==HTML文档，由浏览器解析，用来展示的

静态网页：静态的资源，如xxx.html

动态网页：html代码是由某种开发语言根据用户请求动态生成的
html树形结构

常用标签

一、`<head>`标签

`<meta>` 标签

meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

keyword 主要是便于搜索引擎搜索时的关键词
description 就是我们一般看到搜索出的某个网址下面描述信息的内容

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="对于html的简单介绍">

http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content。

也可以解决浏览器兼容的一些问题

<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> //(注意后面的引号，分别在秒数的前面和网址的后面)
 
<meta http-equiv="content-Type" charset=UTF8">
 
<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7">

非`<meta>`标签

<!-- 标题 -->
<title>oldboy</title>
<!-- 标题旁边的小图标 -->
<link rel="icon" href="http://www.jd.com/favicon.ico">
<!-- 引入css文档进行布局 -->
<link rel="stylesheet" href="css.css">
<!-- 引入js文档 -->
<script src="hello.js"></script>

二、`<body>`标签

1. 基本标签

<hn>: n的取值范围是1~6; 从大到小. 用来表示标题.

<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.

<b> <strong>: 加粗标签.

<strike>: 为文字加上一条中线.

<em>: 文字变成斜体.

<sup>和<sub>: 上角标和下角表.

<br>: 换行.

<hr>: 水平线

<div>: 没有功能，但是是最常用的标签！！！！！！！！！！！！！！！（block）

<span>: 和

相似，但是只占字符大小的空间（inline），

块级标签一个占一行

2. 块级标签和内联标签

block（块）元素的特点
总是在新行上开始；
宽度缺省是它的容器的100%，除非设定一个宽度。
它可以容纳内联元素和其他块元素
inline元素的特点
和其他元素都在一行上；
宽度就是它的文字或图片的宽度，不可改变
内联元素只能容纳文本或者其他内联元素

块级标签：<p> <h1> <table> <ol> <ul> <form> <div>

内联标签：<a> <input> <img> <sub> <sup> <textarea> <span>

特殊字符

&lt; &gt；&nbsp ；&copy; &reg;

显示出来：< > 空格 © ®

3. 图形标签 `<img>`

<img>中的属性

src: 要显示图片的路径.
alt: 图片没有加载成功时的提示.
title: 鼠标悬浮时的提示信息.
width: 图片的宽
height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

4. 超链接标签(锚标签)`<a>`

<a>中的属性

href:要连接的资源路径格式如下: href=“http://www.baidu.com”
target: _blank : 在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容.
name: 定义一个页面的书签.
用于跳转 href : #id.（锚）

5. 列表标签

<ul>: 无序列表

<ol>: 有序列表
         <li>:列表中的每一项.

<dl>  定义列表
         <dt> 列表标题
         <dd> 列表项

6. 表格标签 `<table>`

<tr>: table row

         <th>: table head cell

         <td>: table data cell

属性：

border: 表格边框.

cellpadding: 内边距

cellspacing: 外边距.

width: 像素百分比.（最好通过css来设置长宽）

rowspan: 单元格竖跨多少行

colspan: 单元格横跨多少列（即合并单元格）

7. 表单标签`<form>`！！！！！

表单用于向服务器传输数据。

表单能够包含 <input> 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含textarea、select、fieldset和 label 元素。

（1）`<input>`标签的属性：

type:

   text 文本输入框

   password 密码输入框

   radio 单选框

   checkbox 多选框  

   submit 提交按钮            

   button 按钮(需要配合js使用.) button和submit的区别？

   file 提交文件：form表单需要加上属性enctype="multipart/form-data"   
   
   type="button", "reset", "submit" - 定义按钮上的显示的文本 
   type="text", "password", "hidden" - 定义输入字段的初始值 
   type="checkbox", "radio", "image" - 定义与输入相关联的值

checked: radio 和 checkbox 默认被选中

readonly: 只读. text 和 password

disabled: 对所用input都好使.

name:
表单提交项的键.注意和id属性的区别：name属性是和服务器通信时使用的名称；而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的。

value: 表单提交项的值.对于不同的输入类型，value 属性的用法也不同。

（2）`<select>` 下拉选标签属性

name:表单提交项的键.

size：选项个数

multiple：multiple

<option> 下拉选中的每一项属性：

value:表单提交项的值.

selected: selected下拉选默认被选中

<optgroup>为每一项加上分组

（3）`<textarea>` 文本域属性

name: 表单提交项的键.

cols: 有多少列

rows: 有多少行

Skye‘s Blog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML 知识点简介

HTML 是什么？HTML（htyper text markup language）即超文本标记语言超文本: 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。标记语言: 标记（标签）构成的语言.网页==HTML文档，由浏览器解析，用来展示的静态网页：静态的资源，如xxx.html动态网页：html代码是由某种开发语言根据用户请求动态生成的标签什么是标签？是由...
复制链接

扫一扫