北京专业网站的建设,live2d wordpress,网站托管维护代运营,企业展示网站案例目录 1、HTML简介
2、CSS简介
2.1选择器
2.1.1标签选择器
2.1.2类选择器
2.1.3层级选择器(后代选择器)
2.1.4id选择器
2.1.5组选择器
2.1.6伪类选择器
2.2样式属性 2.2.1布局常用样式属性
2.2.2文本常用样式属性 1、HTML简介
超文本标记语言HTML是一种标记语言…目录 1、HTML简介
2、CSS简介
2.1选择器
2.1.1标签选择器
2.1.2类选择器
2.1.3层级选择器(后代选择器)
2.1.4id选择器
2.1.5组选择器
2.1.6伪类选择器
2.2样式属性 2.2.1布局常用样式属性
2.2.2文本常用样式属性 1、HTML简介
超文本标记语言HTML是一种标记语言用于描述网页的结构和内容。通过使用各种标签和元素我们可以定义标题、段落、图像、链接和表格等网页元素。HTML的语法简单直观容易上手。 标题标签
html定义 HTML 文档的根元素包括 head 和 body。
head定义文档头部包含元数据和其他文档级设置如标题、样式表和脚本等。
body定义文档的主体部分包含文档的内容。
h1 - h6定义标题从大到小分别为一级标题到六级标题。 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body h1欢迎来到我的网页/h1 p这是一段介绍文本。/p
/body
/html
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body h1一级标题/h1 p这是第一个一级标题下的段落。/p h2二级标题/h2 p这是第一个二级标题下的段落。/p h3三级标题/h3 p这是第一个三级标题下的段落。/p h4四级标题/h4 p这是第一个四级标题下的段落。/p h5五级标题/h5 p这是第一个五级标题下的段落。/p h6六级标题/h6 p这是第一个六级标题下的段落。/p
/body
/html
p定义段落。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body p这是一个段落。/p p这是另一个段落。/p
/body
/html
a定义超链接可以跳转到其他页面或锚点位置。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body h1我的第一个超链接/h1 p这是一个超链接到 a hrefhttps://www.example.comexample.com/a 的段落。/p
/body
/html
img定义图像标签用于在页面中显示图片。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body h1我的第一个图像/h1 img srcimage.jpg alt描述图像的文本
/body
/html
ul 和 ol定义无序列表和有序列表。
li定义列表项必须在 ul 或 ol 标签内使用。
ul li苹果/li li香蕉/li li橙子/li
/ul
ol li第一项/li li第二项/li li第三项/li
/ol
div定义文档中的一个区域或块常用于布局。
span定义文档中的一个区域或行内元素常用于样式设置。 HTML 中常用的高级标签
table定义表格标签用于显示数据。
tr定义表格行。
th 和 td定义表头单元格和普通单元格。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodytable border1trtd姓名/tdtd年龄/td/trtrtd张三/tdtd25/td/tr
/html form定义表单标签可以用于输入和提交数据。
input定义表单中的输入控件如文本框、单选框和复选框等。
label定义表单控件的标签。
button定义按钮。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodyform action/submit methodpostlabel forname姓名/labelinput typetext idname namenamebr
label foremail邮箱/labelinput typeemail idemail nameemailbr
label formessage留言/labelbrtextarea idmessage namemessage rows4 cols50/textareabr
input typesubmit value提交/form
/body
/html select 和 option定义下拉列表框和选项。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodyform action/submitlabel forfruits选择一种水果/labelselect idfruits namefruitsoption valueapple苹果/optionoption valuebanana香蕉/optionoption valueorange橙子/option/selectinput typesubmit value提交/form
/body
/html textarea定义文本输入框。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodyform action/submitlabel formessage留言/labelbrtextarea idmessage namemessage rows4 cols50/textareabrinput typesubmit value提交/form
/body
/html iframe定义内嵌框架可以嵌入其他网页或内容。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodyiframe srchttps://www.example.com width500 height300/iframe
/body
/html
/html 标签属性说明
id定义元素的唯一标识符。
class定义元素的类名用于样式设置。
style定义元素的样式如颜色、字体等。
src定义元素的资源路径如图像、视频等。
href定义链接的目标地址。
target定义链接跳转的目标窗口如 _blank 表示在新窗口打开链接。
name定义表单控件的名称。
value定义表单控件的值。
type定义表单控件的类型如文本框、单选框和复选框等。
rows 和 cols定义文本输入框的行数和列数。 2、CSS简介
层叠样式表CSS是一种样式表语言用于在网页上为HTML元素应用样式和布局。通过使用CSS规则集和选择器我们可以设置字体、颜色、边框、背景和布局等。CSS的目标是将样式与内容分离以提高可维护性和重用性。
2.1选择器
2.1.1标签选择器
CSS标签选择器是指根据HTML标签来选择元素并进行样式设置。使用标签选择器时只需要在CSS规则中指定标签名即可。
例如下面的CSS规则将为所有的p标签段落设置字体颜色为红色
p { color: red;
} 2.1.2类选择器
CSS类选择器是一种基于类属性的选择器它允许您选择具有指定类属性的HTML元素并对其应用样式。
类选择器的语法是在类名前加上一个点.后面紧跟一个空格然后是选择器名称。例如下面的CSS规则将为所有具有类名“myClass”的元素设置字体颜色为红色
.myClass { color: red;
}
2.1.3层级选择器(后代选择器)
CSS层级选择器后代选择器是指选择特定元素的后代元素。后代选择器可以通过空格分隔两个元素名来定义。
例如下面的CSS规则将选择所有div元素内部的p元素并将它们的字体颜色设置为红色
div p { color: red;
} 2.1.4id选择器
CSS id选择器是一种特殊的选择器它基于HTML元素的id属性来选择元素。id选择器具有最高的优先级可以覆盖其他选择器的样式。
id选择器的语法是在id名称前加上井号#后面紧跟一个空格然后是选择器名称。例如下面的CSS规则将为id为“myId”的元素设置字体颜色为红色
#myId { color: red;
}
2.1.5组选择器
CSS组选择器是一种将多个选择器组合在一起的选择器。使用逗号分隔多个选择器可以将相同的样式应用于多个元素。
例如下面的CSS规则将同时选择p和h1元素并将它们的字体颜色设置为红色
p, h1 { color: red;
}
2.1.6伪类选择器
CSS伪类选择器是一种特殊的选择器它用于选择元素的特定状态或关系。伪类选择器以冒号:开头后面紧跟一个标识符。
以下是一些常见的CSS伪类选择器
:hover选择鼠标悬停在上面的元素。
:active选择被激活的元素例如被点击的按钮。
:focus选择获得焦点的元素例如输入框。
:visited选择用户已访问的链接。
:first-child选择每个父元素的第一个子元素。
:last-child选择每个父元素的最后一个子元素。
:nth-child(n)选择每个父元素的第n个子元素。
:nth-last-child(n)选择每个父元素的倒数第n个子元素。
:only-child选择其父元素仅有的子元素。
:empty选择没有子元素的元素。
:checked选择被选中的复选框或单选按钮。
:disabled选择禁用的元素。
:enabled选择启用的元素。
:target选择当前活动的锚点元素。 2.2样式属性 2.2.1布局常用样式属性
width 设置元素(标签)的宽度如width:100px;height 设置元素(标签)的高度如height:200px;background 设置元素背景色或者背景图片如background:gold; 设置元素的背景色, background: url(images/logo.png); 设置元素的背景图片。border 设置元素四周的边框如border:1px solid black; 设置元素四周边框是1像素宽的黑色实线以上也可以拆分成四个边的写法分别设置四个边的border-top 设置顶边边框如border-top:10px solid red;border-left 设置左边边框如border-left:10px solid blue;border-right 设置右边边框如border-right:10px solid green;border-bottom 设置底边边框如border-bottom:10px solid pink;padding 设置元素包含的内容和元素边框的距离也叫内边距如padding:20px;padding是同时设置4个边的也可以像border一样拆分成分别设置四个边:padding-top、padding-left、padding-right、padding-bottom。margin 设置元素和外界的距离也叫外边距如margin:20px;margin是同时设置4个边的也可以像border一样拆分成分别设置四个边:margin-top、margin-left、margin-right、margin-bottom。float 设置元素浮动浮动可以让块元素排列在一行浮动分为左浮动float:left; 右浮动float:right;
2.2.2文本常用样式属性
color 设置文字的颜色如color:red;font-size 设置文字的大小如font-size:12px;font-family 设置文字的字体如font-family:微软雅黑;为了避免中文字不兼容一般写成font-family:Microsoft Yahei;font-weight 设置文字是否加粗如font-weight:bold; 设置加粗 font-weight:normal 设置不加粗line-height 设置文字的行高如line-height:24px; 表示文字高度加上文字上下的间距是24px也就是每一行占有的高度是24pxtext-decoration 设置文字的下划线如text-decoration:none; 将文字下划线去掉text-align 设置文字水平对齐方式如text-align:center 设置文字水平居中text-indent 设置文字首行缩进如text-indent:24px; 设置文字首行缩进24px
