前端学习日记

最新推荐文章于 2022-06-20 08:14:57 发布

LRLcute

最新推荐文章于 2022-06-20 08:14:57 发布

阅读量196

点赞数 1

分类专栏：前端文章标签： html5

本文链接：https://blog.csdn.net/LRLcute/article/details/119650829

版权

前端专栏收录该内容

9 篇文章 1 订阅

订阅专栏

本文是关于HTML5的前端学习日记，介绍了HTML的基本概念、标签、元素、属性、注释，以及块级元素、行内元素和功能标签的特性与用途，包括超链接、图片、表格、表单等常见功能元素的用法。

摘要由CSDN通过智能技术生成

html5
前端三要素：
js 动化（能说会道会交流）
css 美化（妆容）
html 结构（身材）

1.html是超文本标记语言
也是解释型标签语言

超文本:
超级文本：字符，超级链接，图片，音频，视频，画布（地图、图表、3D模型）

标记：
标签进行标记， html标签（无法使用自定义标签）
<h1>标题1</h1>
<p>段落</p>

语言：
c、java 编译型语言，
hello.c --gcc--> hello.o --运行-->linux
Hello.java --javac--> Hello.class --运行--> jvm --> linux/win
html、js、css 解释型语言
hello.html --> 浏览器 -> linux/win

2.（1）标签（不区分大小写）

单标签

<br/>

双标签

（2）元素（标签 + 内容））

 <h1>这是一个一级标题</h1>
    <div>
      <div id="one" class="logo">logo</div>
      <div class="menu">menu</div>
    </div>

（3）属性（位于开始标签中）

核心属性（通用，绝大多数标签都具有的属性）
id 唯一标识
class 分类，可以重复
title 悬浮提示
style 添加css规则的
自有属性

 <img src="" alt=""></img>
      <a href="https://www.baidu.com" target="_blank">百度一下，你就知道</a>

（4）注释

不会被浏览器解释，注释是用来描述代码含义。

3.块标签（块元素）

特点：
1) 独占一行空间（100%）
2) 高度默认为0，高度由内容决定
3) 可以指定宽、高
4) 用来搭建页面框架
元素：
h4：div、body、p、ul>li、ol>li、dl>dt、dd、h1~h6
h5：header、footer、nav、section、article、aside、address... 语义化标签
简单大方、无招胜有招

4.行内标签（行内元素）

特点：
1) 行内与其他行内元素共享一行空间
2) 宽高都由内容决定
3) 无法指定宽、高
4) 用来填充，行内元素需要嵌套在块元素中，但是块元素不能嵌套在行内元素中。
元素：
span、a、img
装饰类型标签：strong b em i sub sup ...

功能标签：
a
超级链接
href="" 跳转
url 跳转到一个外网地址中
相对路径：相对于当前代码所在文件的路径
. 当前目录下
.. 当前目录下的上一级目录
绝对路径：相对于基准点
linux操作系统中
/ 操作系统根目录也就是 /

/var/www/html apache2部署目录
index.html / 代表apache的根部署目录即 /var/www/html

锚点
1. 定义锚点 <div id="top">顶部</div>
2. 跳转 <a href="#top">跳转顶部</a>
其他
target="" 目标
_self 默认值，当前页面
_blank 新页面
img
src 图片地址
1. 网络资源
2. 相对路径
3. 绝对路径
4. base64格式值
alt 图片找不到时候的文本替换

5.功能标签（功能元素）

1) table 表
tbody 表格体 thead、tfoot
tr 行
td、th 列（容器）
子标签可以为任意其他标签
行中的列数在经过计算后应该是相同的
2) form
用来进行前后台数据交互（默认情况下，同步交互：JavaEE(jsp)、nodejs(模板)）
ajax 异步交互
前置技术： http协议

form( action 后端处理接口，enctype 表示编码方式，method请求方法)
method取值
get 用于查询操作，参数携带在url后面
post 用于更新【保存、修改、删除】操作，参数携带在请求报文请求体中
enctype取值：
application/x-www-form-urlencoded
查询字符串（表单编码）将特殊字符转换为16进制 key=val&key=val&...
schoolName=太原理工大学&userName=陈明
multipart/form-data
用于表单中有附件提交的时候，二进制，无需进行编码
text/plain
纯文本提交

1) input 输入框
注意：input(text、password、radio、checkbox)必须添加name属性，(radio、checkbox)必须添加value属性
<input type="text" /> 单行文本框
<input type="password" /> 密码
<input type="radio" /> 单选按钮
<input type="checkbox" /> 复选按钮
<input type="file"/> 附件
<input type="submit" /> 提交按钮
<input type="reset" /> 重置按钮

<input type="date" /> 日期选择器（h5新增，兼容性差，一般不用）
...
2) textarea 多行文本
<textarea name="description" cols="50" rows="4"></textarea>
3) select 下拉菜单
<select name="address">
<option value="js">江苏</option>
<option value="sx">山西</option>
<option value="hn">河南</option>
</select>
iframe
<iframe width="100%" height="300" frameborder="0" scrolling="no" hspace="0" src="https://i.tianqi.com/?c=code&a=getcode&id=55&icon=1"></iframe>