门户网站建设有哪些界面设计风格,合肥网络公司seo建站,平面设计好找工作不,有服务器自己怎么做网站目录 HTML简介HTML文件结构常用文本标签标题标签段落标签有序列表和无序列表表格标签 HTML属性a标签—超链接标签图片标签 HTML区块块元素与行内元素 HTML表单 HTML简介
HTML全称是Hypertext Markup Language超文本标记语言。 HTML的作用#xff1a; 为网页提供结构#xff… 目录 HTML简介HTML文件结构常用文本标签标题标签段落标签有序列表和无序列表表格标签 HTML属性a标签—超链接标签图片标签 HTML区块块元素与行内元素 HTML表单 HTML简介
HTML全称是Hypertext Markup Language超文本标记语言。 HTML的作用 为网页提供结构告诉浏览器哪部分是标题哪些部分是段落哪些部分是列表等。 HTML如何告诉浏览器哪些部分是标题、段落或列表呢 HTML通过标签或者叫元素来定义文本、图像、链接等等。HTML标签是由尖括号包围的关键字。 HTML标签可以通过属性来提供更多信息标签通常成对出现 包括开始标签和结束标签拥有开始标签和结束标签的也成为双标签内容处于这两个标签之间。
双标签
p这是一个段落。/p !--段落标签--
hl这是一个标题。/hl !--一级标题标签--
a href#这是一个超链接。/a !--超链接标签--单标签没有结束标签
input typetext !--input标签--
br //换行标签
hr //分割线标签单标签与双标签的区别 单标签用于没有内容的元素双标签用于有内容的元素。
HTML文件结构 使用vscode生成完整的HTML文件结构 在空白的HTML文档首行输入*!Tab*就会得到一个完整的HTML文档结构名字叫做Document。 如下图所示 鼠标右键点击Open with live Server 使用浏览器打开的界面如下 将文档名字改为“HTML 练习”再次用浏览器打开页面结果如下 此时文件目录的搭建已经基本完成了。
常用文本标签
标题标签 h1一级标题标签/h1h2二级标题标签/h2h3三级标题标签/h3h4四级标题标签/h4h5五级标题标签/h5h6六级标题标签/h6段落标签 p这是一个段落标签。/pp更改字体样式b字体加粗/b/pp更改字体样式strong字体加粗/strong/pp更改字体样式i斜体/i/pp更改字体样式u下划线/u/pp更改字体样式s删除线/s/p有序列表和无序列表
无序列表
!--无序列表ul--ulli无序列表元素1/lili无序列表元素2/lili无序列表元素3/li/ul有序列表 !--有序列表ol--olli有序列表元素1/lili有序列表元素2/lili有序列表元素3/li/ol表格标签 !--表格标签--h1th--table header/h1h1tr--table row/h1h1td--table data/h1tabletrthtile 1/ththtile 2/ththtile 3/th/trtrtd元素1/tdtd元素2/tdtd元素3/td/trtrtd元素11/tdtd元素22/tdtd元素33/td/trtrtd元素12/tdtd元素21/tdtd元素31/td/tr/table同时也可以为我们的表格添加边框
!--表格标签--h1th--table header/h1h1tr--table row/h1h1td--table data/h1table border1 !--1代表表格宽度,border是table标签的一个属性--trthtile 1/ththtile 2/ththtile 3/th/trtrtd元素1/tdtd元素2/tdtd元素3/td/trtrtd元素11/tdtd元素22/tdtd元素33/td/trtrtd元素12/tdtd元素21/tdtd元素31/td/tr/tableHTML属性
HTML属性用于定义元素的行为和外观以及与其他元素的关系。 基本语法
开始标签 属性名“属性值”每个HTML元素可以具体不同的属性。 p iddescribe classsection这是一个段落标签。/pa hrefhttps://www.baidu.com这是一个超链接标签。/a属性名称不区分大小写属性值对大小写敏感。 img srcexample.jpg altimg SRCexample.jpg altimg srcEXAMPLE.JPG alt!--前两者相同后两者完全不一样--a标签—超链接标签 a hrefhttps://www.baidu.com这是第一个段落标签。/abr!--换行标签--a hrefhttps://www.baidu.com target_blank这是第二个段落标签。/ahr!--水平分割线--target属性——决定链接的打开方式。 target属性有四个属性值 _blank:表示链接在新的窗口或者标签页中打开。 _self:是一个默认值表示链接在当前窗口或者标签页中打开。 _parent:表示链接会在父窗口和父框架中打开。 _top:表示链接会在顶层窗口或顶层框架中打开。
图片标签 img srclogo.png.jpeg alt也可以直接粘贴图片的链接。 alt后面的值可以不留白如果图片无法显示那么在alt的值输入该图片无法显示结果如下 img内还可以设置图片的高度和宽度 img srclogo.png.jpeg alt width100 height100HTML区块
有些元素在浏览器中是独占一行的而其他元素不能和这个元素位于同一行。 独占一行是指在浏览器中独占一行而不是在vscode代码文件中独占一行。根据元素的表现形式分为行内元素和块元素。
块元素与行内元素
块级元素通常用于组织和布局页面的主要结构和内容例如段落、标题、列表、表格。他们用于创建页面的主要部分。将内容分隔成逻辑块。 1、块级元素通常会从新行开始并占据整行的宽度。因此他们会在页面上呈现为一块独立的内容块。 2、块元素可以包含其他块级元素和行内元素。 3、常见的块级元素 div p h1到h6 ul ol li table form等 行内元素 通常用于添加文本样式或为文本中的一部分应用样式。他们可以在文本中插入小的元素例如超链接、强调文本等。 1、行内元素通常在同一行内呈现不会独占一行。 2、他们只占据其内容所需的宽度而不是整行的宽度。 3、 行内元素不能包含块级元素但可以包含其他行内元素。 4、常见的行内元素包括 span a strong em img br input等 div标签 div标签是一个块级标签通常用于创建一个可以包含其他元素的容器块也可以说是创建一个页面的布局结构。 span标签 用于内联样式化文本给文本的一部分应用样式或者标记。
在这里插入代码片!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleHTML区块/title
/head
bodydiv classnava href#链接1/aa href#链接2/aa href#链接3/aa href#链接4/aa href#链接5/a/divdiv classcontent/divh1文章标题/h1p文章内容/pp文章内容/pp文章内容/pp文章内容/pspan这是一个span标签。/spanspan这是一个span标签。/spanspan这是一个span标签。/spanspan这是一个span标签。/span
/body
/htmlHTML表单
form标签 form标签是表单中的容器。如果要创建一个表单那么只需要将表单中的所有元素必须包含在form标签内部。 input标签 type属性 type属性默认值text会默认出现文本框 forminput typetext/formtype属性placeholder作用是可以在文本框中填写一些你想要让他显示的字。 forminput typetext placeholder请输入内容/formtype属性value规定了填写的值而placeholder只是在文本框中给一个提示。 forminput typetext placeholder请输入内容brbrinput typetext value请输入内容/form在form表单中有专门为input做标记的标签label仅限于与input对应使用。 单选框 formlabel用户名/labelinput typetext placeholder请输入内容brbrlabel密码/labelinput typetext value请输入内容brbrlabel for性别/labelinput typeradio男input typeradio女input typeradio其他/form实现单选只需要在input内部加name属性。 formlabel用户名/labelinput typetext placeholder请输入内容brbrlabel密码/labelinput typetext value请输入内容brbrlabel for性别/labelinput typeradio namegender男input typeradio namegender女input label标签在创建时会自动添加一个for属性for属性可以把label标签绑定到input元素。 多选框 多选对应的type属性值是checkbox。 formlabel用户名/labelinput typetext placeholder请输入用户名brbrlabel forpwd密码/labelinput typepassword idpwd value请输入密码brbrlabel性别/labelinput typeradio namegender 男input typeradio namegender 女input typeradio namegemder 其他label爱好/labelinput typecheckbox namehobby唱歌input typecheckbox namehobby跳舞input typecheckbox namehobbyRAPinput typecheckbox namehobby弹琴brbr/formformlabel用户名/labelinput typetext placeholder请输入用户名brbrlabel forpwd密码/labelinput typepassword idpwd value请输入密码brbrlabel性别/labelinput typeradio namegender 男input typeradio namegender 女input typeradio namegemder 其他label爱好/labelinput typecheckbox namehobby唱歌input typecheckbox namehobby跳舞input typecheckbox namehobbyRAPinput typecheckbox namehobby弹琴brbrinput typesubmit/formform action#/form
