html入门

最新推荐文章于 2022-08-25 15:57:24 发布
最新推荐文章于 2022-08-25 15:57:24 发布
阅读量269 收藏 3
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hengzhiyihuai/article/details/119038214
版权
本文详细介绍了HTML，包括其定义、代码格式、基本标签、网络表单、表格、列表、媒体元素和内联框架等内容。HTML是超文本标记语言，用于构建网页结构。文章还涵盖了W3C标准和关键元素如标题、段落、图像、链接、表单输入及表格布局等，是初学者理解HTML的全面指南。
摘要由CSDN通过智能技术生成

1什么是html?

          html是 Hyper Text Markup Language的缩写，译为超文本标记语言，是一种标记语言。

内容扩展：

          W3C标准(world wide web consortion)即万维网联盟，成立于1994年，web技术领域最权威和具影响力的国际中立性技术标准机构。

          W3C包括：结构化标准语言(HTMLXML)

                            表现标准语言(CSS)

                            行为标准语言(DOM,ECMAScript)

2.html代码的格式

如下图所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="这是keywords">
    <meta name="description" content="这是description">
    <title>MyFirstWeb</title>
</head>
<body>
helle,world
</body>
</html>

         DOCTYPE：为文档类型申明                  告诉浏览器，我们使用什么规范

         html：          总标签                                 写在<html>和</html>里面才会显示

         head：         代表网页头部                             

        meta：         描述型标签                            描述网站的一些信息

        name="keywords"  后面的content就是搜索用的关键字

         title：           网页标题

 3.网络的基本标签

                                     关键字

  1.  标题标签：       h1
  2. 段落标签           p
  3. 水平线标签       hr
  4. 换行标签          br
  5. 字体样式标签   粗体:strong  斜体:em
  6. 特殊符号         空格：&nbsp;  大于号：&gl  小于号：&tl  版权符：&copy 

     7.图片标签     img 

<img src="../Resources/images/2048559.jpg" alt="壁纸图" title="悬停文字" width="4000" height="3000">

src: 图片地址    相对地址(推荐使用)    绝对地址
（必填）             ../上一级目录

title：悬停文字        把鼠标放图片上会有文字显示

    8.链接标签   a

格式：<a href="这里写后缀为html的文件名">点我跳转</a> （也可以把“点我跳转”文字改为图片）

锚链接：1.需要一个锚标记    <a name="top">顶部</a>

              2.跳转到标记，用#   <a href="#top">回到顶部</a>\

功能性链接，邮件链接：<a href="mailto:xxxx@qq.com">点击联系我</a>

<a name="top">顶部</a>
<!--href:必填，表示要跳转的页面
target:表示窗口在那里打开  _blank：打开一个新网页
-->
<a href="TheFirstWeb.html" target="_blank">点我跳转到第一个网站</a>
<!--点击图片跳转-->
<a href="图像标签.html">
    <img src="../Resources/images/2048559.jpg" alt="壁纸图" title="悬停文字"
         width="800" height="600">
</a>

<!--用图片来拉长页面测试锚链接-->
<p>
    <a href="图像标签.html">
        <img src="../Resources/images/2048559.jpg" alt="壁纸图" title="悬停文字"
             width="800" height="600">
    </a>
</p><p>
    <a href="图像标签.html">
        <img src="../Resources/images/2048559.jpg" alt="壁纸图" title="悬停文字"
             width="800" height="600">
    </a>
</p>
<p>
    <a href="图像标签.html">
        <img src="../Resources/images/2048559.jpg" alt="壁纸图" title="悬停文字"
             width="800" height="600">
    </a>
</p><p>
    <a href="图像标签.html">
        <img src="../Resources/images/2048559.jpg" alt="壁纸图" title="悬停文字"
             width="800" height="600">
    </a>
</p>



<!--锚链接
1.需要一个锚标记
2.跳转到标记,用#号
-->
<a href="#top">回到顶部</a>

<!--功能性连接  邮件连接:mailto-->
<a href="mailto:xxxx@qq.com">点击联系我</a>

     9.列表

        有序列表<ol><li>        无序列表<ul><li>       自定义列表<dl><dt><dd>

<ol>                   <ul>               <dl>
    <li>c</li>             <li>c</li>         <dt>语言</dt>
    <li>c++</li>           <li>c++</li>       <dd>c/c++</dd>
    <li>java</li>          <li>java</li>      <dd>python</dd>
    <li>python</li>        <li>python</li>    <dd>java</dd>
    <li>go</li>            <li>go</li>       
</ol>                  </ul>                  <dt>难易程度</dt>
                                              <dd>易</dd>
                                              <dd>中</dd>
                                              <dd>难</dd>
                                         </dl>

 

     10.表单 <form></from>

action：向何处发送表单,
method：提交的方式
           get：我们可以在url中看到我们的账号密码等信息，不够安全，但高效
           post:比较安全，可传输大文件，而get不行

value:默认初始值，type为radio时必须要有初始值
maxlength：最长能写几个字符
size:长度
required：不能为空
hidden：隐藏
readonly：只读
checked：默认选中
disable：使该部分不能被使用
placeholder：提示信息
pattern：正则表达式

type="xxx" 
xxx：可以写 text textarea radio checkbox button file     email number submit reset
                文本框  文本域  单选框 多选框  按钮  文件域 邮件  数字       提交   重置

<selection><option>  下拉框

<form action="TheFirstWeb.html" method="post">
    <p>名字：<input type="text" name="usename"></p>
    <p>密码：<input type="password" name="pwd"></p>
    <p>
    <!--单选框 value：单选框的值  name:标识组-->
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl" name="sex">女
    </p>
    <!--多选框 checked：默认选择-->
    <p>
        <input type="checkbox" value="game" name="hobby" checked>游戏
        <input type="checkbox" value="code" name="hobby">代码
        <input type="checkbox" value="basketball" name="bobby">篮球
    </p>
<!--    按钮-->
    <p>
        <input type="button" value="这是按钮" name="btn">
    </p>
<!--    下拉框，列表框 select:默认选择-->
    <p>下拉框
        <select name="Conutry" id="">
            <option value="China">中国</option>
            <option value="US" selected>美国</option>
            <option value="UK">英国</option>
        </select>
    </p>
<!--    文本域-->
    <p>反馈：
        <textarea name="textarea" cols="50" rows="30">文本内容</textarea>
    </p>
<!--    文件域-->
    <p>
        <input type="file" name="file">
        <input type="button" name="upload" value="提交">
    </p>
<!--    邮件验证-->
    <p>邮箱：
        <input type="email" name="email" >
    </p>
<!--    URL-->
    <p>URL:
        <input type="url" name="url">
    </p>
<!--    数字-->
    <p>购买数量
        <input type="number" name="数量" max="10" min="0" step="1">
    </p>
<!--    增强鼠标可用性-->
    <p>
        <label for="mark">点我就到文本框</label>
        <input type="text" id="mark">
    </p>


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

</form>

     11.表格 <table>

行：tr  rows
列：td  table data cell
colspan:跨列  rowspan:跨行  align=center 居中
<table border="px">
    <tr>
        <td rowspan="2">跨行</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td colspan="3">跨列</td>
    </tr>
</table>

     12.媒体元素

<!--视频和音频-->
<video src="../Resources/video/一念永恒%20第9集.mp4.mp4" controls autoplay></video>

<audio src="../Resources/audio/夏天的风%20-%20火羊瞌睡了.flac" controls></audio>

     13.内联框架

src:引用页面地址    name：框架标识名
<iframe src="https://www.baidu.com" name="hello" frameborder="0"></iframe>

记得填写名称
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html top使用方法,HTML DOM Style top 属性
weixin_28793831的博客
06-27 4231
HTML DOM Style top 属性Style top 属性 Style 对象定义和用法top 属性设置或返回定位元素的顶部位置。该属性规定了元素的顶部位置，包括：内边距、滚动条、边框和外边距。提示：一个定位元素是元素的 position 属性被设置为：relative(相对)、absolute(绝对)或 fixed(固定)。语法设置 top 属性：Object.style.top="aut...
HTML页面滚动出现TOP，按下回到页面顶部
dlnu2015250622的博客
07-09 1603
简介：在HTML的制作中，在向下滚动以后，屏幕右下角出现TOP按钮，按下后页面回到顶部。 思考： 1.最开始的时候应该默认TOP按钮为hidden (因为最开始页面并没有滚动) 2.在js中获取到当前页面的高度 3.按下TOP按钮后，回到顶部。 4.用js实现滚动回去，而不是瞬间回去 1.TOP按钮的定义方法： #top { visibil...
html中top相反的属性,css top属性怎么用
weixin_27215337的博客
06-04 1228
css top属性规定元素的顶部边缘，该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移，所有主流浏览器都支持top属性。css top属性怎么用？作用：top 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。说明：对于 static 元素，为 auto；对于长度值，则为相应的绝对长度；对于百分比数值，为指定值；否则为 auto。对于相对定义...
html里top是向下,css left right top bottom定位
weixin_42495394的博客
06-03 2743
DIV CSS left right top bottom定位这四个CSS属性样式用于定位对象盒子，必须定义position属性值为absolute或者relative此取值方可生效。一、语法结构 - TOPLeft、right、top、bottom后跟数字+html单位。示范结构div{left:20px}div{right:20px}div{top:20px}div{bottom:2...
html文件中top什么意思,margin-top在html中的意思是什么
weixin_33709522的博客
06-15 4107
在html中margin-top的意思为“上边距”，是用于设置元素的上部边距的一个css属性；其语法格式为“margin-top:auto|length|%;”，允许设置负值。本教程操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。CSS margin-top 属性margin-top属性设置元素的上部边距。注意： 负值是允许的。语法:margin-to...
HTML入门标签
10-11
比较详细的HTML标签，常用到的标签都包括在内了。新手可以看看
学习html入门
12-24
学习HTML入门，首先要理解其基本结构和语法。 HTML由两大部分构成：头部（Head）和主体（Body）。头部不直接显示在页面上，但包含了许多对网页整体至关重要的元数据，如标题（Title）、字符编码（Character Set）、...
html入门学习.zip
01-01
html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习 html入门学习html...
HTML 入门资料Demo
最新发布
01-23
HTML 入门手册(一)：https://shuaici.blog.csdn.net/article/details/135680716 HTML 入门手册(二)：https://shuaici.blog.csdn.net/article/details/135698613 HTML 英文全称 " HyperText Mark-up Language " , ...
HTML入门学习及笔记.zip
01-01
HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记 HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记 HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记...
超链接 href _top 忽略框架 在顶层打开新页面
lvzhyt的专栏
12-23 2311
页面用frame框架，当重新连接到登陆页面时 target 到指定的frame 出现框架中 再登陆的页面。原先解决方式 parent.parent.parent.location 页面重定位。_top 在浏览器的的整个窗口中打开，忽略任何框架。
HTML定位相关
weixin_48100716的博客
08-25 474
特点: 元素脱离文档流(不占原来的位置) ,通过left/right/top/bottom控制元素的位置,让元素相对于窗口(默认)或某一个上级元素做偏移,如果需要相对于某一个上级元素则必须把上级元素改成相对定位作为参照物.特点: 元素不脱离文档流(不管元素显示到什么位置都占着原来的位置),通过left/right/top/bottom控制元素的位置, 让元素相对于初始位置做偏移.特点: 元素脱离文档流, 通过left/right/top/bottom控制元素的位置,让元素相对于窗口做位置偏移.
html滑动后头在最上面,教你在网页中添加返回顶端的滑动Top按钮
weixin_36011776的博客
06-08 702
网上找了很多top按钮，都不尽人意，最后终于发现一个好用的，现教给大家。这个插件原名是jQuery:Scrolltop滑动插件，原作者是国外的，在hiro的博客里看到使用方法，可能我太菜了，看了半天没弄懂，最后自己弄明白了。现将我的方法教给大家，此教程适合菜鸟，高手绕道。文件下载：效果演示:点击此处第一步：下载上方的文件，将其解压缩，得到两个js文件和一个gif图片，将图片放在你网站空间的根目录...
html中置顶的命令行是啥,html怎么把置顶
weixin_42470300的博客
06-03 2453
html怎么把置顶1.怎样使用DW让网页图片置顶使用DW让网页图片置顶，可分三种情况：1. css reset在HTML标签在浏览器里有默认的样式，例如 p标签有上下边距，strong标签有字体加粗样式，em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别，例如ul默认带有缩进的样式，在IE下，它的缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现的。在切换页面...
html怎么设置top,css border-top属性怎么用
weixin_29515317的博客
07-03 2398
border-top属性定义及用法在css中，border-top属性是一个简写属性，是用来将元素上边框的所有的属性定义到一个声明中，当我们要单独设置元素上边框的显示效果的时候，就可使用css中的border-top属性来实现。border-top属性所定义的上边框属性：border-top-width(上边框宽度)、border-top-style(上边框样式)、border-top-color...
HTML中a标签的target属性的“_blank”、“_self”、“_parent”、“_top”4个属性值
weixin_52844244的博客
12-08 1271
HTML中a标签的target属性的“_blank”、“_self”、“_parent”、“_top”这4个属性值 - it610.com 结合具体例子，有图可看，非常清楚。
html中<a>标签_top和_parent的区别
mauersu
03-27 4030
源：http://blog.sina.com.cn/s/blog_698e6e270100m3a0.html 评： 在html中，&lt;a&gt;标签有个target属性，而targe属性有四个值，分别是：_blank、_self、_top、 _parent。前两个相信很好理解，第一个就是在新窗口中打开的意思，第二个时候默认的，就是在当前窗口打开，那下面来说下后两者的区别。     _...
HTML入门：从基础到实践
"这是一份由浅入深的HTML入门教材，旨在帮助初学者掌握HTML的基础知识，包括HTML文档的基本结构和字符实体的使用。" 在Web程序开发中，HTML（超文本标记语言）是构建网页内容的核心语言。HTML文件本质上是包含一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值