html学习笔记

癫狂的兔子

已于 2024-10-07 21:23:42 修改

阅读量245

点赞数 8

分类专栏：学习笔记文章标签： html 学习笔记

于 2024-10-07 19:04:50 首次发布

本文链接：https://blog.csdn.net/qq_45800521/article/details/142744556

版权

学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

html学习笔记

模板
基本标签
语义化标签
媒体标签
- 音频媒体标签属性（audio）
- 视频媒体标签属性（video）

模板

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
       /* 填写样式 */
    </style>
</head>

<body>
    <!-- 补全html代码 -->
    
    <script type="text/javascript">
        // 填写JavaScript
        
    </script>
</body>

</html>

基本标签

表单类型（form）

form标签用来创建表单，用于向服务器传递数据
- action属性接收传递表单数据的地址，默认为当前url地址；
- method属性接收提交表单数据的方式：get/post，默认post
  - get方式：会在url显示参数，获取数据：request.GET.get(“name值”)
  - post方式：不会在url中显示数据，获取数据：request.POST.get(“name值”)
checkbox复选框
- checked属性表示选中
- name属性在交互数据的时候使用
- type属性定义复选框的类型
- value属性代表表单框里面的默认值

<form action="#" method="get">
	input输入框
	文本域：
	<input type="text"></input>
	密码：
	<input type="password"></input>
	单选按钮：
	<input type="radio"></input>
	复选框：
	<!-- checked属性代表表单处于被选中状态 -->
	<input type="checkbox" checked></input>
	提交按钮：
	<input type="submit"></input>
</form>

表格结构（table）

caption：标题标签
tr：行标签
td：列标签

<!-- 2行3列的表格 -->
<table>
     <caption>标题</caption>
     <tr>
         <td></td>
         <td></td>
         <td></td>
     </tr>
     <tr>
         <td></td>
         <td></td>
         <td></td>
     </tr>
 </table>

图像标签（img）

src：图片地址（本地地址或者http地址）。scource，是存放图片的url，是不可缺少的属性。
title：标题属性。显示文本，当鼠标停在图片上时，会显示标注的文本内容。
alt：代替文本属性。图片显示不了时，文本就会代替图片。

<img src="图片地址" title="标题属性" alt="代替文本属性"/>

超链接标签（a）

a是双标签

href：要跳转的url
target
- _self：默认值。在当前窗口跳转超链接。
- _blank：在新的页面打开超链接。
- _parent：在父框架集中打开超链接。
- _top：在整个窗口中打开超链接。
  参考链接：＜a＞标签target属性中的_top和_parent

<a href="https://baidu.com" target="_blank">打开新窗口</a>

列表标签

1. 有序列表

若ol格式错误，则默认是黑色圆圈，即无序列表；若tpye里面的格式错误，则默认序号是12345……
type属性可设置列表序号种类和初始值
有序列表可嵌套
快捷键：ol>li*3 + tab键

<!-- 序号为123 -->
<ol type="1">
	<li>苹果</li>
	<li>香蕉</li>
	<li>梨</li>
</ol>
<br>
<!-- 序号为ABC -->
<ol type="A">
	<li>苹果</li>
	<li>香蕉</li>
	<li>梨</li>
</ol>
<br>
<!-- 序号为小写罗马i ii iii，大写罗马序号也可 -->
<ol type="i">
	<li>苹果</li>
	<li>香蕉</li>
	<li>梨</li>
</ol>
<br>
<!--嵌套列表-->
<ol type="1">
	<li>水果
	    <ol type="A">
	      	<li>苹果</li>
	  		<li>香蕉</li>
	  		<li>梨</li>
	    </ol>
	</li>
	<li>蔬菜
		<ol type="a">
			<li>茄子</li>
			<li>黄瓜</li>
			<li>豆角</li>
		</ol>
	</li>
</ol>

2. 无序列表

type属性：
- disc：实心圆圈，默认值
- circle：空心圆
- square：小方块
- none：不显示
无序列表可嵌套
快捷键：ul>li*3 + tab键

<!-- 无type属性，则默认是实心黑色圆圈 disc-->
<ul type="disc">
    <li>苹果</li>
	<li>香蕉</li>
	<li>梨</li>
</ul>
<br>
<!--小方块-->
<ul type="square">
    <li>苹果</li>
	<li>香蕉</li>
	<li>梨</li>
</ul>
<br>
<!--空心圆-->
<ul type="circle">
    <li>苹果</li>
	<li>香蕉</li>
	<li>梨</li>
</ul>
<br>
<!--空，即无序号标志-->
<ul type="none">
    <li>苹果</li>
	<li>香蕉</li>
	<li>梨</li>
</ul>

3. 自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

<!--自定义列表以dl开始-->
<dl>
	<!--每个自定义列表项以dt开始-->
	<dt>Coffee</dt>
		<!--每个自定义列表项的定义/注释等的内容以dd开始-->
		<dd>- black hot drink</dd>
	<dt>Milk</dt>
		<dd>- white cold drink</dd>
</dl>

加粗文字

加粗文字有两种方案：
- 使用strong标签
- 使用b标签
两种方式不同所在：b标签只是加粗了文本，没有强调语义上的重要性。

<p>
	<strong>strong标签 加粗的文字</strong>
	strong标签 未加粗的文字
</p>
<p>
	<b>b标签 加粗的文字</b>
	b标签 未加粗的文字
</p>

语义化标签

header：头部标签，定义文章的头部信息
nav：导航标签，定义页面中的各种导航
article：表示文档，页面的内容
section：对文章内容进行分块
aside：定义当前页面或当前文章的附属信息
footer：定义脚注部分
abbr：定义缩写
dfn：定义术语元素
address：定义作者，相关人士或组织的联系
del：定义移除的内容
ins：定义添加的内容
pre：定义预格式化的文本
progress：进度条

<header>
	<nav>
		<!-- 导航内容 -->
		<a href="https://www.baidu.com">百度</a>
	    <a href="https://www.csdn.net/">CSDN</a>
	    <a href="html5_noscript.asp">Next</a>
	</nav>
</header>

<!-- abbr -->
<p>我在学习<abbr title="HyperText Markup Language">HTML</abbr>。</p>

<!-- dfn -->
<p>根据<dfn>CSS</dfn>（Cascading Style Sheets）的定义，它是一种样式表语言。</p>

媒体标签

音频媒体标签属性（audio）

< audio> 标签定义声音，比如音乐或其他音频流。若在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。
audio标签属性

<audio controls>
	<source src="audio.mp3" controls>
	<!-- 当浏览器不支持audio元素的时候，该元素里面的文本会显示出来 -->
	抱歉，音频加载失败。
</audio>

视频媒体标签属性（video）

video 标签定义视频，比如电影片段或其他视频流。若在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。
video标签属性：

video标签支持的html事件属性：

<!-- 当视频的媒体数据加载期间发生错误时，执行myFunction方法事件 -->
<video src="movie.ogg" onerror="myFunction()" controls>
	<!-- 当浏览器不支持video元素的时候，该元素里面的文本会显示出来 -->
	抱歉，视频加载失败。
</video>