江苏龙网

  1. 首页 > 人文 > >

前端基础——一篇文章带你了解HTML语法

前言
在做web开发时 ， 我们必不可少的要使用到Html,因为它包含了最基础的网页结构 ， 虽然Html只能帮助我们构建静态网页 ， 但是却是我们最不能缺少的部分 ， 如果把网页比作一个房子 ， 那么Html就是地基 ， 也就是第一件要做的事 ， 可见它的重要性 。 那么 ， 现在大家就跟随我的脚步去学习下吧 。
一、Html基本语法
要想知道Html的语法规则 ， 首先我们得创建一个以Html为后缀的文件 ， 当然也可以是Htm或者是XHtml,这里不讲述它们的区别 。
在写Html之前容我给大家介绍一个神器 ， 它拥有所见即所得的神器效果 ， 也就是说有了它 ， 我们可以编写Html代码边看结果 ， 完全不用浏览器 ， 可以说是相当方便 ， 它就是ExHtmlEditor 。
下载地址：
https://u062.com/file/7715018-445508413
下载解压后即可使用 ， 无需安装 ， 方便快捷 。
前端基础——一篇文章带你了解HTML语法
文章图片
2).设置背景图片
需要在body标签中设置背景为图片地址 。
<bodybackground=''1.jpg''>
3).图片映射
通过点击图片跳转到相应链接页面 。
<ahref=''https://www.baidu.com''><img src=''1.png''title='图片'alt='图片无法显示'/></a>
【前端基础——一篇文章带你了解HTML语法】8.表格
有时候我们也需要插入表格来展示一些数据 ， 表格的制作稍微有点麻烦 ， 不过用SublimeText3它可以十分轻松的创建表格 。 表格一般由表头 ， 表的标题 ， 表的内容组成 。 最常用的就是Table标签了 。
<!--表格边框1px,单元格边距5px,单元格间距10px,背景颜色灰色,背景图片1.jpg--><tableborder=''1''cellpadding=''5''cellspacing=''10''bgcolor=''gray''background='1.jpg'><colbgcolor='red'/><!--设置表格列的属性--><colgroupbgcolor='blue'></colgroup><!--设置表格列组的属性--><caption>表格标题</caption><!--页眉--><thead><tr><!--表格的行--><thcolspan=''2''>1--one</th><!--表格表头 ， 相当于列跨两行--><th>2--two</th><th>3--three</th><th>4--four</th></tr></thead><!--表格主体--><tbody><tr><td>a</td><!--表格单元--><td>b</td><td>c</td><td>d</td></tr></tbody><!--表格页脚--><tfoot><tr><td>h</td><td>j</td><td>k</td><td>l</td></tr></tfoot></table>
前端基础——一篇文章带你了解HTML语法
文章图片
前端基础——一篇文章带你了解HTML语法
文章图片
前端基础——一篇文章带你了解HTML语法
文章图片
2).水平框架
不可与Body标签同时出现
<framesetrows=''50%,50%''>#设置框架的行占有比例<frame src=''1.png''noresize=''noresize''>#无法调整框架的大小<frame src=''1.png''></frameset>
3).内联框架
#存在body标签中frameborder：是否显示框架周围的边框0隐藏1显示scrolling：是否显示滚动条yes显示no隐藏auto自动width：宽度height：高度name：锚点名称<iframe src=''''frameborder=''0''scrolling='no'width=500height=400name='if'><img src='https://pcff.toutiao.jxnews.com.cn/p/20200924/1.jpg'/></iframe><ahref=''https://www.baidu.com''target=''if''>fadf</a>
4).判断是否支持框架
<noframes><body>您的浏览器不支持框架</body></noframes>
12.表单元素
这个算是Html中的重中之重了 ， 因为用的比较多 ， 基本上所有的表单元素都包含在Form标签中 。 每一个表单中的空间要么独立存在 ， 要么处于Input中 ， 下面我们来详细了解下：
<formaction=''method='get'accept-charset=''''target=''''autocomplete=''''enctype=''''novalidate><fieldset>#字段组<legend>表单数据</legend>字段组名表单控件的标记<labelfor='sex'>for必须指向id<inputtype=''text''name=''sex''id='sex'></label>文本输入框：<inputtype=''text''>密码输入框：<inputtype=''password''name=''''>单选框：<inputtype=''radio''name=''性别''value=''男''checked><inputtype=''radio''name=''性别''value=''女''>多选框：<inputtype=''checkbox''name=''爱好''value='https://pcff.toutiao.jxnews.com.cn/p/20200924/踢足球'><inputtype=''checkbox''name=''爱好''value='https://pcff.toutiao.jxnews.com.cn/p/20200924/打篮球'><inputtype=''checkbox''name=''爱好''value='https://pcff.toutiao.jxnews.com.cn/p/20200924/打排球'><inputtype=''checkbox''name=''爱好''value='https://pcff.toutiao.jxnews.com.cn/p/20200924/羽毛球'><inputtype=''checkbox''name=''爱好''value='https://pcff.toutiao.jxnews.com.cn/p/20200924/橄榄球'>按钮：<button>button1</button>下拉列表：<selectname='seq'><option>1</option><option>2</option><option>3</option><option>4</option></select>文本域：<textareaname='area'rows=10cols=20>行占10个字符列占20个字符 ， 一个汉字等于两个字符helloworld</textarea>菜单：<menutype=''list''>列表菜单还有上下文菜单(context)工具栏菜单(toolbar)<menulabel=''文件''><buttontype=''button''>新建</button><buttontype=''button''>打开</button><buttontype=''button''>退出</button></menu></menu><menutype=''context''id=''menu''><menuitemlabel=''menu''type='checkbox'icon=''1.png''>多选菜单项目还有单选(radio)和命令(command)</menuitem></menu><inputtype=''button''name=''''value='https://pcff.toutiao.jxnews.com.cn/p/20200924/button2'>提交：<inputtype=''submit''name=''''value=''Submit''></fieldset>Html5表单类型预定义选项列表<inputlist=''rice''><datalistid=''rice''><optionvalue=''1''><optionvalue=''2''><optionvalue=''3''><optionvalue=''4''><optionvalue=''5''></datalist>表单的密钥对生成器字段当提交表单时 ， 私钥存储在本地 ， 公钥发送到服务器 。 <keygenname=''security''keytype=''rsa''disabled=''disabled''/>输入框只允许数字输入<inputtype=''number''>日期<inputtype=''date''name=''''>颜色<inputtype=''color''name=''''>范围<inputtype=''range''name=''''>月份和年份<inputtype=''month''name=''''>星期和年份<inputtype=''week''name=''''>时间<inputtype=''time''name=''''>日期时间选择(有时区)<inputtype=''datetime''name=''''>日期时间选择(无时区)<inputtype=''datetime-local''>邮箱<inputtype=''email''name=''''>搜索<inputtype=''search''name=''''>电话<inputtype=''tel''name=''''>url<inputtype=''url''name=''''></form>action：处理表单数据的服务器脚本语言（如php）method：请求方法如getpostaccept-charset：提交表单时的字符编码如utf-8target：页面跳转方式autocomplete：自动完成表单off关闭on开启enctype:表单数据的编码如application/x-www-form-urlencoded(默认),multipart/form-data(文件上传),text/plainnovalidate：浏览器不验证表单formtarget覆盖target属性,用于type=''submit''和type=''image'' 。 formnovalidate覆盖novalidate属性,用于type=''submit''formmethod覆盖method属性,用于type=''submit''以及type=''image''formenctype覆盖enctype属性,用于type=''submit''以及type=''image'',仅针对method=''post''的表单formaction提交表单时处理该输入控件的文件的URLform规定input元素所属的一个或多个表单autofocus当页面加载时自动获得焦点disabled输入字段应该被禁用max输入字段的最大值maxlength输入字段的最大字符数min输入字段的最小值pattern通过其检查输入值的正则表达式readonly输入字段为只读required输入字段是必需的size输入字段的宽度step输入字段的合法数字间隔value输入字段的默认值multiple常用于邮箱和文件 ， 可多个上传文件placeholder提示用户该如何正确输入
前端基础——一篇文章带你了解HTML语法
文章图片
2)).object
<objectdata=''1.mp3''></object>
3)).audio
<audiocontrols=''controls''>h5中的标准,带有播放控制按钮支持mp3wavwma等格式<source src=''1.mp3''type=''audio/mp3''/></audio>
4)).a标签
<ahref=''1.mp3''>播放</a>
2).视频
1)).embed
<embed src=''qw.mp4''/>
2)).object
<objectdata=''qw.mp4''></object>
3)).video
<videocontrols=''controls''>支持MP4aviwmvflv格式播放<source src=''qw.mp4''type=''video/mp4''/></video>
4)).a标签
<ahref=''qw.mp4''>播放</a>
前端基础——一篇文章带你了解HTML语法
文章图片
15.Html5中的文章布局
可以帮我们省去一些不必要的排版标签 ， 利用新式布局标签会显得更加专业 ， 而且代码量更少 。
header页眉nav导航section文档中的节article独立的自包含文章aside侧栏footer页脚details额外的细节summarydetails的标题<header><h1>CCTV</h1></header><nav>CCTV-1<br>CCTV-2<br>CCTV-3<br></nav><section><h1>新闻联播</h1><p>大家好 ， 欢迎来到新闻联播 。 下面请看简讯</p><p>一男子每天靠摆地摊赚钱 ， 这是怎么回事呢？</p></section><summary><h3>其它简讯</h3><details>后浪们 ， 摆摊吧~</details><details>摆摊入门知识</details></summary><footer>商务合作www.这你都信.com</footer>
前端基础——一篇文章带你了解HTML语法
文章图片
可以看到 ， 文章结构紧凑 ， 排版更加让人觉得一目了然 。
二、总结
虽然Html总体来说 ， 可能难度不是很大 ， 但是要想学好 ， 也不是一件容易的事 ， 把一件小事做好 ， 定能出彩 。
想要学习更多 ， 请前往Python爬虫与数据挖掘专用网站：http://pdcfighting.com/


    推荐阅读


    上一篇：iPhone 11遭遇“新低价”，网友却不着急入手：这并不香

    下一篇：远程看娃神器，这款360摄像机会唱儿歌还能通话