html一发入魂

最新推荐文章于 2024-05-21 18:11:13 发布

Lucky me.

最新推荐文章于 2024-05-21 18:11:13 发布

阅读量99

点赞数

分类专栏：其他的学习内容文章标签： html

本文链接：https://blog.csdn.net/qq_46025779/article/details/119331563

版权

其他的学习内容专栏收录该内容

3 篇文章 0 订阅

订阅专栏

初识HTML

什么是HTML：

超文本标记语言：

超文本包括：文字图片音频视频动画等
html5+css3
自带浏览器跨平台：
- 微软
- google
- 苹果
- Mozilla
W3C ：万维网联盟
- 结构化标准语言（html(超文本语言),xml（配置文件））
- 表现标准语言（css）
- 行为标准（DOM ,ECMAScript）

常见IDE：

记事本
DW
IDEA
WebStorm

网页基本标签

基本标签：

<!-- 标题标签 -->
    <h1>一级标签</h1>
    <h2>二级标签</h2>
    <h3>三级标签</h3>
    <h4>四级标签</h4>
    <h5>五级标签</h5>
    <h6>六级标签</h6>
    <hr>
    <!--段落标签-->
    <p> 小白兔白又白，</p>
    <p>两只耳朵竖起来，</p>
    <p>爱吃萝卜爱吃菜， </p>
    <p>跑起路来真叫快。 </p>
    <p>小白兔白又白， </p>
    <p>两只耳朵竖起来， </p>
    <p>爱吃萝卜爱吃菜，</p>
    <p>跑起路来真叫快。</p>

    <!--水平线标签-->
    <hr>

    <!--换行标签-->
    小白兔白又白， <br>
    两只耳朵竖起来， <br>
    爱吃萝卜爱吃菜， <br>
    跑起路来真叫快。 <br>
    小白兔白又白， <br>
    两只耳朵竖起来， <br>
    爱吃萝卜爱吃菜， <br>
    跑起路来真叫快。<br>

    <!--粗体，斜体-->
    <h1>字体样式标签</h1>
    粗体：<strong>我真帅</strong><br>
    斜体：<em>我真帅</em>
    <br>

    <!--特殊符号-->
    空格：空&nbsp;格 <br>
    大于：&gt;<br>
    小于：&lt;<br>
    版权：&copy;<br>

图像超链接网页布局

图像标签：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oWpVNpC7-1627900895596)(C:\Users\陈子涵\AppData\Roaming\Typora\typora-user-images\image-20210713220713137.png)]$

例子：
<img src="https://hbimg.huabanimg.com/d2c549e046be5b2367ae2e12fa957f42de6a1ed335381-qiXTTm_fw658/format/webp" alt="库里" title="悬停文字" width="100px" height="200px" >

链接标签：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jy3zqsI4-1627900895598)(C:\Users\陈子涵\AppData\Roaming\Typora\typora-user-images\image-20210713221149569.png)]$

列表表格媒体元素

列表：

<body>
<!--有序列表
应用范围：试卷，问答-->
<ol>
    <li>java</li>
    <li>python</li>
    <li>运维</li>
    <li>前端</li>
    <li>c</li>
</ol>

<hr>
<!--无序列表
应用范围：导航，侧边栏-->
<ul>
    <li>java</li>
    <li>python</li>
    <li>运维</li>
    <li>前端</li>
    <li>c</li>
</ul>

<hr>
<!--自定义列表
dl：标签
dt：列表名称
dd：列表内容
-->
<dl>
    <dt>学课</dt>

    <dd>java</dd>
    <dd>python</dd>
    <dd>Linux</dd>
    <dd>c</dd>

    <dt>位置</dt>
    <dd>河南</dd>
    <dd>南阳</dd>
    <dd>杭州</dd>
</dl>

表格：

<!--表格 table
行  tr  rows
列  td
-->
<table border="1px">
    <tr>
        <!--colspan:跨列-->
        <td colspan="4" style="text-align: center" >学生成绩</td>

    </tr>
    <tr>
        <tr>
            <!--rowspan:跨行-->
            <td rowspan="2" style="text-align: center">JKChen</td>
            <td>语文</td>
            <td>100</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>101</td>
        </tr>
    </tr>
    <tr>
        <tr>
            <!--rowspan:跨行-->
            <td rowspan="2" style="text-align: center">凶狠</td>
            <td>语文</td>
            <td>100</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>102</td>
        </tr>
    </tr>

媒体元素：

<!--音频和视频
src: 资源路径
controls: 控制条
autoplay: 自动播放
-->
<video src="../resources/video/生活别处的你.mp4" controls autoplay></video>
<br>

<audio src="../resources/audio/生活在别处的你.mp3" controls autofocus loop="false"></audio>

<embed  height="100" width="100" data="../resources/audio/生活在别处的你.mp3" ></embed>

页面结构：

<header>
<h2>网页头部</h2>
</header>

<section>
    <h2>网页主题</h2>
</section>

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

内联框架：

是一个非常有用的标签，可以用它来模拟Ajax效果，使用iframe可以在一个表格内调用一个外部文件

即内联框架通过内联框架可以实现在网页中“插入”网页

<!--
内联框架
src：路径
w-h：高度和宽度
-->
<iframe src="http://www.baidu.com"  name="hello" frameborder="0" width="100%" height="800px"></iframe>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tM2LLwaq-1627900895600)(C:\Users\陈子涵\AppData\Roaming\Typora\typora-user-images\image-20210714150747356.png)]$

<iframe src="" name="hello" frameborder="0"></iframe>

<a href="http://www.baidu.com"  target="hello">点我进去百度</a>

表单及表单应用

表单语法：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mY3wa7u8-1627900895603)(C:\Users\陈子涵\AppData\Roaming\Typora\typora-user-images\image-20210714151551574.png)]$

表单元素格式：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kUzxV6CC-1627900895605)(C:\Users\陈子涵\AppData\Roaming\Typora\typora-user-images\image-20210714160717587.png)]$

表单常用元素：

<!--表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method: post,get 提交方式
    get方式提交：我们可以看到在Url中看到我们的账号和密码的信息
    post方式提交： 比较安全，传输大文件
-->
<form action="5.列表.html" method="post">
    <!--文本输入框：input type="text"-->
    <p>名字：<input type="text" name="name" placeholder="请输入名字..."></p>
    <!--密码框-->
    <p>密码：<input type="password" name="pwd" placeholder="请输入密码..."></p>

    <!--单选框标签
    type="radio"
    value:单选框的值
    name: 表示组
    -->
    <p>性别：
        <input type="radio" value="boy" name="sex"checked>男
        <input type="radio" value="girl" name="sex">女
    </p>

    <!--多选框
    type="checkbox"
    -->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby" checked>敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
    </p>
    <!--按钮
    type="button" 普通按钮
    type="image"  图像按钮
    type="submit"   提交按钮
    type="reset"    重置
    -->
    <p>按钮：
        <input type="button" name="btn1" value="点击边长">
<!--        <input type="image" src="../resources/image/img.png" alt="坏带了哦" title="未知">-->
    </p>

    <!--
    下拉框：
    列表框：
    -->
    <p>国家：
        <select name="列表名称" id="">
            <option value="china">中国</option>
            <option value="usa">美国</option>
            <option value="rth">瑞士</option>
            <option value="uk">英国</option>
            <option value="ny" selected>南阳</option>
        </select>

    </p>

    <!--文本域
        cols="30" rows="10"
    -->
    <p>反馈：
        <textarea name="textarea" cols="30" rows="10" placeholder="请输入你的反馈"></textarea>
    </p>

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

    <!--邮箱验证-->
    <p>邮箱：
        <input type="email" name="email">
    </p>

    <!--url验证-->
    <p>网址：
        <input type="url" name="url">
    </p>

    <!--数字-->
    <p>数字：
        <input type="number" name="num" max="100" min="0" step="1">
    </p>

    <!--滑块-->
    <p>音量：
        <input type="range" min="0" max="100" name="voice" step="10">
    </p>

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

    <p>
        <input type="submit">
        <input type="reset">
    </p>

表单应用：

隐藏域 hidden
只读 readonly
禁用 disabled

<!--增强鼠标可用性-->
<p>
    <label for="mark">你点我试试</label>
    <input type="text" id="mark">
</p>

表单初级验证

常用方式：

placeholder 输入提示语
required 不能为空判断
pe=“search” name=“seach”>


### 表单应用：

- 隐藏域   hidden
- 只读   readonly
- 禁用  disabled

```html
<!--增强鼠标可用性-->
<p>
    <label for="mark">你点我试试</label>
    <input type="text" id="mark">
</p>

表单初级验证

常用方式：

placeholder 输入提示语
required 不能为空判断
pattern 正则判断

根据秦疆老师视频学习捋的笔记

Lucky me.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
html一发入魂

初识HTML什么是HTML：超文本标记语言：超文本包括：文字图片音频视频动画等html5+css3自带浏览器跨平台：微软google苹果MozillaW3C ：万维网联盟结构化标准语言（html(超文本语言),xml（配置文件））表现标准语言（css）行为标准（DOM ,ECMAScript）常见IDE：记事本DWIDEAWebStorm网页基本标签基本标签： <h1>一级标签</h
复制链接

扫一扫