前端HTML

最新推荐文章于 2024-07-16 15:41:31 发布

RElim143

最新推荐文章于 2024-07-16 15:41:31 发布

阅读量181

点赞数

分类专栏： html 文章标签： html html5 java web

本文链接：https://blog.csdn.net/RElim/article/details/106310045

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

什么是HTML?

HTML(Hyper Text Markup Lunguage超文本标记语言)

HTML5的优势

世界知名浏览器厂商对html5的支持
市场需求
跨平台

W3C标准

World Wide Web Consortium (万维网联盟)
成立于1994年,Web技术领域最具权威和影响力的国际中立性技术标准机构
https://www.w3.org/
https://www.chinaw3c.org/

W3C标准包括:

结构标准语言(html,xml)
表现标准语言(css)
行为标准语言(DOM,ECMAScript)

html基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--标题-->
    <title>第一个网页</title>
<!--头-->
</head>
<!--主体-->
<body>

</body>
</html>

网页基本信息

DOCTYPE声明标签
< tittle >标题标签
< mate > 描述标签

网页的基本标签

标题标签
段落标签
换行标签
水平线标签
字体样式标签
注释和特殊符号

<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!--一级标签字体大于二级标签,依次类推-->

<!--段落标签-->
<p>段落1</p>
<p>段落2</p>

<!--换行标签-->
换行 <br/> 标签

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

<!--字体样式标签-->
<strong>粗体</strong>
<em>斜体</em>

<!--注释-->
<!--特殊符号-->
空&nbsp;格&emsp;.
大于号:&gt;
小于号:&lt;
版权符号:&copy;

图像标签

常见的图片格式
- JPG
- GIF
- PNG
- BMP

<!--
    图像标签
    ../ 上级目录
    一般图片推荐使用相对路径
-->
<img src="图片所在路径" alt="加载失败时的代替文字" title="鼠标悬停文字">

链接标签

<!--
    页面间链接
    _blank 在新标签中打开
    _self 默认 在自己当前页打开
-->
<a href="链接路径" target="目标打开的位置">链接名称</a>

<!--
    锚链节
    1. 需要一个锚标记
    2. 通过#跳转到标记
-->
<a name="top" href="html3.html" target="_blank"></a>
<a href="#top">点击回到top标签处</a>

<!--
    功能性链接
    mailto
    QQ推广链接
-->
<a href="mailto:邮箱地址">点击跳转到邮箱</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1060520754&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:1060520754:53" alt="点击领取一个18岁身高,1.72米,体重120斤的宝藏男孩" title="点击领取一个18岁身高,1.72米,体重120斤的宝藏男孩"/>
</a>

<!--行内元素-->
<!--无论内容多少都在一行的元素叫做悍内元素-->
<!--块元素-->
<!--独占一行的元素叫做块元素-->

列表
列表分为:

无序列表
有序列表order list
自定义列表

<!--有序列表order list-->
<ol>
    <li>喵喵喵</li>
    <li>喵喵喵</li>
    <li>喵喵喵</li>
    <li>喵喵喵</li>
    <li>喵喵喵</li>
</ol>
<hr>
<!--无序列表 unorder list-->
<ul>
    <li>喵喵喵</li>
    <li>喵喵喵</li>
    <li>喵喵喵</li>
    <li>喵喵喵</li>
    <li>喵喵喵</li>
</ul>
<hr>
<!--自定义列表 definition list-->
<dl>
    <dt>列表名称</dt>
    <dd>喵喵喵</dd>
    <dd>喵喵喵</dd>
    <dd>喵喵喵</dd>
    <dd>喵喵喵</dd>
    <dd>喵喵喵</dd>
</dl>

表格

行
列
合并单元格

<!--border: 表格的线条-->
<table border="1px">
<!--tr: 行-->
    <tr>
<!--td: 列-->
<!--colspan 跨列合并单元格-->
        <td colspan="2">11111</td>
        <td>22222</td>
    </tr>
    <tr>
<!--跨列合并单元格-->
        <td rowspan="2">aaaaa</td>
        <td>bbbbb</td>
        <td>ccccc</td>
    </tr>
    <tr>
        <td>AAAAA</td>
        <td>BBBBB</td>
    </tr>
</table>

媒体元素

视频元素: video
音频元素: audio

<!--视频-->
<!--
    controls 显示进度条和视频
    autoplay 自动播放
-->
<video src="视频路径,依旧推荐使用相对路径" controls autoplay></video>

<!--音频-->
<!--
    controls 显示进度条和视频
    autoplay 自动播放
-->
<audio src="音频资源路径,推荐使用相对路径" controls autoplay></audio>

页面结构分析

header (头部)
footer (脚部)
section (网页主体)
article   (文章内容)
nav   (导航标签)
aside    (应用侧边栏)

iframe内联框架

<!--
    src: 打开的资源地址
    iframe可以在<a><a/>中的target属性中通过name等属性被调用
    作用就是将一个页面打开在该框架内
-->

<iframe src="https://www.baidu.com" frameborder="0" width="1000px" height="800px" name="iframe1"></iframe>
<a href="https://www.csdn.net/" target="iframe1">超链接</a>

表单

<!--
    form: 表单标签
    method: 提交表单方式 get为显示信息效率高 post为隐藏信息安全,可以传输打文件 一般为了安全性 使用post
    action: 提交路径
    -->
    <form action="提交路径" method="post">
<!--文本框-->
        <p>文本框:<input type="text" name="name"></p>
<!--密码框-->
        <P>密码框:<input type="password" name="name"></P>
<!--提交按钮-->
        <P><input type="submit" value="提交">
<!--重置按钮-->
        <input type="reset" value="重置"></p>
    </form>

表单元素格式(属性)

type
name
value
size (字体大小长宽)
maxlength (输入框输入的最大长度限制)
checked 当类型为勾选框时指定是否被选中

常用标签及域属性

select option (selected默认选中)下拉框
textarea 文本域


```html
<!--下拉框,selected默认选中-->
<select>
    <option selected>中国</option>
    <option>巴基斯坦</option>
    <option>塞尔维亚</option>
    <option>伊朗</option>
</select>

<!--
    文本域
    cols rows控制文本域大小
-->
<textarea title="文本域" cols="50" rows="10"></textarea>

<!--文件域:选择文件使用-->
<input type="file" name="files">

功能性标签

<!--邮件验证-->
<input type="email" name="email">

<!--URL验证-->
<input type="url" name="url">

<!--数字验证-->
<input type="number" name="number" max="100" min="0">

<!--滑块一般用作调节音量-->
<input type="range" name="voice" min="0" max="100" step="2">

<!--搜索-->
<input type="search" name="search">

<!--增强鼠标可用性,点到文字就可以进入输入框-->
输入框<input type="text" id="text1">
<label for="text1">点我就能进入输入框</label>

表单的作用:只读 readonly, 禁用 disabled, 隐藏 hidden

表单初级验证:

placeholder文本框为空时的默认值
required 非空验证
pattern 正则表达式

RElim143

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端HTML

什么是HTML?HTML(Hyper Text Markup Lunguage超文本标记语言)HTML5的优势世界知名浏览器厂商对html5的支持市场需求跨平台W3C标准World Wide Web Consortium (万维网联盟)成立于1994年,Web技术领域最具权威和影响力的国际中立性技术标准机构https://www.w3.org/https://www.chinaw3c.org/W3C标准包括:结构标准语言(html,xml)表现标准语言(c.
复制链接

扫一扫