Html学习

最新推荐文章于 2024-01-31 18:15:24 发布

westdream丶

最新推荐文章于 2024-01-31 18:15:24 发布

阅读量159

点赞数

本文链接：https://blog.csdn.net/c1017722787/article/details/112780736

版权

什么是HTML

1.基本介绍

Hyper Text Markup Language(超文本标记语言)
超文本包括:文字、图片、音频、视频、动画等.
W3C标准
- 结构化标准语言（HTML、XML）
- 表现标准语言（CSS）
- 行为标准（DOM、ECMAScript)

2.标签

2.1网页基本标签

快速生成标签对：标签名+Tab

(1)标题标签

<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

(2) 段落标签

<p></p>
<p>纸 船——寄母亲</p>
<p>我从不肯妄弃了一张纸</p>
<p>总是留着——留着，</p>
<p>叠成一只一只很小的船儿</p>
<p>从舟上抛下在海里。</p>
<p>有的被天风吹卷到舟中的窗里，</p>
<p>有的被海浪打湿，沾在船头上。</p>
<p>我仍是不灰心地每天叠着，</p>
<p>总希望有一只能流到我要它到的地方去。</p>
<p>母亲，倘若你梦中看见一只很小的白船儿，</p>
<p>不要惊讶它无端入梦。</p>
<p>这是你至爱的女儿含着泪叠的，</p>
<p>万水千山,求它载着她的爱和悲哀归去！</p>

(3) 换行标签

纸 船——寄母亲<br/>
我从不肯妄弃了一张纸<br/>
总是留着——留着，<br/>
叠成一只一只很小的船儿<br/>
从舟上抛下在海里。<br/>
有的被天风吹卷到舟中的窗里，<br/>
有的被海浪打湿，沾在船头上。<br/>
我仍是不灰心地每天叠着，<br/>
总希望有一只能流到我要它到的地方去。<br/>
母亲，倘若你梦中看见一只很小的白船儿，<br/>
不要惊讶它无端入梦。<br/>
这是你至爱的女儿含着泪叠的，<br/>
万水千山,求它载着她的爱和悲哀归去！<br/>

(4) 水平线标签

<hr/>
<p>我是水平线</p>
<hr/>

(5) 字体样式标签

粗体标签

粗体：<strong>I love you</strong><br/>

斜体标签
```
斜体：<em>I love you</em>
```

(6)注释和特殊符号

注释
```

```
特殊符号&

1）空格符号

            ```html

空格

            ```

            ```

2）版权符号©

&copy;

3）特殊符号记忆方式

& +字母 + ;

2.2图片标签

<!--img标签
src：图片地址（必填）
     相对地址，绝对地址
     ../   --上一级目录,推荐使用相对路径
alt：图片的描述信息（必填）
title：悬停文字，鼠标放在图片上显示的文字
width:宽
height:高
-->
<img src="../resources/images/3.png" alt="测试图片" title="悬停文字" >

2.3 链接标签

<…a href=“path” target=“目标窗口位置”>链接文本或图像

(1)页面间链接

从一个页面链接到另一个页面

<!--a标签学习
href:必填，表示要跳转的页面地址
     a标签中间写链接文本或者图像
target:表示窗口在哪里打开
     _blank   在新标签中打开
     _self    在自己的网页中打开
-->
<a href="1.我的第一个网页.html" target="_blank">点击跳转到页面一</a>
<a href="https://www.baidu.com" target="_self">点击跳转到百度</a>
<br/>
<a href="1.我的第一个网页.html"><img src="../resources/images/3.png" alt="测试图片" title="悬停文字" width="300" height="300">
</a>

(2) 锚链接 #：跳转到页面的指定位置，比如#top 顶部；#down 底部；

<!--设置顶部标签-->
<a name="top">顶部</a>
<!--跳转到顶部-->
<a href="#top">点击跳转到顶部</a>

<!--设置底部标签-->
<a name="down">底部</a>
<!--跳转到底部-->
<a href="#down">点击跳转到底部</a>

(3)功能性链接

邮件链接mailto

<a href="mailto:xxxx@qq.com">点击给我发邮件</a>

QQ推广链接

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=qq号&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:qq号:53" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>

2.4列表

(1)有序列表ol

<!--有序列表
ol标签：order list
li标签：list
-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>C++/C</li>
</ol>

(2)无序列表ul

<!--无序列表
ul标签：
li标签：
-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>C++/C</li>
</ul>

(3)自定义列表dl

<!--自定义序列表
dl：标签
dt：列表名称
dd：列表内容
-->
<dl>
    <dt>程序语言</dt>

    <dd>Python</dd>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>C++</dd>

    <dt>位置</dt>

    <dd>西安</dd>
    <dd>重庆</dd>
    <dd>武汉</dd>

</dl>

2.5表格table

基本结构

(1)单元格table

<table>
    
</table>

(2)行tr

<table>
    <tr></tr>
</table>

(3)列td

<table>
    <td></td>
</table>

(4)跨行rowspan

<table>
    <tr>
        <td rowspan="2"></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

(5)跨列colspan

          ```html

1-1

1-2

1-3

1-4

```

2.6视频和音频

(1)视频元素Video

<!--
src:资源路径
controls:控制条
autoplay:自动播放
-->
<video src="path" controls autoplay></video>

(2)音频元素audio

     ```html

```

3.页面结构分析

元素名	描述
header	标题头部区域的内容(用于页面或页面中的一块区域)
footer	标记脚部区域的内容(用于整个页面或页面的一块区域)
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用(常用于侧边栏)
nav	导航类辅助内容

<header>
    <h2>网页头部</h2>
</header>
<section>
    <h2>网页主体</h2>
</section>

<footer>
    <h2>网页脚部</h2>
</footer>

<nav>
    <h2>我是导航条</h2>
</nav>

3.1iframe内联框架

<!--iframe标签
src：引用页面地址
name：框架标识名
wight-height:宽度和高度
-->
<iframe src="" name="hello" frameborder="0" width="400px" height="400px"></iframe>
<a href="1.我的第一个网页.html" target="hello">点击跳转</a>

3.2表单form

action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method:post,get 提交方式

*get方式提交：我们可以在url中看到我们提交的信息，不安全，高效

*post方式提交：比较安全，传输大文件，如果要查看输入信息的话，检查——>NetWorks->Session——>header——>Form data

<form action="1.我的第一个网页.html" method="get">
    <p>
        <!--文本输入框：input type="text" name="username"-->
        名字:<input type="text" name="username">
    </p>
    <p>
        <!--密码输入框：input type="password" name="pwd"-->
        密码:<input type="password" name="pwd">
    </p>
    <p>
        <!--提交框：input type="submit"-->
        <input type="submit" name="提交">
    </p>
    <p>
        <!--重置框：input type="reset"-->
        <input type="reset" name="重置">
    </p>
</form>

(1)表单元素格式

属性	说明
type	指定元素的类型。text(文本框)、password(密码框)、checkbox(多选款)、radio(单选框)、submit(提交)、reset(重置)、file(文件框)、hidden(隐藏框)、image(图片)和button(按钮),默认为text
name	指定表单元素的名称必填
value	元素的初始值。type为radio时必须指定一个值
size	指定表单元素的初始宽度。当type为text或者password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位。
maxlength	type为text或者password时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否是被选中

radio单选框，只能选择一个选项

checked属性：默认选中

<p>
    性别：
    <input type="radio" value="boy" name="sex">男
    <input type="radio" value="girl" name="sex">女
</p>

checkbox多选框，可以选择多个选项

checked属性：默认选中

<p>
    爱好：
    <input type="checkbox" value="sleep" name="hobby">睡觉
    <input type="checkbox" value="sport" name="hobby">运动
    <input type="checkbox" value="study" name="hoddy">学习
</p>

按钮标签

1)input type=“button” 普通按钮
```
 <input type="button" name="btn1" value="点击变长">
```
2)input type=“image” 图像按钮
```
<input type="image" src="../resources/3.png">
```
3)input type=“submit” 提交按钮
```
<input type="submit">
```
4)input type=“reset” 重置按钮
```
<input type="reset">
```

下拉框select标签

option标签:下拉框中的值

selected属性：默认选中哪一个标签

<p>国家：
        <select name="列表名称" >
            <option value="China">中国</option>
            <option value="USA">美国</option>
            <option value="ETH" selected>瑞士</option>
            <option value="India">印度</option>
        </select>
    </p>

文本域textarea标签，可以自由拖动大小

<textarea name="textarea" cols="30" rows="10">反馈内容</textarea>

文件域

<!--    文件域-->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>

简单验证标签

邮箱验证email

<p>
    邮箱：
    <input type="email" name="email">
</p>

URL验证

<p>
    URL:
    <input type="url" name="url">
</p>

3)数字验证

<!--数字验证
最大值为100，最小值为0，步长为10
max：最大值
min：最小值
step：步长
-->
<p>输入数字：
    <input type="number" name="num" max="100" min="0" step="10">
</p>

滑块标签range

<p>
    音量：
    <input type="range" min="0" max="100" step="2" name="voice">
</p>

搜索框标签search

<p>
    搜索：
    <input type="search" name="search">
</p>

表单的应用属性

1）隐藏域hidden

2）只读readonly

3）禁用disable

4）增强鼠标可用性

鼠标点击文字就自动锁定某个输入框
```
<p>
    <label for="mark">你点我试试</label>
    <input type="text" id="mark">
</p>
```

3.3表单初级验证

常用方式：

1）placeholder 提示信息

<p>
    <input type="text" name="username" placeholder="请输入用户名">
    <input type="text" name="password" placeholder="请输入密码">
</p>

2）required 非空判断

<p>
    <input type="text" name="username" placeholder="请输入用户名" required>
    <input type="text" name="password" placeholder="请输入密码" required>
</p>

3）pattern 正则表达式验证

常用正则表达式验证公式可自行上网进行查询,比如Email地址的正则表达式为^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$

<p>
    自定义邮箱验证：
    <input type="text" name="divmail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
</p>

westdream丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html学习

什么是HTML1.基本介绍Hyper Text Markup Language(超文本标记语言)超文本包括:文字、图片、音频、视频、动画等.W3C标准结构化标准语言（HTML、XML）表现标准语言（CSS）行为标准（DOM、ECMAScript)2.标签2.1网页基本标签快速生成标签对：标签名+Tab(1)标题标签<h1>一级标签</h1><h2>二级标签</h2><h3>三级标签</h3&gt
复制链接

扫一扫