html基础

html基础

学习一下页面的构造和前端的玩法
学习自己写网页

详情链接

标签:

内容:

1
2
3
4
5
1.由尖括号包裹单词构成,eg:<html>,所以标签不可能以数字开头
2.标签不区分大小写,推荐小写
3.标签可以嵌套,但不能交叉嵌套
错误示例:<a><b></a></b>
正确示例:<a><b></b></a>

使用样式及属性:

标签使用样式

1
2
开始标签<a >标签体</a>结束标签
自闭合标签,eg:<br>,<hr>,<img>,<input>

标签属性:

1
2
3
4
5
a.通常为键值对形式出现,eg:color=“red” id = ‘eat’
b.属性只能出现在开始标签和自闭和标签内
c.属性名字全部小写,属性值必须用单引或者双引包裹
d.如属性名和属性值完全一样,直接写属性名即可
eg:“readonly”(input标签属性)

html文件各部分标签详解

1
2
3
块级标签和内联标签
块级标签:<p>/<h1>/<table>/<ol>/<ul>/<form>/<div>
内联标签:<a>/<input/>/<img/>/<sub>/<sup>/<textarea>/<span>

块级元素的特点:

1
2
3
4
总在新行上开始
高度,行高以及外边距和内边距都可控制
宽度缺省,则是它容器的100%
它可以容纳内联元素和其他块元素

inline元素特点:

1
2
3
4
和其他元素在一行上
高,行高以及外边距和内边距不可改变
宽度就是其文字或图片宽度,不可改变
内联元素只能容纳文本或者其他内联元素

行内元素注意:

1
2
3
4
设置宽度width无效
设置高度height无效
设置margin只有左右margin有效,上下无效
设置padding只有左右padding有效,上下则无效,注意元素范围是增大了,但是对元素周围的内容是没影响的。

常用标签:

块级标签

1
2
3
4
5
总在新的一行上开始(会换行)

标题标签(header):一般用在文章的标题,有h1~h6 (只有6级),会加粗

<p>/<h1>/<table>/<ol>/<ul>/<form>/<div>
1
2
3
4
5
6
7
8
9
10
11
12
<p>:段落标签,换行
<hn>:标题标签
<table>:表格
<ul>:无序标签
<ol>:有序标签
<form>:表单,用于提交数据/上传数据时候要把想要上传的内容写在form表单里面
<div>:容器,用于分区和页面的整体布局

段落标签(Paragraph):会把 HTML文档 分割成若干段落
列表标签:分为:有序列表<ol>、无序列表<ul>以及自定义列表<dl>(含有列表<dt>与列表项<dd>)
div标签:用于分化一个一个的区域
px:像素

行内标签

1
2
3
4
5
6
7
不管写多少行都在一行上
图片标签<img src="图片的路径" alt="下载失败时的替换文字" title="鼠标移动到图片时的提示文字">,插入图片 :图片标签,用于向页面插入图片;图片格式:png,gif,jepg
粗体<strong>/斜体 <em>:粗体标签将文字加粗,斜体标签将文字倾斜 <em>
超链接标签<a href="跳转网址"></a>:超链接标签其实就是 a 标签,一般用于网页之间的跳转还能做锚点,进行跳转。网页之间的跳转,还可以进行本页之间的跳转
.<a href=“目标网址” title=“鼠标滑过显示的文本” target=“_blank”(用于指定实在本页还是新的网页打开的)>链接显示的文本</a> :实现网页跳转和本页内跳转(要注意目标网址的区别)

文字标签:Span 标签是单纯的文字标签,只有配合 CSS 才能有效果
---------------- The End ----------------
0%