HTML基础知识

HTML基础知识

html是超文本标记语言,因此是用标签标记的.标签有单标签</ br> 以及双标签< h1> < /h1>构成

常用标签

标题 < h1> < /h1> …< h6> < /h6>

水平线 hr标签

段落 p标签

换行 br单标签

font 规定⽂本的字体、字体尺⼨、字体颜⾊

pre 定义预格式化的⽂本。被包围在 pre 元素中的⽂本通常会保留空格和换⾏符。⽽⽂本也会呈现为等宽
字体

文本标签 b（粗⽂本）、i（斜体⽂本）、u（下划线⽂本）、del （中划线⽂本）、sub（下标⽂本）、sup（上标⽂本）

列表

无序列表 ul

ul里包含子标签li;其中li是没有顺序的,可以使用type属性来改变li前面的符号

有序列表 ol

ol 里包含子标签li;其中li是没有顺序的,可以使用type属性来改变li前面的符号.

div和span

div是块级元素,即独占一行

span是行内元素,和其他元素共享一行.

a标签

超链接

href:地址 target:打开方式(black新页面打开 self当前页面打开)

锚点|导航元素

第一步 < a name=‘属性值’> < /a> | < div id=“属性值”> < /div>

第二步 导航元素 < a href="#属性值"> < /a>

可以跳转到设置属性值所在的位置

注意:a标签的href属性不写(href""),是刷新页面.

img标签

设置图片

src 图片的地址:可以是网络上的;也可以是本地上的,本地的需要设置本地的相对路径

title 当鼠标悬停到图片的时候,显示图片的小标题

alt: 当图片加载不出来的时候,出现的提示字.

另外还有 align,border,height,width,等属性

table标签

table是表，里面有tr行(因为是控制行,所以可以调节高度height)，

和 td列|th表头列(是列,所以可以调节宽度 width).

style=“border-collapse:collapse;” 合并边框线 也可以使用table的属性cellspacing=“0px” 去除单元格间隙

align 设置水平方向的对齐方式 valign 设置垂直方向的对齐方式

colspan 跨列合并 rowspan 跨行合并

字符实体

当我们需要一些像是空格、小于号、大于号这种在html中有着特殊含义的字符的时候，就需要使用到字符实体了。

空格 &nbsp

大于号> &gt

小于号< &lt

版权© &copy

form表单

form是我们学习的重点,需要多加练习来掌握的

form 标签⽤于为⽤户输⼊创建 HTML 表单。同样也是个双标签.下面我们介绍下form的属性

method表单的提交方式

get:默认，主动的获取⽅式，数据放在url上，数据的容量有限，安全性差，有缓存

post:数据放在请求实体中，数据量理论上没有限制，相对安全，没有缓存

百度只提供了get的入口

action

数据传输地址

input

type:button按钮;checkbox多选;file文件;hidden隐藏;image图片;password密码;radio单选;reset重置;submit提交;text文本(value是默认值)----name属性是提交给后台进行区分数据的.placeholder是提示语

checked=“checked” 默认选中

disabled禁用;readonly只读;maxlength最大长度

若上传⽂件file时，请求⽅式为post，且表单添加⼀个属性:enctype=“multipart/form-data”

二进制表单：enctype=“multipart/form-data”
普通表单：application/x-www-form-urlencoded

button

type:button、submit、reset 按钮的类型

disabled禁用,value按钮的初始值,name按钮名称

select 下拉框|下拉列表

size 显示的个数

multiple 多选

name 下拉列表的名称

disabled禁用

option

disabled 禁用该下拉框

selected=“selected” 默认选中的

value 送往服务器的选项值。

文本域

textarea文本域(rows,cols)

该标签定义多行的文本输入控件。文本区中可容纳无限数量的文本，可以通过 cols 和 rows 属性来规定 textarea 的尺寸。cols规定文本区内的可见宽度。rows规定文本区内的可见行数。

1. 没有name属性的属性是⽆法提交到后台的！！！！

2. radio单选按钮以name相同为⼀组。

3. checkbox复选按钮以name相同为⼀组。

   <!--action:    数据传输的地址-->
   <form action='https://www.baidu.com/' method="get">
   			<!-- 输入框  用户名. value是默认值 name是发送后台的-->
   			用户名：<input type="text" name="uname" value="admin" readonly="readonly"/> <br />
   			<!-- 密码框  密码 placeholder是提示语 -->
   			密码：<input type="password" name="upwd" maxlength="6" placeholder="请输入密码"/>  <br />
   			<!-- 单选框   需要用name属性将按钮捆绑为一组 -->
   			性别：<input type="radio" name="sex" value="man" />男
   				<input type="radio" name="sex" value="woman"/>女
   				<br />
   				
   			婚否：<input type="radio" name="isMarry" value="0" disabled="disabled"/>离异
   				<input type="radio" name="isMarry" value="1"/>未婚
   				<br />
   				
   			<!-- 复选框   需要用name属性将按钮捆绑为一组 -->
   			爱好：<input type="checkbox" name="hobby" value="basketball"/>篮球
   				<input type="checkbox" name="hobby" value="football" checked="checked"/>足球
   				<input type="checkbox" name="hobby" value="ppball"/>乒乓球
   				<br />
   			
   			<!-- 文本域 -->
   			个人介绍：
   				<textarea cols="10" rows="5"></textarea>  <br>
   				
   			<!-- 下拉框 -->
   			喜欢的颜色：<select name="color" size="4" multiple="multiple">
   				<option value="red">红色</option>
   				<option value="green">绿色</option>
   				<option value="blue">蓝色</option>
   				<option value="pink">粉色</option>
   				<option value="black" selected='selected'>黑色</option>
   				<option value="white">白色</option>
   			</select>
   			
   			<br />
   			<!-- 文件上传 -->
   			<input type="file" name="ufile">  <br />
   			<!-- 重置按钮 -->
   			<input type="reset" value="重置" disabled="disabled">
   			<!-- 图片按钮 -->
   			<input type="image" src="img/lbw.png" width="15px" height="15px">
   			<!-- 普通按钮 -->
   			<input type="button" value="普通">
   			<!-- 提交按钮 -->
   			<input type="submit" value="注册">
   			<br /><br />
   			<!-- button按钮 -->
   			<button type="button">普通button</button>
   			<button type="reset">重置button</button>
   			<button type="submit">提交button</button>
   			
   		</form>
   

分类

行内元素:和其他元素共享一行。元素的⾼度、宽度及顶部和底部边距不可设置。

块级元素:独占一行。⾼度、宽度、⾏⾼以及顶和底边距都可设置

行内块级元素:和其他元素都在⼀⾏上；元素的⾼度、宽度、⾏⾼以及顶和底边距都可设置。