网站建设相关法律法规,wordpress调用菜单,彩票网站开发制作,零投入开网店文章目录 1.什么是HTML、CSS2.HTML的语法特点3.HTML的快速体验4.开发工具推荐#xff1a;VS Code5.基本标签样式5.1.标题5.1.1.标题排版5.1.2.标题样式5.1.3.超链接 5.2.正文5.2.1.正文排版5.2.2.页面布局 表格、表单标签表格标签表单标签 1.什么是HTML、CSS HTML即超文本… 文章目录 1.什么是HTML、CSS2.HTML的语法特点3.HTML的快速体验4.开发工具推荐VS Code5.基本标签样式5.1.标题5.1.1.标题排版5.1.2.标题样式5.1.3.超链接 5.2.正文5.2.1.正文排版5.2.2.页面布局 表格、表单标签表格标签表单标签 1.什么是HTML、CSS HTML即超文本标记语言 超文本超越了文本的限制比普通文本更强大。除了文字信息还可以i当以图片、音频、视频等内容 标记语言由标签构成的语言 HTML标签都是预定义好的。 HTML代码直接在浏览器中运行HTML标签由浏览器解析。 CSS CSS层叠样式表用于控制页面的样式表现。 官方文档网址w3school 在线教程
2.HTML的语法特点
html中的标签不区分大小写html的标签属性值使用单引号或双引号均可html的语法结构比较松散
3.HTML的快速体验
新建文本文件后缀名改为.html编写html结构标签在body中填写内容
示例代码
htmlheadtitle标题头/title/headbody身体/body/html4.开发工具推荐VS Code
安装步骤网上很容易找到
5.基本标签样式
5.1.标题
5.1.1.标题排版 图片标签img src:指定图片的url绝对路径/相对路径 width:图像的宽度px像素/%相对于父元素的百分比 height:图像的高度px像素/%相对于父元素的百分比 一般width或height只设置一个另外一个会等比例缩放 路径的书写方式 绝对路径 1.绝对磁盘路径 2.绝对网络路径在浏览器中右键图片-在新标签页中打开图像得保证互联网上有这张图片并且保证打开的时候是联网 的 相对路径推荐写法 ./当前目录可以省略 ../上一级目录不可以省略 img src./img/news_logo.png width300px height100px 标题标签h1 - h6 水平线标签hr 没有任何意义的标签span 该标签是一个在开发网页时会大量用到的没有语义的布局标签 特点一行可以显示多个组合行内元素宽度和高度由内容撑开
5.1.2.标题样式 CSS引入方式 行内样式写在标签的style属性中不推荐 h1 style...
/h1内嵌样式写在style标签中可以写在页面任何位置但通常约定写在head标签中 style.../style外联样式写在一个单独的.css文件中需要通过link标签在网页中引入 .css link href 颜色的表示形式 表示方式表示含义取值关键字预定义的颜色名red,green,blue(这三种颜色是三原色)rgb表示法红绿蓝三原色每项取值范围0-255rgb(0,0,0),rgb(255,255,255),rgb(255,0,0)十六进制表示法#开头将数字转换称十六进制表示#000000,#ff0000,#cccccc,简写#000#ccc CSS选择器用来选取需要设置样式的元素标签 元素选择器 元素名称 {color: red;
}元素名称要设置的元素/元素名称id选择器 #id属性值 {color:red;
}元素名称 指定id 要设置的元素/元素名称类选择器 .class {color: red;
}元素名称 指定类别class要修改的元素/元素名称优先级id选择器 类选择器 元素选择器 css属性 color设置文本的颜色font-size字体大小注意得加px
5.1.3.超链接
标签
a href... target... 名称/a属性 href指定资源访问的urltarget指定在何处打开资源链接 _self默认值在当前页面打开_blank在空白页面打开 CSS属性 text-decoration规定添加到文本的修饰none表示定义标准的文本color定义文本的颜色
5.2.正文
5.2.1.正文排版 视频标签video src:规定视频的urlcontrols:显示播放的控件width:播放器的宽度height:播放器的高度 音频标签audio src规定音频的urlcontrols显示播放控件 段落标签p 文本加粗标签b / strong 换行标签br CSS样式 line-height设置行高text-indent定义第一个行内容的缩进text-align规定元素中的文本的水平对齐方式 注意 在HTML中无论输入多少个空格只会显示一个。可以使用空格占位符nbsp;
5.2.2.页面布局
盒子页面中所有的元素标签都可以看作是一个盒子由盒子将页面中的元素包含在一个矩形区域内通过盒子的视角更方便的进行页面布局盒子模型的组成从内向外内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)布局标签在实际开发网页中会大量频繁的使用div和span这两个没有语义的布局标签。标签div、span特点 div标签 一行只显示一个(独占一行)宽度默认是父元素的宽度高度默认由内容撑开可以设置宽高(width, height) span标签 一行可以显示多个宽度和高度默认由内容撑开不可以设置宽高(width, height) CSS属性 width设置宽度height设置高度border设置边框属性padding内边距margin外边距注意 如果只需要设置某一个方位的边框、内边距、外边距可以在属性名后加上-位置如padding-left
表格、表单标签
表格标签
场景在网页中以表格行、列形式整齐展示数据标签
标签描述属性/备注table定义表格整体可以包裹多个trborder规定表格边框的宽度 width规定表格的宽度 cellspacing:规定单元之间的空间tr表格的行可以包裹多个tdtd表格单元格普通可以包裹内容如果是表头单元格可以替换为th,这个th标签有加粗居中的效果
表单标签
场景在网页中主要负责数据采集功能如注册、登录等数据采集。标签form表单项不同类型的input元素、下拉列表、文本域等。 input:定义表单项通过type属性控制输入形式 type取值 text默认值定义单行的输入字段password定义密码字段radio定义单选按钮checkbox定义复选框file定义文件上传按钮data/time/datatime-local定义日期/时间/日期时间number定义数字输入框email定义邮件输入框hidden定义隐藏域submit/reset/button定义提交按钮/重置按钮/可点击按钮 select:定义下拉列表option定义列表项textarea:定义文本域 属性 action:规定当提交表单时项何处发送表单数据URL。如果不指定默认提交到当前页面method:规定用于发送表单数据的方式。GET、POST get:在url后面拼接表单数据比如?username12age213url长度有限制大小有限制默认值post在消息体请求体中传递的参数大小无限制的 注意表单项必须有name属性才可以提交
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title表单项标签/title
/headbodyform action methodpost姓名input typetext namename brbr密码input typepassword namepassword brbr性别 labelinput typeradio namegender value1男/labellabelinput typeradio namegender value2女/label brbr爱好labelinput typecheckbox namelike value1Java/labellabelinput typecheckbox namelike value2C/labellabelinput typecheckbox namelike value3Python/labellabelinput typecheckbox namelike value4c语言/labelbrbr文件input typefile namefile brbr生日input typedate namebirthday brbr时间input typetime nametime brbr日期时间input typedatetime-local namedatatime brbr邮箱input typeemail nameemail brbr电话input typenumber namephonenumber brbr学历select namedegreeoption value---------请选择---------/optionoption value1大专/optionoption value2本科/optionoption value3硕士/optionoption value4博士/option/selectbrbr描述textarea namedescription cols30 rows10/textarea brbrinput typehidden nameid value1!-- 表单常见按钮 --input typebutton value可点击按钮 nbsp;nbsp;input typereset value重置按钮nbsp;nbsp;input typesubmit value提交按钮/form
/body/html
