HTML5学习第一节

最新推荐文章于 2024-06-18 14:38:23 发布

m0_74110356

最新推荐文章于 2024-06-18 14:38:23 发布

阅读量130

点赞数

文章标签： html5 学习前端

本文链接：https://blog.csdn.net/m0_74110356/article/details/128465315

版权

HTML5学习第一节

一、网页
二、web标准
三、基本语法
四、文档声明和字符编码
五、HTML常用标签
六、hr
七、特殊符号
八、div和span标签
九、有序列表
十、无序列表
十一、自定义列表
十二、图片标签的路径
十三、图片标签的属性
十四、超链接标签
十五、table表格
十六、tr td 属性
十七、表格合并
十八、表单标签
- 十九、css样式表

一、网页

通过浏览器访问阅读
文件 .html
HTML描述网页的一种语言（标记语言），即超文本标记语言，一套标记语言。

二、web标准

W3C 万维网联盟

在这里插入图片描述

三、基本语法

在这里插入图片描述

四、文档声明和字符编码

在这里插入图片描述

五、HTML常用标签

在这里插入图片描述

<strong>文本1</strong>
    <b>文本2</b>
    <em>文本3</em>
    <i>文本4</i>

在这里插入图片描述

六、hr

在这里插入图片描述

<hr color="green">
    <hr color="yellow">
    <hr color="red">

    <hr color="blue" width="600" align="left">
    <hr noshade>

七、特殊符号

在这里插入图片描述

<p>&nbsp;&nbsp; 文本 </p>
   <p>文本</p>

八、div和span标签

div标签，没有具体含义，用来划分页面区域，独占一行。

 <div>文本</div>
  <div>段落</div>
  <div>块</div>

span标签，没有实际意义，主要应用在对于文本独立修饰的时候，内容有多宽就占用多宽的空间距离。

<p>文本<span style="color: blue;">独立</span></p>

九、有序列表

在这里插入图片描述
注：1.li 里面可以随意放标签，但ol 里面只能放 li
2.数字是自动生成的
3.type：1，a，A，i，I
4.start：取值只能是一个数字

  <ol type="1" start="3">
    <li>111</li>
    <li>222</li>
    <li>333</li>

十、无序列表

注：1.ul 里只能放li ，li 里面可以放其他标签
2.默认是黑色实心圆
3.type，disc ，circle， square， none

       <ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
 </ul>

十一、自定义列表

在这里插入图片描述

<dl>
   <dt>图片</dt>
   <dd>文字</dd> 
</dl>
<dl>
    <dt>图片</dt>
    <dd>文字</dd> 
 </dl>
 <dl>
    <dt>图片</dt>
    <dd>文字</dd> 
 </dl>

十二、图片标签的路径

在这里插入图片描述

<img src="./散兵.png" >
<img src="D:\img\游戏\原神.jpg">
<img src="img/散兵.png">
<img src="../HTML5/img/散兵.png">

十三、图片标签的属性

在这里插入图片描述

<img src="./散兵.png" alt="请刷新界面" title="原神" >
<img src="./img/散兵.png" width="200px" height="200px">
<img src="./img/散兵.png" width="200px">

十四、超链接标签

在这里插入图片描述

<a href="https://www.baidu.com">百度</a>
<a href="https://www.baidu.com" target="_blank">百度</a>
<a href="https://www.baidu.com">
    <img src="img/散兵.png" alt="">
</a>

十五、table表格

在这里插入图片描述

<table border="1" bordercolor="blue" width="500px"height="300px" align="center"bgcolor="gray"cellspacing="0"
cellpadding="20px">
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

在这里插入图片描述

十六、tr td 属性

在这里插入图片描述

<table border="1" width="500px"height="300px" bgcolor="gray" >
    <tr bgcolor="yellow"height="100px"align="center"valign="bottom">
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

在这里插入图片描述
注：td 如果一个单元格设置宽度，影响的是这一整列的宽度，设置高度，影响的是这一整行的高度。

十七、表格合并

在这里插入图片描述

十八、表单标签

在这里插入图片描述

<form action="https://www.baidu.com"method="post">
    用户信息：<input type="text" placeholder="请输入你的用户名"name="username">
    密码：<input type="text" placeholder="请输入你的密码"name="mima">
    <br>
    <button type="submit">登录</button>

</form>

十九、css样式表

在这里插入图片描述

<style>
    h1{color: red;}
   </style>
   <h1>123</h1>

在这里插入图片描述

<style>
        div{width: 100px;height: 100px;background-color: blue}
    </style>
</head>
<body>
    <!-- <div style="width: 100px;height: 100px;background-color: blue;">内联样式</div>
    <div style="width: 100px;height: 100px;background-color: blue"> 内联样式</div> -->

   <div>内部样式</div>
   <div>内部样式</div>

    <!-- <style>
    div{color: red;}
    </style>
    <link rel="stylesheet" href="./bass.css"> -->
    <style>
   /*  #elem{color: blue;} */
    /* .box{color: red;} */
    div{color: blue;}
    div,p{color:red;}
    </style>
</head>
<body>
    <div class="box">块</div>
    <p>段落</p>
</body>