热门关键字:
jquery > jquery教程 > jquery教程 > Web开发基础之HTML

Web开发基础之HTML

322
作者:管理员
发布时间:2021/2/6 16:12:55
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=3929
  HTML 提供页面上的内容(结构和内容)


  CSS 对网页进行美化(样式)


  JavaScript对网页上的内容进行控制(控制)


  常用开发工具:


  轻量文本型:VSCode、Sublime


  重量IDE型:WebStrom


  下载VSCode 地址:


  可以下载绿色版


  汉化,安装中文控件


  什么是HTML


  HTML(英文 Hyper Text Markup Language 的缩写)中文译为超文本标记语言


  通过HTML标签对网页中的文本、图片、声音等内容进行描述


  打开网络上的一个页面,通过浏览器调试工具查看源代码


  HTML的格式


  基本格式


  html标签:所有html标签的根节点


  head标签:描述网页的一些信息,里面的内容不会被显示呈现


  title标签:网页的标题


  body标签:页面的主题部分,主要编写开发的内容


  Tip:通过编辑器快速创建html的页面结构


  在vscode中新建一个html文件后,输入!按tab键,可以快速生成一个HTML5标准的一个页面结构。


  双标签


  语法格式


  <标签名> 在整个标签的最前面,称为“开始标签(start tag)”


  </标签名> 在整个标签的最后面,称为“结束标签(end tag)”


  结束标签只是比开始标签,在前面多了一个关闭符“/”。


  单标签


  语法格式


  例如


  UTF-8 是目前最常用的字符集编码方式,常用的字符集编码方式还有 gbk 和 gb2312


  GB2312 简单中文  包括6763个汉字


  BIG5   繁体中文 港澳台等用


  GBK 包含全部中文字符    是 GB2312 的扩展,加入对繁体字的支持,兼容 GB2312


  UTF-8 则包含全世界所有国家需要用到的字符


  Tip:以后我们统一使用UTF-8字符集就可以了,避免出现字符集不统一而引起乱码的情况。


  标题标签


  语法


  标题标签按1-6大小从大到小,如下图 默认提供1-6个标题标签,如果写h7则是普通文字


  段落标签


  单词缩写: paragraph  段落


  使用段落标签,可以使网页中的文本文字,呈现出一个一个段落的格式。


  语法:


  水平线标签


  换行标签


  单词缩写:  break   打断 ,换行在HTML中,默认换行是需要在浏览器窗口的最右端才会自动换行,这样在每个设备中呈现的效果不一致。如果需要进行某段文本的强制换行,就需要使用到换行标签。


  语法:


  练习:实现一个简单新闻页面


  div span标签


  div   division  的缩写   分割, 分区的意思  其实有很多div 来组合网页。 块级元素


  span  跨度,跨距;范围,行内元素


  语法


  标签属性


  在使用HTML制作网页的时候,如果想让标签提供更多的信息,可以使用标签的一些属性进行设置。


  语法


  例


  width  属性,值 200   控制宽度


  align 属性,值 left     控制横向对其方式


  默认hr标签占据了整行,设置以上属性以后宽度就只有设置的200


  默认hr是居中对齐,设置左对齐


  图片标签


  单词缩写:image 图像(单标签)


  语法


  通过src属性,进行设置图像文件的路径和文件名。是img标签的必须属性。


  图片标签属性


  src可以是网络路径,可以的本地绝对路径或者相对路径,前提是路径存在图片有效,否则使用设置的文本代替


  链接标签


  单词缩写:anchor 锚


  语法


  示例


  跳转 默认直接覆盖当前页面跳转,加target="_blank"新打开一个页面跳转


  跳转需要加协议例如http否则会在当前目录绝对路径加跳转链接


  特殊字符标签


  html中一些标签,具有特殊含义,会被浏览器直接解析 ,如果需要输出这些标签,需要使用到转义、替代语法。


  例如需要在页面显示:  <p>标签经常用于段落 直接写在html文本里面会把<p>当成标签解析,页面并不会显示


  需要写成如下格式


  注释标签


  注释标签,可以给HTML文档中添加一些便于阅读和理解的文字,并且此标签中的内容,不会直接展示出来,只有通过源代码的方式才可以看到。


  语法


  也可以直接选中需要注释的语句 ctrl+/注释


  列表标签


  语法


  ①在<ul></ul>标签中,只能嵌套<li></li>标签,其他标签的直接嵌套是语法是不被允许的。


  ②<li></li>标签中作为一个容器,可以容纳其他的标签元素。


  ③无序列表具有默认样式,可以CSS进行修饰。


  页面显示


  ol有序标签


  在前面加序号


  页面显示


  表格标签


  语法


  表格属性


  ①可以使用th标签设置表头   即把td改成th可以把表头设置成标题模式加粗


  ②之后可以使用CSS修饰表格的样式


  示例:


  一个主机列表表格


  页面显示


  修改设置


  显示效果


  表单


  在HTML中,form标签用来定义一个表单。用来实现用户的相关信息的收集和传递,和后端进行交互。form中的所有内容都会被提交给服务器。


  语法:


  常用属性:


  action  值为提交到后端接收的URL地址


  method 设置表单的提交方式   值为get或者post


  表单控件组成


  表单中的提供了多种表单空间,单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。


  input控件


  input控件为表单中,最常使用的,也是需要重点掌握的。基本标签属性为type属性


  用来定义不同的控件类型。


  其他常见属性


  textarea控件(文本域)


  当需要输入大量信息的时候,就可以使用textarea标签。实现多行文本的输入框。




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jQuery
友荐云推荐