【html】结构、术语、标签

网页样式与布局

1.对网页结构进行认知,掌握通过切片工具进行结构的划分

<html>

  <head>

    <title>文档标题</title>

  </head>

  <body>

    <header>头部</header>

    <div class="banner">广告栏</div>

    <div class="sidebar">侧边栏</div>

    <div class="main">主要内容</div>

    <footer>尾部</footer>

  </body>

</html>

2.了解web前端开发的常用术语,以及html标签与通用文档结构的认识

常用术语

Hyper Text Markup Language(超文本标记语言, 又称 HTML)

Cascading Style Sheets (层叠式样式表, 又称 CSS)

Document Object Model (文档对象模型, 又称 DOM)

JavaScript Programming Language (JavaScript编程语言, 又称: ECMAScript 6, ES6, JavaScript 2015)

Web API’s (Web应用程序接口, 又称 HTML5 API 或浏览器 API)

Hypertext Transfer Protocol (超文本传输协议, 又称 HTTP)

Uniform Resource Locator’s (统一资源定位符, 又称 URL)

JavaScript Object Notation (JavaScript对象表示, 又称 JSON)

Web Content Accessibility Guidelines (网页内容无障碍设计指南, 又称 WCAG) & Accessible Rich Internet Applications (富Internet应用程序的无障碍设计, 又称 ARIA)

html标签

双标签:

<b></b> 字体加粗

<i></i> 斜体

<u></u> 字体下划线

<s></s> 删除线

<strike></strike> 删除线

单标签:

<br /> 换行

<hr /> 水平线

向右双箭头 :&raquo;

注册商标符:&reg;

版权符号:&copy;

双引号:&quot;

链接

<a href="#" title="">链接文本/图片</a>

注:# 换成所要链接的文件相对地址。title:为链接提示信息。

图片链接:

<img src="" width="" hegiht="" >

src:图片链接相对地址,alt:图片信息,鼠标悬停时跳出来的文字 width:图片宽度,height:图片高度。

表单:

表单开始标签:<form name="表单名称" method="post/get" action="提交地址">

文本框:<input type="text" name="名称" value="值" placeholder="框中的字一打字就消失"/>

密码框:<input type="password" name="名称" value="值"/>

单选按钮:<input type="radio" name="名称" checked />  //单选的几个input的name值必须一样    checked表示选中

复选框:<input type="checkbox" name="名称" checked />

列表:

<select>

<option value="值" selected></option> // selected表示选中

</select>

文本区域:<textarea cols="文本的宽度" rows="文本行数"></textarea>

//这玩意儿会自带一个放大缩小的功能。可用resize:none来消除

单纯可爱的按钮:<input type="button" value="值">一个没有任何功能的按钮

提交按钮:<input type="submit" name="名称" value="值" /> //value默认为:提交查询,可以自己填写,也可以换成图片

重置按钮 <input type="reset" name="名称" value="值" />

表单结束标签:</form>

#注意!做交互时,最好用上<label></label>把input和文字绑起来,这样不用扣扣索索小心翼翼地点那个小区域了,点文字即可实现选中效果。然后用上 cursor:pointer (手型)更好

3.搭建web基本的框架结构,对html语言进行初步运用

时间: 2024-10-16 01:39:51

【html】结构、术语、标签的相关文章

HTML5结构化标签

一 结构化标签 在之前的HTML页面中,大家基本上都是用了Div+CSS的布局方式.而搜索引擎去抓取页面的内容的时候,它只能猜测你的某个Div内的内容是文章内容容器,或者是导航模块的容器,或者是作者介绍的容器等等.也就是说整个HTML文档结构定义不清晰,HTML5中为了解决这个问题,专门添加了:页眉.页脚.导航.文章内容等跟结构相关的结构元素标签. 在讲这些新标签之前,我们先看一个普通的页面的布局方式: 上图中我们非常清晰的看到了,一个普通的页面,会有头部,导航,文章内容,还有附着的右边栏,还有

HTML5 常用的结构化标签整理

结构化标签优点: 1.方便浏览器处理和识别,提升了网页的质量和语义. 2.减少了大量无意义的div标签,增强代码的可读性. 结构化标签:(header,nav,body,article,section,aside,hgroup,figure,figcaption,footer) <article>定义外部的内容,可以是一篇新的文章 <aside>定义article以外的内容,aside的内容可用作文章的侧边栏 <figure>用于对元素进行组合,使用figcaption

HTML入门-页面结构&amp;基础标签

文章目录 一.什么是html?二.动态网页与静态网页区别?(面试题)三.三个版本和一个标准(面试题)四.html5的扩展五.html创建文件(重点)六.html格式(重点)七.html基本结构(重点)八.注释九.基础标签(重点)十.文本标签十一.布局标签十二.特殊符号一.什么是html? html 超文本标记语言 文本:文字元素超文本:视频,图片,音乐,链接标记符:由左书名号和右书名号包裹一个标签名字的构造-----<p>语言:人与电脑交流的语言方式二.动态网页与静态网页区别?(面试题) 动态

关于Go语言,自己定义结构体标签的一个妙用.

在Go中首字母大写和小写,决定着这此变量能否被外部调用, 比如:在使用标准库的json编码自定一的结构的时候: <pre style="margin-top: 0px; margin-bottom: 0px;"><span style=" font-weight:600; color:#000080;">package</span><span style=" color:#c0c0c0;"> <

关于Go语言,自定义结构体标签的一个妙用.

在Go中首字母大小写,决定着这此变量是否能被外部调用, 例如:在使用标准库的json编码自定一的结构的时候: <pre style="margin-top: 0px; margin-bottom: 0px;"><span style=" font-weight:600; color:#000080;">package</span><span style=" color:#c0c0c0;"> <

网页结构——head标签内

之前写网页都很标准的格式,最近一个项目出现了页面闪动等一系列问题[项目不是前后端分离], 所以这边有后台的功劳,有部分后台是不管你页面结构的,在他们操作的时候可能会在,你的head内meta前加内联css,或者js,在引擎加载规范的前面有其他css,js干扰,加载后又有其他样式,js,导致页面结构不稳定.在这里提醒各位开发者,搭建规范的页面结构还是很重要的,这边我去百度了一篇比较有道理的解释. 基本上就这几个标签么 <meta>.<link>.<title>.<s

html结构和标签

<!DOCTYPE html><meta charset="utf-8"><header>表示页面的一个内容区块,或整个页面的标题</header><section>例如html5中的div</section><section>nihaodiiiiiiiiiiiiii</section><section>nihaodiiiiiiiiiirrrrrrrrrrrrrrrrrrrrrr

html中DIV+CSS与TABLE布局方式的区别及HTML5新加入的结构标签(转)

DIV与TABLE布局的区别 div 和 table 的加载方式不同,div 的加载方式是即读即加载,遇到 <div> 没有遇到 </div> 的时候一样加载 div 中的内容,读多少加载多少:table 的加载方式是完成后加载,遇到 <table> 后,在读</table> 之前,table 中的内容不加载,或者传输中断了的时候加载,这是因为TABLE牵涉到多行多列问题,所以只有当TABLE所有内容加载完毕,浏览器才知道该怎么显示 . div与css配合使

HTML5的新结构标签

在之前的HTML页面中,大家基本上都是用了Div+CSS的布局方式.而搜索引擎去抓取页面的内容的时候,它只能猜测你的某个Div内的内容是文 章内容容器,或者是导航模块的容器,或者是作者介绍的容器等等.也就是说整个HTML文档结构定义不清晰,HTML5中为了解决这个问题,专门添加了:页 眉.页脚.导航.文章内容等跟结构相关的结构元素标签. 在讲这些新标签之前,我们先看一个普通的页面的布局方式: 上图中我们非常清晰的看到了,一个普通的页面,会有头部,导航,文章内容,还有附着的右边栏,还有底部等模块,

5.8 HTML5新结构标签

在之前的HTML页面中,大家基本上都是用了Div+CSS的布局方式.而搜索引擎去抓取页面的内容的时候,它只能猜测 你的某个Div内的内容是文章内容容器,或者是导航模块的容器,或者是作者介绍的容器等等.也就是说整个HTML文档结构定义不清晰,HTML5中为了解 决这个问题,专门添加了:页眉.页脚.导航.文章内容等跟结构相关的结构元素标签. 在讲这些新标签之前,我们先看一个普通的页面的布局方式: 上图中我们非常清晰的看到了,一个普通的页面,会有头部,导航,文章内容,还有附着的右边栏,还有底部等模块,