HTML学习笔记

最新推荐文章于 2024-10-04 06:11:34 发布

Franke_Max

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量806

点赞数 25

文章标签： html 学习笔记

本文链接：https://blog.csdn.net/2301_77892587/article/details/142686631

版权

HTML

前端：网页的一部分用户看到和与之交互的内容。

网页：在浏览器中显示的页面，文字……

html定义页面的结构和内容

css定义页面的样式和布局

javascripts：添加功能性

文章目录

HTML

1.标签

双标签：有开始和结束标签，用于有内容的元素

单标签：只有开始标签，用于没有内容的元素渡一教育全阶班值得买吗

2.文档结构

<!--这里用于说明这是一个html文件-->
<! DOCTYPE html> 
<!-- html文档的起始点，包裹所有的html元素-->
<html>
    <!--html的头部，包含文档一些配置信息-->
    <head>
        <tilte>文档标题<\title><!-- 文档标题>
        <meta charset="UTF-8">

    </head>
    <!--显示在浏览器上的内容-->
    <body>

    </body>
</html>

文本标签

1. 标题标签<h></h>

2. 段落标签<p></p>

3. 加粗：<b></b>，<strong></strong>

4. 斜体：<i></i>

5. 下划线：<u></u>

6. 删除线：<s></s>

7. 无序列表：

<ul>
    <li>   </li>

</ul>

8. 有序列表：将无序列表的<ul>改为<ol>

9. 表格

<table border="1">
    <tr>
        <th>列标题1</th>
        <th>列标题2</th>
    </tr>
    <tr>
        <td>element1</td>
        <td>element2</td>
    </tr>
</table>

10. 长文本的引用：<blockquote cite="URL">

11. 强调：<em>标签

属性

<开始标签属性名 = "属性值">

属性名称不区分大小写，属性值区分大小写。

1. 适用于大多数标签的属性

属性	描述
`class`	为html元素定义一个或者多个类名（类名从样式表导入）
`id`	定义元素的唯一ID
`style`	规定元素的行内样式

其他标签

1. 链接标签：<a></a>

href属性：定义链接地址。使用#可以实现锚点链接¹。

target属性：定义链接打开方式。`_self,_blank,_top,_parent

download属性：链接用于下载文件而不是导航到另一个网页

2. 换行标签：<br>

3. 水平分割线：<hr>

4. 图片标签：<img>

src属性：图片来源

alt属性：当图片不显示时，显示的替代文字

宽高属性：width hight

5. 代码：使用<code>标签

在<code>中使用>,<时要使用&gt,&lt

6. 与格式化的文本，保留所有输入，输入与显示完全相同

区块

有的标签不能和其他元素同在一行，有的可以

块元素

块级元素通常用于组织和布局页面结构和内容，例如段落、标题、列表等

特点

块级元素通常会从新行开始，并占据整行宽度，在页面上呈现为一块独立的内容块

可以包含其他块级元素和行内元素

常见的块级元素包括 <div>, <p>, <h1>到 <h6>, <ul>, <ol>, <li>…

1. <div>标签

块级标签，没有语义，创建包含其他html元素的容器，创建网页的布局结构

<body>
    <!-- 导航栏-->
    <div class="nav">
        <a href="...">
    </div>
    <!--网页内容区-->
    <div class="content">
        <h1>文章标题</h1>
        <p>文章内容</p>
    </div>
    </body>

2. <span>标签

相当于没有特殊元素的<img>标签，把一小部分文本包括起来用来对这部分文本使用css样式表或者js行为。

<span>这是一个标签<a href=".."></a></span>

表单

1. form标签：用于容纳表单元素

2. input标签：

属性

type属性：要显示的input元素类型，密码有专门的属性

palceholder属性：显示在文本框中的内容，用于给用户提示

value属性：规定input元素的值

<form>
    <label>用户名：</label>
    <!--作用与<sapn>类似，但是只能和<input>标签连续使用-->

    <input type="text" ppalceholder=".."><br><br>
    <!--输入文本-->
    <label>密码：</label>

    <!--单选,必须加name属性，且同一问题的选项name的值相同-->
    <label>性别</label>
    <input type="radio" name="gender">男
    <input type="radio" name="gender">女
    <input type="radio" name="gender">其他

    <!--label标签的for属性,与input的id属性关联-->

    <!--多选-->
     <input type="checkbox" name="hobby">其他

    <!--提交,将表单填写的数据提交到一个位置，位置由form标签的action属性规定-->
    <input type="submit">