html入门
Html(Hyper Text Markup Language)
1.超文本标记语言:超过文字的传达方式、超链接
网站由一系列网页组成,网页由H5标签组成内容的集合,通过浏览器打开。
由图片、文字、链接、视频、音频等组成。
2.web标准
结构:html,对元素进行整理分类
表现:css,网页元素的版式,颜色,大小
行为:js,交互
3.语法规范
3.1标签常成对出现,单标签非常少
3.2标签关系
包含,并列
3.3标签结构
3.4开发工具VS-code
输入!,回车得到默认html模板
语言:英文:lang=”en“,中文:lang=”zh-CN“
3.5常用标签
h标签:标题标签,h1-h5,
分割线标签hr
p标签:段落标签,分段落时使用,段落间由较大行间距,自动换行,
换行标签break:
粗体、斜体、下划线
div与span标签,相当于一个盒子,用来布局网页
一个div独占一行
多个span为一行,中间有一定跨度。
图像标签:必须用src属性指定路径
超链接标签:跳转到另一个页面
a(anchor)标签:必须写hrfe属性指定链接,另一个属性target指定在当前页面打(_self)开还是在另一个页面打开(__blank),默认_self
链接分类:外部链接,百度,京东等
内部链接:网站内部网页相互链接,用页面之间的路径即可。
空连接:hrfe属性用#代替即可
下载链接:hrfe中为文件或压缩包会下载这个文件
网页元素超链接:可以给任意网页元素添加超链接。在a标签内添加img标签,则图片具有超链接属性
锚点链接:快速转到页面的某个位置。将该链接(a标签,标签内可以是文字或图片等)属性href设置为#two,在后续的h标签中的id属性中配对#后的内容(如two)即可
3.6特殊字符
3.7表格标签
用于展示数据,与css功能有重合之处。css适合用于大块元素布局,颜色,居中等。
其实有四级分类:
<table>
<thead>
<th></th>
</thead>
<tr>
<td></td>
</tr>
</table>
表头标签,自动给文字加粗居中
表格属性可以设置大小,边框,颜色,居中等。但更多使用css进行设置。
3.8列表标签,使用的非常多
无序列表,用的非常多
- 表格
- 列表
- 表单
ul中只能写li,而li作为一个容器,可以放任何标签元素。
显示效果为,每个元素前一个小点·,代表无序,使用css后小点消失。
有序列表,了解即可,几乎不用
- 表格
- 列表
- 表单
显示效果为每个元素前有对应的序号。
自定义列表
- 关注我们
- 新浪微博
- 官方微信
- 腾讯QQ
- 网易邮箱
- 相关产品
- 个人中心
dl中只能有dd、dt
3.9表单标签
表单用于收集用户信息,常用于注册页面。
表单域,用于将form内的所有内容提交给后台接口。以后可以尝试用django写
表单控件
input输入框
type选择text则输入为文本。
type选择password则输入为*形式的文本。
type选择radio为单选框。
type选择checkbox为复选框
type选择file可上传文件
type选择submit可上传表单所有内容给action设置的接口
type选择button用于设置普通按钮,结合js使用。
name用于区分不同的表单元素,多个input是设置同一个name才能实现单选效果。设置value会在选择该项时传递的值。
select下拉框
textarea文本域
大量文字输入框。rows属性可以修改行数对应的宽度,但文字数量不限