做网站想要中立,太原做推广营销,网站建设登录界面设计步骤,wordpress怎么念PHP零基础学习
本日志用于记录自己学习php的笔记#xff0c;尽可能写的全面通俗易懂一些。持续更新 博主学习参考的视频#xff1a;路飞学城php入门视频教程
一、HTML网页的基本结构以及编码问题
使用软件#xff1a;
Subline Text 3.0 首先使用Subline Text打出HTML的基…PHP零基础学习
本日志用于记录自己学习php的笔记尽可能写的全面通俗易懂一些。持续更新 博主学习参考的视频路飞学城php入门视频教程
一、HTML网页的基本结构以及编码问题
使用软件
Subline Text 3.0 首先使用Subline Text打出HTML的基本结构代码
!DOCTYPE html
html langchhead title我的网页标题/title/headbodyh1内容标题/h1p 钱钱钱/p/body
/html保存此html文件将文件的路径复制在浏览器中打开 这里我的 文件路径为F:/AllProject/HTML/1 demo.html 我们可以看到浏览器显示如下内容我们和代码进行对比可以找到对应关系红色箭头所示
接下来我们逐句解释上面输入的代码
!DOCTYPE html !--告诉浏览器接下来所有的内容是HTML代码需要使用HTML解析器识别.--html langch !--指的是 HTML 语言中的语言属性其中 ch 表示中文 (Chinese)。它用于告诉浏览器该文档中使用的语言是中文.--html
!--告诉html这个双标签里面的内容就是网页内容--
/htmlhead
!--告诉浏览器这是html网页头部信息中间的内容就是显示的头部信息。--/head title
!--这是head子标签告诉浏览器这是网页标题。--/title body
!--这是网页正文内容。--/body meta charsetUTF-8/ !--这是告诉浏览器使用utf8编码--二 、 HTML的语法只有两种标签注释
2.1 标签的定义
HTML中最核心的就是标签[tag],表示HTML网页内容的最基本组织单元作用是告诉浏览器当前标签中的内容有什么作用要以什么格式展示类似语文里面的标点符号。
标签从书写结构上分为两种单标签和双标签。
单标签 书写格式 标签名 标签名/ 标签名 属性名”属性“
常见单标签
标签名描述meta元信息标签linkcss外观样式的外链引入标签类似python的importimg图片标签input输入框标签
双标签 有成对标签名出现有开始标签和结束标签的就是双标签。 书写格式 标签名标签内容/标签名 标签名 属性名“属性” /标签名
常见双标签
标签名描述h1/h1网页的一级标签h2/h2网页的二级标签……h6/h6网页的六级标签p/p网页的段落a/a网页的超链接div/div块级结构标签span/span行级结构标签form/form表单标签表示网页的一个提供用户输入数据的表单ul/ul无序列表结构标签表示网页的一个内容列表li/li列表项目标签table/table表格标签
备注不懂div,form,ul,li没关系我也不懂需要用到的时候在了解就可以。
常见标签的使用
HTML中的标签是HTML语法提供的所以每一个标签都是固定标签名 !--HTML中的标签是HTML语法提供的所以每一个标签都是固定标签名--!DOCTYPE htmlheadtitle网站标题名称/title/headbodyh1h1标题常用于网站的logo网站标题/h1h2h2标题常用于网站的板块标题,栏目标题/h2h3h3标题常用于网站的板块标题,栏目标题/h3h4h4标题常用于网站的附加内容标题或者文章的标题/h4h5更小级别标题基本用不到/h5h6更小级别标题基本用不到/h6pp-正文/p/body/html标签的作用是展示内容但有时候内容并非文本的而且文本的展示需要附加一些额外的效果就需要使用标签的属性来声明。 标签从组织结构上分为两种内容标签和结构标签。
内容标签主要包含和展示内容部分标签可以包含其他的内容标签。结构标签主要用于包含其他标签一般结构标签内部不会编写网页内容怕[图片音频视频文本等]。
2.2 标签的属性慢慢更新
标签的属性的使用 单标签 标签名 属性名”属性值“ 属性名/ 双标签 标签名 属性名”属性值“ 属性名/ 标签内容 /标签
单标签是没有内容的但有属性属性的写法用两种
普通属性属性和属性值用“”连接布尔属性只有属性名没有属性值当标签里面写上属性名值为True标签没有属性名则为false
标签属性单标签无内容依赖属性展示内容
属性语法描述imgimg src”图片地址“插入图片inputinput type”number“输入框标签[数值输入框]只可输入数字inputinput type”password“输入框标签[密码输入框]可输入不可见密码inputinput type”text“输入框标签[单行文本输入框]可输入任何文本不可回车inputinput type”datatime.local“输入框可选择时间br/br/换行标签浏览器遇到br标签会自动换行hrhr横线alignalignleft文本的对齐方式left左对齐right右对齐center居中对齐 。titletitle补充提示表示当前标签的补充提示当用户把鼠标放在当前标签上则自动显示title属性值。herfa herf地址超链接可以进行页面跳转 下载文件 调用或唤醒程序等操作
2.3 超链接的常见用法
页面跳转、下载文件、调用或唤醒系统程序
页面跳转 如果href的值是网址则可以跳转到指定页面 如果href的值是一个浏览器无法直接展示的内容格式浏览器会自动下载路径对应的内容 如果href的值是一个浏览器可以直接识别并展示的内容格式用户可以右键对 当前数值的内容进行另存为下载
案例代码讲解网页输出将进酒及译文
2.4 标签详细讲解
2.4.1 列表标签
列表标签是一种结构标签可以让网页内容形成列表格式。 列表list在HTML中提供了三种
无序列表UnorderList,ul 没有序号内容不分先后的
!--网页的列表内容一般由列表标签组织展示ulli是组合ul标签与li标签之间不要写标签或内容--
bodyulli无序列表第1个列表项/lili无序列表第2个列表项/lili无序列表第3个列表项/li
/body在浏览器中显示就是这样的无序列表 此外列表可以嵌套使用比如 bodyulli第一个列表内容ulli第二个列表内容/li li第二个列表内容/li li第二个列表内容/li /ul/lili无序列表第2个列表项/lili无序列表第3个列表项/li
/body在浏览器中输出的网页就是这样
有序列表OrderListol 有序列表和无序列表很接近只不过会排序。例如
body
olli第一个列表内容olli第二个列表内容/li li第二个列表内容/li li第二个列表内容/li /ol/lili无序列表第2个列表项/lili无序列表第3个列表项/li
/ol/body定义列表DefineListdl 定义列表标签为dl,每一项都是由dt和dd组成dt表示定义内容的标题dd表示对上一个dt中标题内容进行描述 例如
!DOCTYPE html
headmeta charsetutf-8title/title
/head
body
dldt第一个定义标题/dtdd对第一个标题的解释/dddd对第一个标题的补充解释/dddd对第一个标题的补充解释/dd/dt
/dl/body
/html在新版的HTML5中还有一种菜单列表menuList):
!DOCTYPE html
headmeta charsetutf-8title/title
/head
body
menuli首页/lili商品分类/lili会员中心/li
/menu/body
/html运行效果截图
几种标签中最常用的只有
标签和标签其他的两种标签基本不用。 不管是哪一种实际上都是列表因此都有列表项目List Item除了定义列表结构特殊意外其他的两种列闭包都有列表项目
2.4.2 表单标签
HTML最终的标签之一主要是提供了输入框或按钮等标签提供给用户进行交互输入数据将来表单可以提交到指定服务端程序中进行数据处理。
书写格式 表单内容
常用属性语法描述actionform actionURL/form表单处理程序的URL地址methodform methodpost指定提交表单数据时要使用的 HTTP 方法。enctypeform enctypevalue只有 method“post” 时才使用 enctype 属性。规定在将表单数据发送到服务器之前如何对其进行编码。
样例
!DOCTYPE html
html
headmeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1title表单标签/title
/head
bodyform action表单处理程序的URL地址 methodpostlabel账号input typetext nameusername placeholder请输入账号/labelbrlabel密码input typepassword namepassword placeholder请输入密码/labellabel年龄input typeage nameage placeholder请输入年龄/labellabel出生年月input typedate name/label/form
/body
/html表单项的常用属性
属性名描述name表示当前表单项的只的变量名用于提供服务端获取本次提交的数据项value表示当前表单项的值如果值在代码中提前设置了则为默认值。type表示input框的类型disabled布尔属性设置当前输入框是否被禁用maxlength设置当前输入框[textarea,input]中最大内容长度multiple允许文件上传框上传多个文件
2.4.3表格标签
表格系列标签主要是可以数据以表格的格式展示出来但是现在table表格已经很少使用了而是改用divcss实现更漂亮的表格
标签描述table/table表示网页的一个表格 内部直接嵌套的只能是tr标签tr/tr表示表格的一行td/td表示表格的一个单元格也可以是一列可以包含其他标签或内容 表示 表格的表头的一个单元格
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/title
/head
bodytable border trtd1行1列/tdtd1行2列/td/trtrtd2行1列/tdtd2行2列/td/tr/table
/body
/html早期 很多网页为了排版方便就是采用table布局但是这种方式现在已经没人使用了都是使用div标签css样式来排版这种方式更加容易入门更加容易维护代码更加美观。
2.4.4 媒体标签
之前说过所谓的超文本 就是 超出文本范围的 文档所以我们在网页编写过程中经常需要在网页中展示或播放一些媒体资源例如 图片音频视频。
标签语法描述imgimg src alt“”src是 source的缩写表示 当前图片的资源路径HTML中可以展示网络连接中的图片资源也可以本地资源。alt补充说明 当图片的路径不正确或者图片无法正确显示的时候 浏览器会展示alt中的文字audioaudiosource src type/audio音频videovideo/video视频
2.4.5实体字符
在HTML网页中因为标签把本身占用了一些特殊符号而且在HTML代码 是不识别空格的因此我们要在网页中展示特殊符号或空格就需要使用实体字符
实体符号实体编码lt;gt;空格;nbsp;lt;quot;×times;÷divide;
其余具体的请自己查下
未完待续…
