网站开发的后期维护,北京住房城乡建设部网站首页,wordpress 关闭网站,获取网站访客qq号码程序下载目录
HTML
标签
单标签
双标签
常见标签的使用 标题和段落 换行、分隔、超链接
列表标签
表单标签 属性 属性的使用 HTML HTML#xff08;Hyper Text Markup Language#xff09;#xff0c;超文本标记语言#xff0c;是一门标记语言#xff0c;不是编程语言Hyper Text Markup Language超文本标记语言是一门标记语言不是编程语言所以它没有变量也没有任何语句结构。 所谓超文本即超越了文本范畴的文档格式普通文本只能显示文字而超文本可以显示各种的媒体资源例如html网页doc文档xls文档等 HTML发展至今一共经历了6个版本HTML1.0HTML2.0HTML3.0HTML4.0XHTML1.0过渡版本HTML5.0现行 HTML在4.0版本1999年时W3C组织与浏览器厂商发生过一次分歧W3C组织认为HTML作为标记语言本身语法不够严谨乱写HTML代码也不会报错所以发布了新的一门语法更加严谨的标记语言XML但XML比HTML更为复杂、难以使用所以浏览器厂商想要用XML代替HTML实际上需要耗费极大的成本且当时全球有上百万的网站使用的都是HTML所以如果想要直接从HTML转换到XML很多公司是难以接受的因此在2000年W3C推出了HTML转换成XML的过渡版本即XHTML1.0版本这个版本既有HTML的语法也兼顾了XML的部分语法但是在XHTML2.0版本推出时浏览器厂商与W3C闹翻了浏览器厂商不再和W3C合作而是自己组织了一个新的HTML标准团队WHATWG发展HTML5.0版本。在随后几年2004年正式推出了HTML5.0试验版本。在2014年W3C迷途知返重新与浏览器厂商的团队合作在2014年重新发布HTML5.0版本同时也宣告XML代替HTML的计划失败。最终XML慢慢变成了软件的配置文档数据转换格式的结构类似于json的作用 HTML的代码必须写在.html 或 .htm文档 中 .htm的出现是基于计算机发展的历史遗留问题早期计算机的存储能力不强所以针对文件名的命名存在8.3规范要求文件名必须在8个字符内文件后缀必须是3个字符内。因为.html是4个字符不符合8.3规范因此改成了.htm。类似的还有图片格式中的.jpeg在早期为.jpg格式 标签 表示HTML网页内容的一个最基本的组织单元类似于语文中的标点符号 标签的作用告诉浏览器当前标签中的内容是什么以什么格式在页面中进行呈现 标签从书写结构上分为2种单标签和双标签标签从组织结构上分为2种内容标签和结构标签 内容标签主要包含和展示内容的部分标签可以包含其他的内容标签结构标签主要用于包含其他标签一般结构标签内部不会直接包含网页内容文本、图片、视频、音频等 单标签 单标签只有一个标签名的标签的标签格式 标签名
标签名 /
标签名 属性名属性值 属性名/网页中的常见单标签
标签名描述meta元信息标签linkcss外观样式的外链引入标签类似于import可以导入css代码到html文档中img图片标签input输入框标签br /换行标签浏览器遇到br标签就会自动进行内容换行类似于/r /nhr /分格线标签代表分隔内容的一条横线 双标签 双标签成对标签名出现有开始标签和结束标签的标签格式 标签名 内容 /标签名 网页中的常见双标签
标签名描述h1/h1网页的一级标题h2/h2网页的二级标题......h6/h6网页的六级标题p/p网页的段落a/a网页超链接div/div块级结构标签span/span行级结构标签form/form表单标签表示网页的一个提供给用户输入数据的表单ul/ul无序列表结构标签表示网页的一个内容列表li/li列表项目标签table/table表格标签表示网页的一个表格 常见标签的使用 注HTML中的标签是由HTML语法提供的所以每个标签名都是固定的 而XML中的标签是可以自定义的但XML中的语法更为严谨 标题和段落
!DOCTYPE html
html langen
headmeta charsetUTF-8titleHTML常见标签的使用/title
/head
bodyh1h1标题:常用于网站的logo、标题/h1h2h2标题:常用于网站的模块标题、栏目标题/h2h3h3标题:常用于网站的模块标题、栏目标题/h3h4h4标题:常用于网站的附加板块标题或是文章的标题/h4h5h5标题:更小级别的标题,基本用不到/h5h6h6标题:更小级别的标题,基本用不到/h6pp段落/p/body
/html 换行、分隔、超链接
!DOCTYPE html
html langen
headmeta charsetUTF-8title换行br/分隔符hr/超链接a/title
/head
bodya hrefhttps://baike.baidu.com/item/将进酒/5312 title将进酒h1将进酒/h1/ap君不见黄河之水天上来奔流到海不复回。br君不见高堂明镜悲白发朝如青丝暮成雪。br人生得意须尽欢莫使金樽空对月。br天生我材必有用千金散尽还复来。br烹羊宰牛且为乐会须一饮三百杯。br岑夫子丹丘生将进酒杯莫停。br与君歌一曲请君为我倾耳听。br/phrh2译文/h2p你可见黄河水从天上流下来波涛滚滚直奔向大海不回还。br你可见高堂明镜中苍苍白发早上满头青丝晚上就如白雪。br人生得意时要尽情享受欢乐不要让金杯空对皎洁的明月。br天造就了我成材必定会有用即使散尽黄金也还会再得到br煮羊宰牛姑且尽情享受欢乐一气喝他三百杯也不要嫌多。br岑夫子啊丹丘生啊快喝酒啊不要停啊。br我为在坐各位朋友高歌一曲请你们一定要侧耳细细倾听。br/p
/body
/html 超链接的2中常用用法页面跳转、下载文件
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body!--页面跳转:如果href的值是网络页面时跳转到指定页面--a hrefhttp://baidu.com百度一下/abr!--页面跳转:如果href的值是本地地址时跳转到本地的内部网页--a href./1_3_4-超链接页面.html跳转到本地页面/abr!--下载资源:当href的值是一个浏览器无法直接展示的内容格式时浏览器会自动下载当前路径对应的内容--a href./html点击下载/a!--下载资源:当href的值是一个浏览器可以直接识别并展示的内容格式时用户可鼠标右键对当前href的值进行另存为下载--a href./attribute.png点击下载图片(使用“鼠标右键另存为”的方式)/a
/body
/html 实际上页面跳转也是下载文件的一种因为用户能在浏览器里面看到的所有内容实际上都是经过浏览器下载到本地用户才能看到。可以通过F12打开开发者工具-network网络查看 列表标签 列表是一种结构标签可以让网页的内容形成列表格式 列表标签在HTML中提供了3种
无序列表UnorderListul !DOCTYPE html
html langen
headmeta charsetUTF-8title无序列表/title
/head
body!--网页列表内容一般由列表标签组织展示ulli组合ul标签与li标签之间尽量不要写标签或是内容若列表中有内容一定要写在li中间--ul这是ul与li,不会形成一个列表项li无序列表,第1个列表项/lili无序列表,第2个列表项/lili无序列表,第3个列表项/li/ulhr!-- 列表的嵌套,可嵌套多层 --ulli1ulli1.1/lili1.2/lili1.3/li/ul/lili2ulli2.1/lili2.2ulli2.3.1/lili2.3.2/lili2.3.3/li/ul/li/ul/li/ul/body
/html 有序列表OrderListol !DOCTYPE html
html langen
headmeta charsetUTF-8title有序列表/title
/head
bodyolli有序列表第1个列表项/lili有序列表第2个列表项/lili有序列表第3个列表项/li/olhrolli1olli1.1/lili1.2/li/ol/lili2olli2.1/lili2.2/li/ol/li/ol/body
/html 定义列表DefineListdl 定义列表标签为dl
定义列表的每一个定义项由dt(Define Title) 和 dd(Define Description)组成
dt表示定义项的标题
dd表示对上一个dt中的标题内容进行描述或是补充说明!DOCTYPE html
html langen
headmeta charsetUTF-8title定义列表/title
/head
body!--定义列表仅能用在--p定义列表标签为dlbr定义列表的每一个定义项由strongdt(Define Title)/strong 和 strongdd(Define Description)/strong组成brdt表示定义项0的标题brdd表示对上一个dt中的标题内容进行描述或是补充说明/pdldtHTML/dtdd超文本标记语言/ddddW3C标准中的结构标准/dddtCSS/dtdd层叠样式表/ddddW3C标准中的外观标准/dddtJavaScript/dtdd简称JS/ddddW3C标准中的行为标准/dd/dl/body
/html 除了定义列表结构特殊以外其他的2种列表都为列表项目List Itemli 表单标签 表单标签是HTML中最终的标签之一主要是提供了输入框或者按钮等标签提供给用户进行交互输入数据。将来表单可以提交到指定服务端程序中进行数据处理。 input typetext 文本 label账号:input typetext nameusername value placeholder请输入账号
/label 当valueH时默认该输入框中的内容为H placeholder可理解为提示语 typepassword 密码 label密码:input typepassword namepwd value placeholder请输入密码
/label typenumber 数值 label年龄:input typenumber nameage value placeholder请输入年龄
/label typemonth 出生年月 label出生年月:input typemonth nameborn
/label typetel 电话号码 label电话号码:input typetel nametelephone placeholder请输入电话号码
/label typeradio 单选框 性别:
labelinput typeradio namesex value0男/label
labelinput typeradio namesex value1女/labeltypecheckbox 复选框 爱好:
labelinput typecheckbox namehobbies value0篮球/label
labelinput typecheckbox namehobbies value1滑板/label
labelinput typecheckbox namehobbies value2撸猫/label
labelinput typecheckbox namehobbies value3吉他/label typefile 上传文件 上传文件:
input typefile typesubmit 提交 textarea
个性签名:br
textarea namedescription rows10 cols30/textarea
selectoptionoptgroup
城市:
selectoptgroup label云南option value0昆明/optionoption value1曲靖/option/optgroupoptgroup label河南option value2郑州/optionoption value3安阳/option/optgroupoption value4其他/option
/select
lable !DOCTYPE html
html langen
headmeta charsetUTF-8title表单标签/title
/head
bodyform actionhttp://httpbin.org/post methodpost enctypeapplication/x-www-form-urlencodedlabel账号:input typetext nameusername value placeholder请输入账号/labelbrlabel密码:input typepassword namepwd value placeholder请输入密码/labelbrlabel电话号码:input typetel nametelephone placeholder请输入电话号码/labelbrlabel年龄:input typenumber nameage value placeholder请输入年龄/labelbrlabel出生年月:input typemonth nameborn/labelbr性别:labelinput typeradio namesex value0男/labellabelinput typeradio namesex value1女/labelbr爱好:labelinput typecheckbox namehobbies value0篮球/labellabelinput typecheckbox namehobbies value1滑板/labellabelinput typecheckbox namehobbies value2撸猫/labellabelinput typecheckbox namehobbies value3吉他/labelbr城市:selectoptgroup label云南option value0昆明/optionoption value1曲靖/option/optgroupoptgroup label河南option value2郑州/optionoption value3安阳/option/optgroupoption value4其他/option/selectbr上传文件:input typefile namefilebr个性签名:brtextarea namedescription rows10 cols30/textareabrinput typesubmit/form
/body
/html 属性 标签的作用就是用于展示内容但是内容有时候并非文本且文本的展示需要附加一些额外的效果时就需要使用标签的属性来声明。不管是单标签还是双标签都有属性[Attribute]。 标签的属性有两种 普通属性属性名与属性值使用关联属性值使用单引号或双引号围住 布尔属性只有属性名没有属性值或是属性值只有True或False (不是直接在后面写上True或False而是当标签中写上这个属性名则其值表示为True反之为False) 属性的使用
!DOCTYPE html
html langen !--lang就是HTML标签的属性代表当前网页的默认语言language为english--
headmeta charsetUTF-8 !-- charset是meta元信息标签的属性表示当前网页的编码是utf-8--titleHTML常见标签的使用/title
/head
body!-- 双标签的属性 --!--align:文本的对齐方式 left左(默认)、right右、center居中title:表示当前标签的补充提示当用户把鼠标放在当前标签上方则会自动显示title属性的值--h1 alignleft title提示文本h1标题:常用于网站的logo、标题/h1h2 aligncenterh2标题:常用于网站的模块标题、栏目标题/h2h3 alignrighth3标题:常用于网站的模块标题、栏目标题/h3h4h4标题:常用于网站的附加板块标题或是文章的标题/h4h5h5标题:更小级别的标题,基本用不到/h5h6h6标题:更小级别的标题,基本用不到/h6pp段落/p!-- 单标签的属性单标签没有内容需要依靠属性来展示对应的内容--img src./attribute.png !--src:需要展示图片的地址--input typenumber !--输入框标签[数值输入框]number表示只允许当前输入框中的内容为数值--input typepassword !--输入框标签[密码输入框]password表示输入的任何内容都是密码所以输入的内容不会被展示出来 --input typetext !--输入框标签[单行文本输入框]text表示只允许输入一行内容不能回车--input typedatetime-local !--时间输入框只需要用户选择时间日期--
/body
/html input typedatetime-local
