【html】主要是关于标签等基础

来源：互联网发布：sql中时间戳转换编辑：程序博客网时间：2024/06/08 13:23

1.一些标签就直接掠过了，主要用不太上。

<!DOCTYPE html>表明是html文件

<a>锚，可用于定位，还有超链接等等

<abbr>可以在段落中做缩写的解释，当鼠标on时会显示意思

<address>可以表示文章信息，作者信息

<applet>主要是java程序

<area>主要用于<map>标签中

<audio>主要是用于声音流的放入

<base>可以用于让base中的网址href变成次页面中默认的链接

<blockquote>定义块级引用

<br>是一个换行符，另外遇到p段落标签时候，会加上一些垂直间距

<buttom type="button"></button>用于定义一个按钮

关于canvas的一个小实验：

利用javascript画一个矩形

<canvas id="myCanvas"></canvas><script type="text/javascript">var canvas=document.getElementById('myCanvas');var ctx=canvas.getContext('2d');ctx.fillStyle='#FF0000';ctx.fillRect(0,0,80,100);</script>

注释：根据 HTML5 规范，在没有其他合适标签更合适时，才应该把 <b> 标签作为最后的选项。HTML5 规范声明：应该使用 <h1> - <h6> 来表示标题，使用 <em> 标签来表示强调的文本，应该使用 <strong> 标签来表示重要文本，应该使用 <mark> 标签来表示标注的/突出显示的文本。

<p>表示段落，<b>表示加粗的字体

caption在本文中也讲到，是在表格中的标题

表格中 <col>可以为列设置对齐方式

关于details标签，里面有一个summary 还有一个p标签，点击可以展示详情

<details><summary>Copyright 2011.</summary><p>All pages and graphics on this web site are the property of W3School.</p></details>

<div>是一个块级的标签，主要用于文档的分割等等

<footer>作为网页的底部

<nav>主要做导航栏

2.关于link

link的标签主要用于link css等文件

格式：<link rel="stylesheet" type="text/css" href=".css" > 这是固定的格式，先不需要理解。

<hr>水平线

3.表格

<table> 表格标签。用tr表示行，用td表示单元格

th是表头，会用粗体来表示

空格：&nbsp；需要有分号哦

可以有标题，用captain 当标题

cellspacing是表格里单元格之间的距离;


cellpadding是表格里单元格内的空白部分;

另外，可以让table 或者td tr 使用bgcolor或者background 来填充颜色，填充背景

table中的各个行，标题都可以运用，align来排列内容

表格中跨行：cowspan（竖向）跨列：colspan（横向）

还可以在表格中插入表格

表格中内边距，cellpading

有序无序

无序：

ul标签无序li有个小图标，可以使用t在ul中使用ype=“”。square是正方形，circle是圆（），disc实心圆

有序：

ol标签默认数字，如果是字母表示A a ，如果是罗马数字，小i，大I

ul可以嵌套多个ul

4.html的<div> <span>

HTML 块元素

大多数 HTML 元素被定义为块级元素或内联元素。

编者注：“块级元素”译为 block level element，“内联元素”译为 inline element。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

例子：<h1>, <p>, <ul>, <table>

HTML 内联元素

内联元素在显示时通常不会以新行开始。

例子：<b>, <td>, <a>, <img>

div可以替代table是什么意思？表示替代table文档显示

HTML <span> 元素

HTML <span> 元素是内联元素，可用作文本的容器。

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

span可以作为内部元素

background 设置背景图片

引入框架的概念，是<frameset>标签。
<frameset cols=" "> 
<frame src=" .html">
<frameset>
在这个标签中不能用body这些标签
还有内联框架，这种框架肯定也是有见过的，比如网页上的一些窗口小游戏，可能就是内联框架
内联框架的标签是：iframe 在这个标签中可以设置width height 设置框架的大小，边框等等
iframe中还可以打开指定的链接
例子：
<!DOCTYPE html>
<html>
<body>

<iframe name="iframe_a"></iframe>

<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>
<p><a href="https://www.sogou.com" target="iframe_a">baidu.com</a></p>
<p><b>注释：</b>由于链接的目标匹配 iframe 的名称，所以链接会在 iframe 中打开。</p>

</body>
</html>
点击百度会出现搜狗的页面。这样的话整个的内联框架都实现了

关于脚本
可以在html中插入脚本语言
<script type="text/javascript">
ducument,write("<h1>sjkjdkjskd</h1>") 脚本语言中可以识别html中的标签，并且让中间的文本用标题的格式显示
</script>

html的头部元素
有:title base link meta script sttyle
title :用于设置浏览器标签的名字，主要是网页的名字
<base> 主要是为页面上的所有链接规定默认地址或默认目标
link 主要用与定义文档与外部资源之间的关系，link 最常用与样式表的链接
<link rel="stylesheet" type="text/css" href=" ">
<style>中用于写样式
<meta>是元数据，是关于数据的信息，该标签主要在head元素中，元数据可用于浏览器页面描述，关键词，文档的作者等等
针对搜索引钱的关键词
<meta name="description" content= " ">
<meta name-"keywords" content= " ">

meta标签必须的属性：content 定义与 http-equiv 或 name 属性相关的元信息

http-equiv 值：content-type expires refresh set-cookie 把content属性关联到http头部
name 值：author description keywords generator revised others 用于描述网页，比如网页的关键词，叙述等等
scheme 定义用于翻译content属性值的格式

name属性：
主要用于描述网页，比如网页的关键词，叙述等， name=“参数” content=“具体的描述”
keywords ：主要用于搜索殷勤，你网页的关键字
<meta name="keywords" content="博客，csdn">
description :用于告诉搜索殷勤，你的主要内容
<meta name="description" content="这是我的csdn博客，希望大家多多支持">
viewport 移动端窗口 rebots 定义搜索殷勤爬虫的索引方式

http-equiv属性

1.content-Type
<meta http-equiv="content-Type" content="text/html;charset=utf-8"> //旧的HTML，不推荐

<meta charset="utf-8"> //HTML5设定网页字符集的方式，推荐使用UTF-8
2.expires 网页到期时间
3.refresh 自动刷新并只想某页面可用于重定向例如网址换了等等
如 http-equiv="refresh" content="2" URL="sdsds"
意思是两秒后跳转到URL中的网址去的意思

等等常用的是这几个，以后用了再回来搜索。
meta 标签中，content主要用于前面参数的描述作用

CSS
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
css格式：
padding 内边距，是在content外面一层。
padding 10 5 10 5 分别表示上右下左
padding 10 5 10 上10 左右5 下10
float：可以是left ring 表示浮动的位置
clear：这个属性，主要用于清除浮动，让元素在规定属性值方向没有浮动的元素

在 HTML 中，某些字符是预留的。

在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

URL 及其编码

HTML一些组件：

HTML表单(form):

input元素，常用的类型type：text定义常规文本输入 radio定义单选按钮输入 submit定义提交按钮，提交表单

text:

radio:单选框，可以是多个选框，用checked 形容的选项框，表示默认选择

<form>

<imput type="radio" name="sex" value="male" checked> 男

<imput type="radio" name="sex" value="female" > 女

</form>

submit

<form action=" " > action表示提交的页面

<input type="submit" value="Submit"> //会出现一个submit的按钮

</form>

CSS

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

css格式：

padding 内边距，是在content外面一层。

padding 10 5 10 5 分别表示上右下左

padding 10 5 10 上10 左右5 下10

float：可以是left ring 表示浮动的位置

clear：这个属性，主要用于清除浮动，让元素在规定属性值方向没有浮动的元素

background-image 设置背景图片

阅读全文

0 0