html学习笔记

努力码到100k

已于 2023-09-11 19:20:47 修改

阅读量40

点赞数

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

于 2023-09-11 19:11:24 首次发布

本文链接：https://blog.csdn.net/m0_63736943/article/details/132815114

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.什么是HTML？

是一种超文本标记语言，不是编程语言，用来告诉浏览器如何构造网页

一条html语句

html结构

标签分类
- 单标签：<标签名/>
- 双标签：<标签名></标签名>
- 带属性的标签：<a 属性名 = " 属性值 " > a代表标签类型为链接
标签元素
- class：为html元素定义一个或多个类名(类名从样式文件引入)
- id：定义元素的唯一id，通过id可精准定位网页元素
- style：规定元素的行内样式
- title：描述了元素的额外信息 (作为工具条使用)
注释
-
基本网页骨架标签
- 主要代码块写在body部分，head也可携带信息
- 编码方式为UTF-8 或 GBK 支持中文编码

<!DOCTYPE html>
<html>
<head>
    <meta charset = "UTF-8">        <!--编码方式-->
    <title>页面的标题</title>
</head>
<body>
        代码块
</body>
</html>

2.常用标签

⭐下列演示代码，除第一个示例外，其余放在body里面实现！！！

标题标签：<h1>标题内容<h6>
- h1到h6从大到小
- 网页实例演示：(此实例为完整版，之后演示仅仅写Body部分)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试网页</title>
</head>
<body>
 
<h1>h1的大小</h1>
<h2>h2的大小</h2>
 
 
</body>
</html>

段落标签：<p>段落内容</p>
- 特点：使用即可自成一行
链接标签： <a href="url">链接名</a>

<a href="https://www.baidu.com">百度的链接</a>

图片标签：<img src="url" />

<img src="url" width="xxx" height="xxx" />

水平线标签：<hr/>

<p>下面是水平线<hr>上面是水平线<p/>

换行标签：<br>或者<br/>都行

<p>人生<br>若只如初见<br>何事秋风悲画扇<p/>

3.HTML头部

⭐下列代码要放在head里面！！！

base元素
- 表示默认链接
- target="_blank"在新窗口打开

<head><base href="http://www.baidu.com" target="_blank"></head>

link元素

<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>

style元素
- 定义了HTML文档的样式文件引用地址

<style type="url">
<！--假如为同级文件夹下的decorate的CSS文件，则可写为：<style type="decorate/css">-->

<meta>元素

<meta id="author" content="羽十八">    <!--定义网页作者-->
<meta http-equiv="refresh" content="60">    <!--每60秒钟刷新当前页面-->

<script> 元素
- 插入js脚本

<script src="url"></script>

4.HTML图像

alt属性
- 为图像定义预备的可替换的文本
- 下列语法执行后，若图片没有加载出来，则显示alt内定义的文字

<img src="man.jpg" alt="there is a man">

<area>
- 定义图像中的可点击的区域

5.HTML列表

从上往下的列表
有序列表(带编号)：ol

<ol>
<li>奥力给</li>
<li>奥利奥</li>
</ol>

无序列表(带·)：ul

<ul>
<li>奥力给</li>
<li>奥利奥</li>
</ul>

自定义列表：dl为标志，列表项dt开始，dd结束

<dl>
<dt>奥力给</dt>
<dd>..........奥利奥</dd>
<dt>奥特曼</dt>
<dd>..........奥利奥</dd>
</dl>

6.HTML分块

div
- 文本外分块，常做页面布局
span
- 文本内分块，常做句子局部高亮作用

7.HTML表单

表单
- <form>input 元素</form>
文本域
- <input type="text">

<form>
生日: <input type="text"><br>
年龄: <input type="text" >
</form>

密码文本域
- 不会以明文显示

单选按钮：<input type="radio">

<form>
<input type="radio" >China<br>
<input type="radio" >UK
</form>

复选按钮：<input type="checkbox">

<form>
<input type="checkbox"">China<br>
<input type="checkbox">UK
</form>

提交按钮：<input type="submit">

<form >
心情: <input type="text">
<input type="submit" >
</form>

8.p标签与span标签的区别

<!--p标签-->
<!-- 在html中有块级元素与行内元素两种
    块级元素独占一行,有宽又高
    行内元素排成一行,内容多少,它多大
-->
    <p>这是第一个p标签</p>
    <p>这是第二个p标签</p>
    
<!--span标签-->
<span>这是第一个span</span>
<span>这是第二个span</span>

每个p标签占了一行