HTML

最新推荐文章于 2022-04-09 10:43:09 发布

サUBLL� 尔~

最新推荐文章于 2022-04-09 10:43:09 发布

阅读量164

点赞数 1

文章标签： html5 html

本文链接：https://blog.csdn.net/qq_59378215/article/details/120203847

版权

HYML : Hyper Test Markup Language 超文本标记语言

作用：搭建网页结构，在网页上展示内容

<!DOCTYPE html>         <!--文档声明-->
<body lang="en">        <!--根标签-->
<head>                  <!--头标签-->
    <meta charset="UTF-8">
    <title>html</title>  <!--标题-->
</head>
<body>
<!--给客户看的内容
    注释不能嵌套
    属性在开始标签之内
    -->
Hello World
</body>

1、标签定义： <p> </p>

p叫『开始标签』，/p叫『结束标签』。开始标签和结束标签一起构成了一个完整的标签。开始标签和结束标签之间的部分叫『文本标签体』，也简称『标签体』。

标签还带有属性，<a href="http://www.baidu.com"></a>，href是『属性名』后+链接，是『属性值』。标签不区分大小写。

2、对齐 align

<!--align 对齐到：center居中对齐 right向右对齐 left向左对齐-->
<p align="center">床前明月光，疑似地上霜</p>

3、标题标签 <h> </h>

<!--标题标签 共1-6级-->
<h1>HelloWorld</h1>
<h2>HelloWorld</h2>
<h3>HelloWorld</h3>
<h4>HelloWorld</h4>
<h5>HelloWorld</h5>
<h6>HelloWorld</h6>

4、换行标签 <br>

5、有序列表ol ,无序列表ul

<!--有序列表ol 无序列表ul-->
<!--快捷键
    ul>li*4>{$}
-->
<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
    <li>葡萄</li>
</ul>

<ol>
    <li>王者荣耀</li>
    <li>绝地求生</li>
    <li>和平精英</li>
    <li>英雄联盟</li>
</ol>

6、超链接标签 <a herf=" "> <a>

<!--超链接标签-->
<!--快捷键：a 制表键Tab
    0.访问资源，既可以是本地资源，也可以是互联网中的资源
    1.写超链接标签时，要在开始标签与结束标签之间 写值
    2.访问目标资源时，在href属性内写资源路径
    3.target属性：_blank  打开一个新的空白窗口 展现目标资源
                 _self  在当前窗口 展现目标资源  默认方式
    4.当一个标签内有多个属性时，属性与属性之间使用空格隔开
-->
<a href="http://www.baidu.com">百度一下</a>  <br>
<a href=""></a>

7、图片标签 <img src=" " >

<!--图片标签-->
<!--
    作用：进行图片展示   既可以展示本地图片资源，也可以展示互联图片资源
    src：图片地址
    width：设置图片的宽
    height:设置图片的高
    title:鼠标悬浮时，给的提示信息
    alt:当图片没有加载成功时，显示的提示信息
-->
<img src="C:\Software\QQ\Document\1942461208\FileRecv\MobileFile\637636930599870620qqx5_share_temp_01.jpg__.jpg" alt="">
<!--通过idea 无法直接访问 因为当前项目下没有此资源-->

8、块标签 <div> </div> 前后有换行的块

<span> </span> 前后没换行的块

<!--块标签-->
<!--
    将内容分成不同的区域
-->
<div style="height:200px;width:200px;border:1px solid red">1</div>
<div style="height:50px;width:50px;border:1px solid blue">2</div>
<div>3</div>
<span>A</span>
<span>HelloWorld</span>
<!--div   定义一个前后有换行的块-->
<!--span  定义一个前后无换行的块-->

9、实体字符

<!--实体字符-->
<!--用来表示特殊符号-->
<!--&lt小于号  &gt大于号  &nbsp空格  &copy版权符号-->
<p>  &nbsp </p>
<p>  &copy </p>

10、相对路径：相对自身资源而言

绝对路径：从顶层开始一层一层查找

11、表格标签 <table> </table>

<!--表格-->
<!--table
    tr:一行
    td:一个单元格
    th:表头使用有加粗效果
    rowspan:合并行
    colspan:合并列
-->
<table border="1px" cellpadding="0" cellspacing="0" width="400px" style="text-align: center">
    <tr>
        <th>姓名</th>
        <th>属性</th>
        <th>级别</th>
        <th>忍村</th>
    </tr>

    <tr>
        <th>漩涡鸣人</th>
        <th>风</th>
        <th>下忍</th>
        <th>木叶</th>
    </tr>

    <tr>
        <th>宇智波佐助</th>
        <th>雷&火</th>
        <th>下忍</th>
        <th>下忍</th>
    </tr>

    <tr>
        <th>我爱罗</th>
        <th>雷&火</th>
        <th>影</th>
        <th>砂隐村</th>
    </tr>
</table>
<!--合并-->
<table border="1px" cellpadding="0" cellspacing="0" width="400px" style="text-align: center">
    <tr>
        <th>姓名</th>
        <th>属性</th>
        <th>级别</th>
        <th>忍村</th>
    </tr>

    <tr>
        <th>漩涡鸣人</th>
        <th>风</th>
        <th>木叶</th>
    </tr>

    <tr>
        <th>宇智波佐助</th>
        <th rowspan="2">雷&火</th>
        <th colspan="2">下忍</th>
        <th>下忍</th>
    </tr>

    <tr>
        <th>我爱罗</th>
        <th>影</th>
        <th>砂隐村</th>
    </tr>
</table>

12、表单标签 <form> </form>

<!--表单标签-->
<!--
    action  客户端数据提交的地址
    method  请求方式   get可以看到的 不安全的/post 看不到的 安全的
    当数据传输时，数据会以键值对的形式传到服务器  name键 value键
    checked 默认选择
-->

(1)单行文本框 <input type="text">

(2)密码框 <input type="password">

(3)单选框 <input type="radio">

(4)多选框 <input type="checkbox" >

(5)隐藏域 <input tyhidden">

<form action="HTML.html" medthod="post">
    <!--placeholder  进行默认提示-->
    <span>用户名</span> <input type="text"  name="username"  placeholder="请您输入名字">   <br>
    <span>密码</span>  <input type="password" name="pwd"> <br>
<!--单选框-->
    <span>你最喜欢的季节是:</span>
    <input type="radio" name="season" value="spring" />春天
    <input type="radio" name="season" value="summer" checked="checked" />夏天
    <input type="radio" name="season" value="autumn" />秋天
    <input type="radio" name="season" value="winter" />冬天
<!--多选框    -->
    <span>你最喜欢的球队是：</span>
    <input type="checkbox" name="team" value="Brazil"/>巴西
    <input type="checkbox" name="team" value="German" checked="checked"/>德国
    <input type="checkbox" name="team" value="France"/>法国
    <input type="checkbox" name="team" value="China" checked="checked"/>中国
    <input type="checkbox" name="team" value="Italian"/>意大利
</form>>

13、下拉列表 <select> </select> <option></option>

<!--下拉列表 select-->
    <select name="city">
        <option value="1">北京</option>
        <option value="2">深圳</option>
        <option value="3">上海</option>
        <option value="4">杭州</option>
    </select>
    <br>
<!--多行文本框-->
    <span>你的感受是</span> <textarea name="t" ></textarea>
    <br>
<!--隐藏域-->
    <input type="hidden"  name="update">
    <br>
    <input type="submit">

サUBLL� 尔~

关注

1
点赞
踩
2

收藏

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

HYML : Hyper Test Markup Language 超文本标记语言作用：搭建网页结构，在网页上展示内容<!DOCTYPE html> <body lang="en"> <head>  <meta charset="UTF-8"> ...
复制链接

扫一扫