前端学习系列之html

html 12 月前 0 4

本文介绍: Hy per Text Ma rk up Lang uage（超文本标记语言）

网页基本标签

水平线标签

注释和特殊符号

图像、超链接

常见图像格式

href：规定链接指向的页面的 URL

target：链接页面的打开方式

name：定义锚名称

title：鼠标悬停显示的提示文本

列表、表格、媒体元素

表单及表单应用

表单的应用

初识html

html：Hy per Text Ma rk up Language（超文本标记语言）

发展史

优势

1.世界知名浏览器都支持 html

2. 市场需求大

W3C

Wo rl d Wide Web Con sort ium(万维网联盟)

标准

结构化标准语言：html、xml

表现标准语言：CSS

行为标准语言：DOM、ECMAScri p t

地址

http://www.w3.org

http://www.chinaw3c.org

格式

<head></head>:网页头部

<body></b od y>:主体部分

<b od y>、</b ody>等成对的标签，分别叫开放标签和闭合标签

网页 基本标签

注释：<!– 注释标签 –>

标题标签

<h1></h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5>

<h6></h6>

段落标签

<p></p>

换行标签

<b r/>

水平线标签

<hr/>

字体 样式

粗体：<str ong></str ong>

斜体：<em></em>

注释和特殊符号

注释：<!– 注释标签 –>

特殊符号

空格：&nbs p；

大于号：&gt；

小于号：&lt；

版权符号：&copy；

图像、超链接

图像

常见 图像格式

jpg、gif、png、bmp……

格式

<img src=”图片地址” alt=”图片替代文字” title=”鼠标悬停提示文字” width=”图片宽度” height=”图片高度” />

src ：图片地址，其中包括相对地址、绝对地址

相对地址：../

绝对地址：图片在电脑文件夹中的完整地址

alt：当图片找不到时，显示文字

title：鼠标悬停提示文字

超链接

<a> 标签定义超链接，用于从一个页面链接到另一个页面

格式

<a href=”” target=”” name=””></a>

重要属性

href：规定链接 指向的页面的 URL

外部链接：< a href=”http:// www.baidu.com“>百度</a>

内部链接：网站内部页面之间的相互链接：< a href=”index.html“>首页</a >

空链接：如果当时没有确定链接目标时：<a href=”#”>首页</a>

下载链接：如果href 里面地址是一个文件会下载这个文件：<a href=”x iazai.zip“>下载文件</a>

锚点链接：点我们点击链接，可以快速定位到页面中的某个位置：<a href=”#two“>首页</a>

<h1 id=”two”>首页</h1 >

target：链接页面的打开 方式

_top：跳出框架打开网页。

_parent：在父窗口打开网页。

_ frame name：在指定的框架中打开网页。

_self：为默认值当前页面打开。

_blank：为在新窗口中打开方式。

name：定义锚名称

锚：定义在某个点上

可以快速定位到页面中的某个位置：<a href=”#two”>首页</a>，<h1 id=”two”>首页</h1 >

title：鼠标悬停 显示的提示 文本

状态

对于a标签，一共有5种状态：:link, :vi site d, :hover, :focu s, :active

:link —— 于声明未访问状态链接的样式；

:vi site d —— 可以用于声明已经访问链接的样式；

:hover —— 可以用于声明鼠标悬停在链接上的样式；

:focu s —— 可以用于声明浏览器焦点悬停在链接上的样式(通过键盘选择链接)；

:active —— 可以用于声明浏览器点击链接的样式。

四个“状态”的先后过程是：a:link ->a:hover ->a:active ->a:vi site d。另外，a:active不能设置有无下划线（总是有的）

列表、表格、媒体 元素

列表

列表就是信息资源展现的一种形式。它可以使信息结构化和条理化，并以列表的形式显示出来，以便浏览者能够更加快捷的获得相应的信息。

分类

使用<ol></ol>表示

<ol>

        <li>java</li>

        <li>Pyth on</li>

        <li>运维</li>

        <li>前端</li>

        <li>C/c++</li>

</ol>

使用<ul></ul>表示

<ul>

        <li>java</li>

        <li>Pyth on</li>

        <li>运维</li>

        <li>前端</li>

        <li>C/c++</li>

</ul>

自定义列表

使用<dl></dl>表示

<dl>

        <dt>学科</dt>

        <li>java</li>

        <li>Python</li>

        <li>Linux</li>

        <li>C</li>

</dl>

其中：dl：标签

          dt：列表名称

          dd：列表内容

表格

优点

1.简单通用

基本 结构

2.行

3.列

4.跨行

使用

行:tr

列:td

跨行:row span

<table border=”1px“>

        <tr>

                <td>1-1</td>

                <td>1-2</td>

                <td>1-3</td>

                <td>1-4</td>

        </tr>

        <tr>

                <td>2-1</td>

                <td>2-2</td>

                <td>2-3</td>

                <td>2-4</td>

        </tr>

        <tr>

                <td>3-1</td>

                <td>3-2</td>

                <td>3-3</td>

                <td>3-4</td>

        </tr>

</table>

<table border=”1px“>

        <tr>

                <td colspan=”4″>1-1</td>

        </tr>

        <tr>

                <td rowspan=”2″>2-1</td>

                <td>2-2</td>

                <td>2-3</td>

                <td>2-4</td>

        </tr>

        <tr>

                <td>3-1</td>

                <td>3-2</td>

                <td>3-3</td>

        </tr>

</table>

<table border=”1p x“>

        <tr>

                <td colspan=”4″>1-1</td>

        </tr>

        <tr>

                <td>2-1</td>

                <td>2-2</td>

                <td>2-3</td>

                <td>2-4</td>

        </tr>

        <tr>

                <td>3-1</td>

                <td>3-2</td>

                <td>3-3</td>

                <td>3-4</td>

        </tr>

</table>

媒体 元素

格式

视频：

<video src=”” controls auto play></video>

音频：

<audio src=”” control s autoplay></audio >

src：资源路径

control s ：显示进度控制条

autoplay：自动播放

内联框架

在网站中嵌入外部网站使用 iframe 标签

格式：

<iframe src=”” name=””></iframe>

src:引用页面地址

name:框架标识名

表单及表单 应用

表单

格式：

<form action=”” method=””>

</fro m>

action:表单提交的位置，可以是网站或者请求处理地址

method:提交方式，post、get

input 属性

单选框

格式：

<input type=”redio” value=”” name=”” />

value:单选框的值

name:表示组，同一个组名，只能只能进行单选

多选框

格式：

<input type=”checkbox” value=”” name=”” checked />

value:多选框的值

name:表示组，同一个组名，能进行多选，提交成数组形式

checked ：默认选中

按钮

格式：

<input type=”button” value=”” name=”” />

图片按钮格式：

<in put type=”image” src=”” />

type:按钮类型

value:按钮显示值

name:按钮名称

src:图片按钮链接地址

type=”button“：普通按钮

type=”image“：图片按钮

type=”submit“：提交按钮

type=”reset“：重置按钮

滑块

格式：

<in put type=”range” min=”” max=”” step=”” name=”” />

range:滑块类型

step:每次相加值

搜索框

格式：

<in put type=”search” name=”” />

search：搜索框类型

name：名称

下拉框

格式：

<select name=””>

<option value=”” selected></opt ion>

</select>

select:下拉框

opt ion :下拉框选项

selected:默认选中

文本域

格式：

<textarea name=”” col s=”10″ ro ws=”10″>文本内容</textarea>

textarea：文本域标识

name：名称

col s：行

ro ws：列

文件域

格式：

<in put type=”file” value=”” name=”” />

val ue:显示值

name:名称

表单的应用

1.hidden:隐藏

2.readonly:只读

3.di sa bles:禁用

原文地址:https://blog.csdn.net/qq_35056891/art icle/de tail s/134624633

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_31094.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

html 标签表单

相关文章

MPLS VPN功能组件(3)

MPLS VPN功能组件(3)

互联网 10 月前 4

机器学习—半监督学习简单示例（标签传播算法）

机器学习—半监督学习简单示例（标签传播算法）

互联网 10 月前 3

html,css,js速成

html 10 月前 4

蓝桥杯Web应用开发-CSS3 新特性【练习二：获得焦点验证】

蓝桥杯Web应用开发-CSS3 新特性【练习二：获得焦点验证】

css 10 月前 2

蓝桥杯Web应用开发-CSS3 新特性【练习一：属性有效性验证】

蓝桥杯Web应用开发-CSS3 新特性【练习一：属性有效性验证】

css 10 月前 5

HTML元素的操作

html 10 月前 4

HTML+CSS：全景轮播

html 10 月前 5

HTML — 常用标签

html 10 月前 5

发表回复取消回复