学习HTML5

阿--胜

于 2023-04-14 15:56:26 发布

阅读量140

点赞数

分类专栏：前端 HTML CSS JS 文章标签：学习 html5 html

本文链接：https://blog.csdn.net/2301_77337600/article/details/130155764

版权

前端 HTML CSS JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

初学HTML5

大部分内容来自百战程序员中我做了整合

1.开发者工具VScode 常用快捷键

shift+alt+f 代码格式化
alt+up/down 快速移动一行代码
shift+alt+up/down 快速复制一行代码
Ctrl+f 快速查找 Ctrl+H 快速替换
！+Enter 快速生成HTML代码

2.HTML简介和基本骨架

常用的格式先DOCTYPE html 然后 head body .

<!DOCTYPE html><!--HTML5 避免浏览器怪异问题-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title><!--网页的标题 就是网页的名字-->
</head>
<body>
    
</body>
</html>

3.标签

1.标题标签

<h1>一级标题</h1>
<h2></h2>
<h3></h3>

.....
最多拥有6个标签

2.段落标签

<p>
  这是一个段落 
</p>

3.hr 水平线标签

<hr color="" width="" size="" align=""/>

color 颜色
width 宽度
size 大小
align 对齐方式默认居中

4.br 换行标签

<p>
   <br>
  这是一个段落 
   <br>
   换行
</p>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DU2pIG5o-1681458834473)(C:\Users\我是你爹\AppData\Roaming\Typora\typora-user-images\image-20230410194345028.png)]

5 img 图片标签

<img src="" alt="" title="" width="" height="">

src 图片的路径
width 宽度
height 高度
title 鼠标选品图片给予提示
alt 规定图像的替代文本当图片路径找不到或者出现问题

图片中关于相对路径和绝对路径

绝对路径

E:\itbaizhanCode\1.jpg

相对路径

子集关系 /
父级关系 …/
同级关系 ./ （通常可以省略）

6 超文本链接

<a href="url">链接文本</a>

7 文本标签

标签	描述
`<em>`	定义着重文字
`<b>`	定义粗体文本
`<i>`	定义斜体字
`<strong>`	定义加重语气
`<del>`	定义删除字
`<span>`	元素没有特定的含义

8 有序列表

<ol>
   <li>   </li>
   <li>   </li>
</ol>

并且有序列表可以嵌套

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2Xfe0ALF-1681458834474)(C:\Users\我是你爹\AppData\Roaming\Typora\typora-user-images\image-20230414152939992.png)]

9 无序列表

<ul>
    <li>呜呜呜呜</li>
    <li>凄凄切切</li>
</ul>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k1igWAMX-1681458834474)(C:\Users\我是你爹\AppData\Roaming\Typora\typora-user-images\image-20230414153015873.png)]

无序列表常用与导航

10 标签表格

table 表格 tr行 td列

<table>
    <tr>
        <td>问问</td>
        <td>二七区</td>
    </tr>
    <tr>
        <td>是是是</td>
        <td>嗯嗯嗯</td>
    </tr>
</table>

表格单元合并

水平合并： colspan
垂直合并： rospan

<table border="1px" >
    <tr>
        <td colspan="2">呜呜呜呜</td>
       
        <td rowspan="2">呜呜呜</td>
    </tr>
    <tr>
        <td>嗯嗯嗯</td>
        <td>问问</td>
        
    </tr>
</table>

每次合并的时候要把另外一个td给删除掉

11 Form 表单

      <!--type=date 时间
		type=text属性 纯文本
		type=password 密码
		-->
		<!-- &nbsp; 代表空格 -->
		<!-- type=file 文件上传
		 radio:单选
		button/submit/reset 按钮
		checkbox 复选框
		下拉框 select
		文本框  textavea
		提示语 	placeholder
		 -->
		 <!-- 每个input都有一个value
		  里面存放着用户输入的内荣-->
<center>
     <form>
        <p>
			<textarea name="" id="" cols="30" rows="10">请输入留言</textarea>
		</p>
	   <p><input type="datetime-local"/></p>
	   <p>时&nbsp;间;<input type="date"/></p>
	   <p>用户名;<input type="text" placeholder="请输入3-12位用户名"/></p>
	   <p>密&nbsp;码;<input type="password"/></p>
	   <p>照片<input type="file"/></p>
	   <p>性别 <input type="radio" name="a">男 <input type="radio" name="a"/>女</p>
	   <p> <input type="button" value="登陆"></p>
	   <p><input type="datetime-local"/></p>
	   <p>爱好<input type="checkbox" 足球>
	   <input type="checkbox" >篮球
	   <input type="checkbox" uuue>
	   <input type="checkbox" >足球
	   </p>
	   <p>
		   职业：
		   <select name="" id="">
			   <option selected="java"> java</option>
			   <option> c</option>
			   <option> c++</option>
		   </select>
	   </p>
   </form>
		
	   </center>

表格元素汇总

使用在input中 type类型如下

<form>
    First name: <input type="text" name="firstname">
    <br>
    Last name: <input type="text" name="lastname">
</form>

文本框 text
密码框 password
提交按钮 submit
按钮 button
下拉框 select
提示语 placeholder
checkbook 复选框
radio 单选

12 块元素与行内元素（内联元素）

块级元素	内联元素
块元素会在页面中独占一行（自上向下垂直排列）	行内元素不会独占页面中的一行，只占自身的大小
可以设置width，height属性	行内元素设置width，height属性无效
⼀般块级元素可以包含行内元素和其他块级元素	⼀般内联元素包含内联元素不包含块级元素

常见块级元素