Html学习笔记

苦逼的猿宝

于 2023-02-18 16:30:05 发布

阅读量292

点赞数 1

分类专栏： html+css 文章标签： html 学习 html5 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/GAGGAAAAA/article/details/129101534

版权

html+css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Html

一.文字标签

h1-h6标签是标题标签,从大到小

<h1>这是一个h1标题</h1>

p标签是段落标签,

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

b和strong标签是加粗的作用

<b>这是一个加粗标签</b>
<strong> 这是一个加粗标签</strong>
区别:b是仅仅的加粗无强调含义,strong也有加粗的作用,但是有强调的含义

hr标签是水平线

<hr>
hr是单标签,设置一个水平线

i和em标签倾斜标签

<i>这是一个倾斜标签</i>
<em>这是一个倾斜标签 </em>
区别:相同点:i和em都有着倾斜的意思,在视觉上都会有倾斜的效果,
	不同点:em有强调的作用,i只是仅仅的倾斜

sub和sup标签下角标和上角标标签

H<sub>2</sub>O
10<sup>2</sup>

del和s标签是删除线标签

<del>这是一个删除线标签</del>
<s>这是一个删除线标签</s>
区别:相同点:在视觉上都有着删除线的效果,没有区别
	不同点:del的语义化更强

br标签是换行的作用

<br>   在任意一个地方添加<br>,可以实现换行的作用

u标签是下划线

<u> 这是下划线标签</u>

二.有序列表无序列表自定义列表

1.无序列表格式:
<ul type="square">   
    <!-- “circle空心圆/disc实心圆/square方形/none表示无” -->
    <li> </li>
    <li> </li>
    <li> </li>
    <li> </li>
</ul>
2.有序列表格式:
<ol type=" " start=" ">
    <!-- type="A/a/I/1"  表示类型-->  <!-- start="  "  表示开始的顺序 填写的是数字-->
    <li> </li>
    <li> </li>
    <li> </li>
    <li> </li>
</ol>
3.自定义列表格式:
 <dl>
    <dt>可以是文字也可以是图片</dt>
    <dd>是相关文字</dd>
    <dd>是相关文字</dd>
 </dl>

三.图片路径

<img src="这里放的是图片的路径" alt="这个地方可以放置文字,当图片加载不出来时,可以当做备注" title="当鼠标悬停时,会显示文本提示" width="" height="">
src="这里放的是图片的路径"
alt="这个地方可以放置文字,当图片加载不出来时,可以当做备注"
title="当鼠标悬停时,会显示文本提示"
width=" 设置图片的宽度"
height="设置图片的高度"

四.超链接标签

<a href="要跳转的地方,可以是文件也可以是图片" target="_blank 代表在新的页面打开/_self 表示在当前页面打开">文字,图片均可</a>
href="要跳转的地方,可以是文件也可以是图片"
target="_blank 代表在新的页面打开"
target="_self 表示在当前页面打开" self是默认值"
基本格式:<a>文字</a>

五.容器标签div

<div> </div>
<span> </span>
<div>没有具体含义，用来划分页面的区域
<span>没有具体含义,当与 CSS 一同使用时，元素可用于为部分文本设置样式属性

六.html中的特殊符号

&it 是小于号或者显示标记 <

&gt 是大于号或者显示标记 >

amp 显示其他特殊字符 &

&quot 引号

&reg 已注册

&copy 版权

&trade 商标

&nbsp 不断行的空白

七.表单

<form method="get或者post" action="向何处发送表单数据">
    get和post的区别:
    1.单词意思上,get是获取,post是传送数据
    2.get在传送过程中,用户可以在地址栏上看到传送过程,post是看不到的
    3.get安全性较低,post的安全性比较高
  <input type="sumbit"><!-- 提交按钮 -->
  <button></button> <!-- 提交按钮 -->
  <input type="button"> <!-- 普通按钮 -->
  <input type="reset"> <!-- 重置按钮 -->
  <input type="text"> <!-- 文本框 -->
  <input type="password"> <!-- 密码框 -->
  <input type="text" placeholder="简短的提示框信息" name="必须填写否则,用户在其输入的信息不会发送给服务器" value="可以设置按钮的值">
</form>
   设置样式 给input添加outline:none ;可以去除type="text"点击时的黑色边框

1.表单相关的标签

个数	标签和属性	说明
1	<fieldset> </fieldset>	fieldset表单字段集，相当于一个方框，fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象
2	<legend> </legend>	字段级标题
3	<label for="box"> </label>	label 提示信息标签 for="绑定控件id名"
4	<input type="file"/>	上传文件框 multiple="multiple" multiple属性可实现多选
5	<input type="hidden"/>	隐藏字段对于用户来说通常是不可见的，通常会存储一个默认值，通过js来修改
6	<input type="radio" name="sex"/>	type="radio"单选按钮单选按钮里的name属性必须写，同一组单选按钮的name属性值必须一样。
7	<input type="checkbox" name="like" disabled="disabled" checked="checked"/>	type="checkbox" 多选按钮 name可加可不加 checked="checked"(选中) disabled="disabled"禁用
8	<select> <option>北京</option> <option>上海</option></select>	下拉菜单
9	<textarea cols="40" rows="5">文本域</textarea>	文本域 cols="字符宽度" rows="行数" resize="none"

2.type新增加的属性值

3.表单新增加的属性

4.新增加的表单标签

八.音频标签

  <audio src="路径" controls autoplay loop>哈哈哈</audio>
  controls是显示播放音频的控件
  autoplay的作用是浏览器加载完毕后会自动播放音频
  loop当音频结束时会自动重新开始播放
  <!-- !上方的哈哈哈 位置,当浏览器版本太低时,会执行其中的文字 -->

  <video src="路径" controls autoplay loop muted>哈哈哈</video>
  controls是显示播放音频的控件
  autoplay的作用是浏览器加载完毕后会自动播放音频
  loop当音频结束时会自动重新开始播放
  muted添加该属性,视频会静音,并且开始自动播放
  <!-- !上方的哈哈哈 位置,当浏览器版本太低时,会执行其中的文字 -->

九.表格的相关属性

 <table border="1" width="1" height="1">
    <caption>学生成绩单</caption>
    <tr>
      <th>姓名</th>
      <th>成绩</th>
      <th>评语</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>100</td>
      <td>优秀</td>
    </tr>
  </table>
  <!-- border是设置边框的宽度   width是设置表格的宽度 height是设置表格的高度 -->
  <!-- caption是表格的表题 -->
  <!-- th只能适用于表头单元格 标签可以使文字水平居中对齐,并且加粗 -->

  表格的基本格式
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>成绩</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>100</td>
      </tr>
    </tbody>
    <tfoot>  <!-- 很少见 -->
      <tr>
        <td>张三</td>
        <td>100</td>
      </tr>
    </tfoot>
  </table>

   <!-- rowspan跨行合并   上下合并,只保留最上面的,删除其他的
   colspan跨列合并   左右合并,只保留最左边的,删除其他的 -->

HTML5新增标签

个数	含义	语法书写
1	头部**	<header></header>
2	尾部	<footer></footer>
3	导航	<nav></nav>
4	媒体文件引入	<embed src=""></embed>
5	内容块	<section></section>
6	辅助信息	<aside></aside>
7	文章	<article></article>

媒体音频标签

一.视频标签(video)

1.video视频文件的书写方式

2.video视频文件的支持格式

二.Audio音频标签

移动端书写:

在移动端书写之前,需要在html的头部添加下面的代码,解决理想视口的问题.
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />