2-HTML常见的一些标签-创新互联
HTML常见的一些标签
HTML介绍
HTML:超文本标记语言
其实它就是文本,游览器负责将它解析成具体的网页内容
- HTML组成
跟XML类似,HTML由N个标签(节点、元素、标记)组成
上图:<>中的内容都属于标签,其中div标签最多
上图:通过webstorm来开发。我们创建了一个html文件,默认会生成图中的部分内容,我们先将其删掉。
在webstorm中html中的注释通过 ctrl+/ 或 ctrl+shift+/ 来添加
我的第一个HTML5
上图:通过webstorm右上角,将当前的代码通过已安装的浏览器打开
上图:可以看到浏览器的标签页中的内容,就是标题的内容
我的第一个HTML5
代码:我们将meta charset="UTF-8"给注释掉了,然后在通过浏览器打开该代码或刷新已打开的网页
上图:可以看到不使用UTF-8就显示乱码了。
我的第一个HTML5
hello world,你好 世界!
代码;在body添加内容
上图:body中的内容在页面显示
HTML常用的标签
- 标题标签
以上几个图都是标题标签
常用标签
我是h2标题
我是h3标题
我是h4标题
我是h5标题
我是h6标题
我是h7标题
上图:标题标签的不同级别大小不同
- 表单标签
常用标签
我是h2标题
我是h3标题
我是h4标题
我是h5标题
我是h6标题
我是h7标题
上图:
表单标签可以提供输入框;
表单标签的placeholder元素可以显示提示内容;
表单标签的value元素可以提供输入的默认内容。
标签手册: http://www.w3school.com.cn/html/html_headings.asp
上图:随意点击一个,及惹怒标签参考手册
上图:标题下面就是HTML中的各种标签
上图:进入input标签
上2图:点进去标签以后可以看到,标签相关的属性(元素);其中就包括我们上面使用的placeholder属性。
上图:type属性
常用标签
我是h2标题
我是h3标题
我是h4标题
我是h5标题
我是h6标题
我是h7标题
代码:增加了input标签的color属性
上图:增加了颜色,并且可以更改颜色。
代码:增加了日期
上图:可以选择日期
代码:增加了文件选择
代码:checkbox是复选框; radio是单选
我是段落,我是段落,我是段落,我是段落,
我是段落,我是段落,我是段落,我是段落,
我是段落,我是段落,我是段落,我是段落,
代码:增加段落标签
- 图片
代码:
加载网络图片; 通过Google浏览器到www.baidu.com首页去复制图片地址;
alt设置提示文字
width设置图片大小
上图:这是我们从百度复制来的图片效果
上图:我们从本地copy一个图片到webstorm关联的目录,与我们当前编辑的html文件在同一级目录;
代码:因为是同级目录,所以加载图片的时候,将同级相对路径下的图片加载过来就好。
上图:加载好的图片
- 换行标签
换行测试!!!!!!!
换行测试!!!!!!!
换行测试!!!!!!!
上图:每个br就是一个换行
- 超链接
我是超链接
我是超链接
代码:
href用于关联连接
“#”会跳转到本页面
target='_blank'表示当跳转时,用新的页面来显示网页(当前网页还会继续存在)。
target='_self',会用当前页面进行跳转(不会保留原有网页)
上图:点击超链接就会跳转到关联的网址页面
- 列表标签
上2图:两个图都属于列表标签
列表标签是非常常用的标签。
列表分为:有序列表、无序列表
- 我是无序列表
- 我是无序列表
- 我是无序列表
- 分割线换行标签
- 我是无序列表
- 我是无序列表
- 我是无序列表
代码:
是分割线换行标签
上图:可以看到被分割线给分割了
- div标签
我是div,我是div,我是div,
我是div,我是div,我是div,
我是div,我是div,我是div,
代码:
div标签就是你输入什么,就得到什么(所见即所得);div标签是用的最多的。
div是一个容器,div里可以嵌套div,或嵌套其他。
我是div,我是div,我是div,我是div
我是嵌套的无序列表
我是嵌套的段落
小结:
- src与href
相同点:
src与href都是用来链接外部资源的;
不通点:
src:引用;引用的资源是必须的。
href:引入; 引入不是必须的。
- 单标签与双标签
单标签:<>是不需要写内容的
双标签:<>这里是需要写内容的<>
- 所有代码
常用标签
我是h2标题
我是h3标题
我是h4标题
我是h5标题
我是h6标题
我是h7标题
我是段落,我是段落,我是段落,我是段落,
我是段落,我是段落,我是段落,我是段落,
我是段落,我是段落,我是段落,我是段落,
换行测试!!!!!!!
换行测试!!!!!!!
换行测试!!!!!!!
我是超链接
我是超链接
- 我是无序列表
- 我是无序列表
- 我是无序列表
- 我是无序列表
- 我是无序列表
- 我是无序列表
我是div,我是div,我是div,
我是div,我是div,我是div,
我是div,我是div,我是div,
我是div,我是div,我是div,我是div
我是嵌套的无序列表
我是嵌套的段落
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
文章标题:2-HTML常见的一些标签-创新互联
本文地址:http://myzitong.com/article/dpeggs.html