跳转到帖子

  • 游客您好，欢迎来到黑客世界论坛！您可以在这里进行注册。

    赤队小组-代号1949（原CHT攻防小组）在这个瞬息万变的网络时代，我们保持初心，创造最好的社区来共同交流网络技术。您可以在论坛获取黑客攻防技巧与知识，您也可以加入我们的Telegram交流群 共同实时探讨交流。论坛禁止各种广告，请注册用户查看我们的使用与隐私策略，谢谢您的配合。小组成员可以获取论坛隐藏内容！

    TheHackerWorld官方

Html5介绍

 分享
NedK7

由 NedK7，
在 Html5

推荐的帖子

NedK7 Community Regular

NedK7

发布于
发布于

 

Vs code 软件是一款微软公司推出的免费的轻量级编辑器。

Ctrl+放大视图

Ctrl-减小视图

Shift+alt+方向键 向上、下复制一行

Emmet语法快速生成html结构语法   

 ！+tab形成骨架

标签+  tab   形成标签   div+tab

父子级关系，可以用>     ul>li

兄弟级关系+    div+p+tab

生成个标签*     div*6+tab

.nav   <div class=”nav”></div>

#banner<div id=”banner”></div>

(默认生成div标签)

p.one <p class=”one”></p>

span#gay<span id=”gay”></span>

如果标签内想写内容可以用{}表示

.demo$*6 生成类名有序（$自增符号,从1开始排序）

网页是网站中的一页，网页是html文档文件，网站通过一定规则，使用html等制作的用于展示特定内容的相关网页的集合，通过浏览器显示。网页是网站基本元素。因为html中的多媒体内容超越了文本限制，所以html被称为超文本标记语言。

Html语言是描述网页的语言

常用浏览器

谷歌浏览器，火狐浏览器，IE浏览器…

浏览器内核作用是渲染引擎，读取网页内容，计算显示方式。

  1. Web标准是国际万维网（W3C）联盟制定。浏览器内核不同，计算显示页面有差异，所以需要标准。
  2. Web标准

HTML 结构 网页元素

CSS 表现 外观样式

JS 交互 交互效果，行为动作

Html语法

单标签 双标签

标签关系： 包含关系 并列关系

<html lang="en">//根标签

<head>//头部

<meta charset="UTF-8">//万国编码

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>//文档显示主题

</head>

<body></body>//文档内容

</html>

<!DOCTYPE html>//文档类型说明，一般在html标签之前

 

Html常用标签

标签的语义就是标签的含义

（1）标题标签

<h1>-</h1>…

<h6>-</h6>

重要性依次递减，加了标题标签的文字会加大加粗，一个标题独占一行。

（2）段落标签

<p></P>

文本在一个段落中会根据浏览器窗口界面大小自动换行，段落之间有间隙，一个段落独占一行。

（3）强制换行标签

<br>是单标签，只是简单地开始新的一行。

（4）文本格式化标签（突出重要性，比普通文字更加重要）

加粗

<strong></strong>

    <b></b>

倾斜

<em></em>

<i></i>

删除线

<del></del><s></s>

下划线

 <ins></ins><u></u>

（5）div和span标签，没有语义，只是一个盒子，用来装内容，用来布局再好不过。

Div一行只能放一个，大盒子；span一行只能放多个，小盒子。

（6）图像标签

<img src=”图像url”/>  src是图像标签的必须属性，用于指定图像文件的路径。（必须属性）

图形标签其他属性：

alt

替换文本（图片无法显示）

title

提示文本（鼠标在图片上时候）

width

宽度

height

高度

border

图像边框

（7）路径

相对路径（图像与html文件关系）

同一级路径   直接写名字

下一级路径   /

上一级路径   ../

绝对路径:指的是目录下的绝对位置，直接到达目标位置，长从盘符开始的路径。

（8）超链接标签

<a href=”跳转目标” target=”目标窗口弹出方式”>

Href为必要属性

Target的属性值有2种：_self当前页面打开（默认）；_blank新窗口打开

链接的分类

I 外部链接

<a href="http://地址">123</a>

II内部部链接(内部网页之间相互链接)

<a href="1.html">内部链接</a>

III 空链接

<a href="#">空链接</a>

IV下载链接

当Href里面地址是一个文件/压缩包，点击链接会自动下载这个文件。

V 网页元素链接 网页中各种元素，文本，图像，音频，视频都可以都可以添加超链接。

VI锚点链接（点击链接可以快速定位到页面对应位置）

<a href="#oo">锚点链接</a>

<p id="00">锚点链接</p>

（9）注释

快捷键ctrl+/

<!--   -->

（10）特殊字符

空格

&nbsp;

大于号>

&gt;

小于号<

&lt;

（11）表格标签

表格标签用于布局，展示数据

<table>

        <tr>

            <th>123</th>

            <td>123</td>

            <td>123</td>

            <td>123</td>

        </tr>

    </table>

Th标签是表头单元格标签，突出重要性。

表格属性

align

Left,center,right（对齐方式）指的是表格位置

border

边框（默认为无）

cellpadding

单元格边沿与内容之间空白，默认1px

cellspacing

单元格之间空白（默认2px）

width

宽度

height

高度

表格结构标签

表格头部thead区域

表格主体tbody区域

可折叠标签使得结构简单明确

合并单元格（合并以后删除多余单元格）

跨行合并

Rowspan=”合并单元个数”(垂直方向)

跨列合并

Colspan=” 合并单元个数” (水平方向)

（12）列表标签

无序列表

有序列表

自定义列表

li是列表项目

无序列表

<ul>

        <li></li>

    </ul>

ul中只能有li，li中可以放任何标签。

无序列表会带有自己的样式。

有序列表

<ol>

        <li></li>

    </ol>

ol中只能有li，li中可以放任何标签。

有序列表会带有自己的样式。

自定义列表：对术语/名词进行解释，定义列表项前无任何项目符号。

<dl>

        <dt>名词1</dt>

        <dd>名词1解释1</dd>

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

        <dd>名词1解释3</dd>

    </dl>

dl中只能有dt,dd，dt,dd中可以放任何标签, dt,dd个数无限制，常常是一个dt对应多个dd。

（13）表单标签

表单的目的是为了收集信息。

表单的组成：表单域，表单控件也被称为表单元素（方框、按钮），提示信息（文字信息）

I表单域是包含一个表单元素的区域，实现用户信息收集和传递。

form会把它范围内的表单元素提交给服务器

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

II表单元素

（1）Input输入表单元素    单标签

Input用于收集用户信息

<input type="属性值">

Type是必须属性

Type常用属性值

text

文本框（20字符）

password

定义密码字段

radio

定义单选按钮

checkbox

定义复选框

button

定义单击按钮，不提交信息，用于和JS一起做某事

submit

提交按钮（默认显示“提交”，可通过value更改）

reset

重置按钮默认显示“重置”，可通过value更改）

File

上传文件

Input其他属性，name

同组的Radio和checkbox必须用相同的名字。

相同名字Radio是为了实现多选一

Input其他属性，value（规定Input元素的值）

规定框内默认显示文字/点击按钮把值送给后台

（value主要是后台人员使用）

Input其他属性，checked 主要针对单选按钮，复选框；页面打开时的默认选项。

Checked=“checked”

Input其他属性，maxlength规定输入字段中字符最大长度。

Label标签为Input定义标注标签

Label可以绑定一个表单元素，当点击<label>标签文本内容时候，浏览器会自动转到对应光标上。（for中的内容和id中内容相同）

<input type="radio" id="sex1" name="sex"><label for="sex1">男</label>

    <input type="radio" id="sex2" name="sex"><label for="sex2">女</label>

 

（2）Select  下拉表单元素 多个选项让用户选择，节约页面空间<select name="" id="">        <opition></opition>        <opition></opition>        <opition></opition>    </select>

在opition中定义selected=”selected”,设置默认选择项

（3）Textarea文本域元素

书写大量文字

<textarea name="" id="" cols="30" rows="10"></textarea>

Rows 行数

Cols 每行字符数

链接帖子
意见的链接
分享到其他网站
 分享
转到主题列表

黑客攻防讨论组

黑客攻防讨论组

  
    You don't have permission to chat.

    • 最近浏览   0位会员

      • 没有会员查看此页面。

    黑客世界站内导航 (SITE MAP)

    ×
    ×
    • 创建新的...