html入门

Html(Hyper Text Markup Language)

1.超文本标记语言:超过文字的传达方式、超链接

网站由一系列网页组成,网页由H5标签组成内容的集合,通过浏览器打开。

由图片、文字、链接、视频、音频等组成。

2.web标准

结构:html,对元素进行整理分类

表现:css,网页元素的版式,颜色,大小

行为:js,交互

3.语法规范

3.1标签常成对出现,单标签非常少

3.2标签关系

包含,并列

image-20220111163320704

3.3标签结构

image-20220111163610449

3.4开发工具VS-code

输入!,回车得到默认html模板

语言:英文:lang=”en“,中文:lang=”zh-CN“

3.5常用标签

h标签:标题标签,h1-h5,

分割线标签hr

p标签:段落标签,分段落时使用,段落间由较大行间距,自动换行,

换行标签break:

image-20220111173534524

粗体、斜体、下划线

image-20220111173716985

div与span标签,相当于一个盒子,用来布局网页

一个div独占一行

多个span为一行,中间有一定跨度。

图像标签:必须用src属性指定路径

image-20220111175420199

超链接标签:跳转到另一个页面

a(anchor)标签:必须写hrfe属性指定链接,另一个属性target指定在当前页面打(_self)开还是在另一个页面打开(__blank),默认_self

链接分类:外部链接,百度,京东等

内部链接:网站内部网页相互链接,用页面之间的路径即可。

空连接:hrfe属性用#代替即可

下载链接:hrfe中为文件或压缩包会下载这个文件

网页元素超链接:可以给任意网页元素添加超链接。在a标签内添加img标签,则图片具有超链接属性

锚点链接:快速转到页面的某个位置。将该链接(a标签,标签内可以是文字或图片等)属性href设置为#two,在后续的h标签中的id属性中配对#后的内容(如two)即可

3.6特殊字符

image-20220112094224721

3.7表格标签

用于展示数据,与css功能有重合之处。css适合用于大块元素布局,颜色,居中等。

image-20220112095417804

其实有四级分类:

        <table>
            <thead>
                <th></th>
            </thead>
            <tr>
                <td></td>
            </tr>
        </table>

表头标签,自动给文字加粗居中

image-20220112100300533

表格属性可以设置大小,边框,颜色,居中等。但更多使用css进行设置。

3.8列表标签,使用的非常多

无序列表,用的非常多

  • 表格
  • 列表
  • 表单

ul中只能写li,而li作为一个容器,可以放任何标签元素。

显示效果为,每个元素前一个小点·,代表无序,使用css后小点消失。

有序列表,了解即可,几乎不用

  1. 表格
  2. 列表
  3. 表单

显示效果为每个元素前有对应的序号。

image-20220112102221568

自定义列表

关注我们

新浪微博

官方微信

腾讯QQ

网易邮箱

相关产品

个人中心

dl中只能有dd、dt

3.9表单标签

表单用于收集用户信息,常用于注册页面。

image-20220112103455063

表单域,用于将form内的所有内容提交给后台接口。以后可以尝试用django写

image-20220112103930302

表单控件

input输入框

image-20220112104359143

type选择text则输入为文本。

type选择password则输入为*形式的文本。

type选择radio为单选框。

type选择checkbox为复选框

type选择file可上传文件

type选择submit可上传表单所有内容给action设置的接口

type选择button用于设置普通按钮,结合js使用。

name用于区分不同的表单元素,多个input是设置同一个name才能实现单选效果。设置value会在选择该项时传递的值。

image-20220112110316984 image-20220112112235070

select下拉框

image-20220112112818544

textarea文本域

大量文字输入框。rows属性可以修改行数对应的宽度,但文字数量不限

posted @ 2022-05-23 22:32  killens  阅读(45)  评论(0编辑  收藏  举报