前端入门之html

Web标准

web标准的构成:
结构(HTML)、表现(CSS)、行为(JavaScript)

HTML标签

语法规范

意思是当前页面采用的是HTML5版本来显示的,是文档类型声明标签
> 其中lang表示language,en表示英文网页,ah-CN就是中文网页,主要是提示作用
charset表示字符集的意思,UTF-8表示万国码,GB2312表示简体中文,BIG5表示繁体中文,该句是非常重要的,否则可能出现乱码

常用标签

标题标签

-

重要性递减,一个标题独占一行

段落标签 p

换行标签

单词break的缩写,可以强制换行
是一个单标签

文本格式化标签

加粗:/
倾斜:/
删除线:/
下划线:/

图像标签

是一个单标签

插入图片之前需要先把图片放在html文件一起
找不到图片的路径
alt表示如果图片显示不出来就会用它的属性是来代替
image.png
title属性的值会在鼠标移到图片上的时候显示出来
width属性设置图像的宽度
height属性设置图片的高度

找不到图片的路径

border可以给图片加上边框
属性之间是不区分顺序的

文件夹和根目录

目录文件夹:做网页所需要的相关素材,例如:html,图片等
根目录:打开目录文件夹的第一层就是根目录

相对路径和绝对路径

相对路径:图片相对于HTML页面的位置
前端入门之html_第1张图片

绝对路径:通常是从盘符开始的例如C:\或者D:\或者是完整的网址

注意绝对路径和相对路径的斜杠是相反的,但是当绝对路径是网址的时候斜杠和相对路径一样

链接标签

target默认属性值为_self 此外还包括_blank

内部链接 外部链接 空链接 下载链接
网站内部页面之间相互链接,直接连接内部网页名称即可 各种网址 空链接 下载链接地址链接的是文件.exe 或者是 .zip等压缩包形式,例如 下载图片

也可以为网页元素例如图片,网格,音频等都可以添加链接

锚点链接

当页面篇幅很长的时候则需要锚点链接来实现跳转
1、设置href的属性值为“#名字”的形式,例如
第二季
2、找到目标位置标签,里面添加一个id属性=刚才的名字,例如

第二季

注释和特殊字符

注释标签:

特殊字符:
前端入门之html_第2张图片

表格标签

  
单元格里面的文字

table用于定义表格
tr用于定义表格中的行
td用于定义表格中的单元格
三者嵌套的顺序不可变
例如:

一行一列 一行二列 一行三列
二行一列 二行二列 二行三列
三行一列 三行二列 三行三列

前端入门之html_第3张图片

表头单元格标签

表头单元格里面的文字会加粗,内容会居中显示

第一列名字 第二列名字 第三列名字
二行一列 二行二列 二行三列
三行一列 三行二列 三行三列

前端入门之html_第4张图片

表格属性

align是文字在表格中的位置
cellpadding是单元格与文字之间的距离
cellspacing是指单元格之间的距离

表格结构标签

可以将表格分割成表格头部和表格主体部分:

标签和

例如:

第一列名字 第二列名字 第三列名字
二行一列 二行二列 二行三列
三行一列 三行二列 三行三列

合并单元格

跨行合并:rowspan="合并单元格格数"
最上面单元格作为目标单元格,写合并代码
跨列合并:colspan="合并单元格个数"
最左侧单元格作为目标单元格,写合并代码

   

前端入门之html_第5张图片
合并单元格的时候记住删除多余的单元格(即是合并的目标单元格的其他单元格)

列表

无序列表:

 

你喜欢的食物

  • 榴莲
  • 火锅
  • 烧烤

前端入门之html_第6张图片
ul标签中只能有li标签,例如p标签不能出现在ul中,li里面可以放任一标签
有序列表:

粉丝排行榜

  1. 迪丽热巴;19808
  2. 赵丽颖:12344
  3. 小红:1

同理,ol只能放li
li可放任意
前端入门之html_第7张图片
自定义列表:
常用于定义描述列表

 
关注我们
新浪微博
官方微信
联系我们

前端入门之html_第8张图片

表单

各种表单元素控件

action用于指定几首并处理数据的服务器程序的地址
method属性值包括get/post,用于设置表单数据的提交方式
name用于指定表单的名称,以区别同一页面中多个表单域

表单域就是form

表单控件

1、input输入表单元素(单标签)

   
用户名:
密码:
性别:男
爱好:吃饭 睡觉 打豆豆

前端入门之html_第9张图片
单选按钮问题解决:
name属性:区别不同的表单,定义input元素的名称
性别实现单选:三个input的name的属性值都是一样的
value属性:主要供后台人员使用,规定input元素的值
单选框和复选框都要有相同的name值
checked属性:主要用于单选框和复选框,默认选中
maxlength属性:规定输入字段中字符的最大长度

2、select下拉表单元素


selected属性默认选择

  

3、textarea文本域表单元素
特大号文本框
常用于留言板,评论

 
今日反馈:

label标签

用于绑定一个表单元素,当点击label标签内的文本的时候,浏览器会自动将焦点转到或者选择对应的表单元素上,用来增加用户体验

label里面的for属性应当与相关元素的id属性相同

 

你可能感兴趣的:(前端html5)