建设介绍网站,郑州论坛官网,平面设计网上接单,北京一环都是住什么人提示#xff1a;文章写完后#xff0c;目录可以自动生成#xff0c;如何生成可参考右边的帮助文档 HTML与CSS简介前言一、HTML简单梳理1.HTML文件的书写规范2.常用标签介绍二、CSS简单梳理1、CSS选择器前言
页面由三部分内容组成#xff01;分别是内容#xff08;结构文章写完后目录可以自动生成如何生成可参考右边的帮助文档 HTML与CSS简介前言一、HTML简单梳理1.HTML文件的书写规范2.常用标签介绍二、CSS简单梳理1、CSS选择器前言
页面由三部分内容组成分别是内容结构、表现、行为。内容结构是我们在页面中可以看到的数据。我们称之为内容。一般内容 我们使用html 技术来展示。表现指的是这些内容在页面上的展示形式。比如说。布局颜色大小等等。一般使用CSS 技术实现 一、HTML简单梳理
1.HTML文件的书写规范
!DOCTYPE html
html langen
head
meta charsetUTF-8
title标题/title
/head
body
hello
/body
/htmlhtml:表示整个 html 页面的开始 head:表示头信息 title标题 body主体页面需要展示的地方
2.常用标签介绍
(1)font标签 font标签是字体标签,它可以用来修改文本的字体,颜色,大小(尺寸)
body
!-- 字体标签
需求 1在网页上显示 我是字体标签 并修改字体为 宋体颜色为红色。
font 标签是字体标签,它可以用来修改文本的字体,颜色,大小(尺寸)
color 属性修改颜色
face 属性修改字体
size 属性修改文本大小
--
font colorred face宋体 size7我是字体标签/font
/body(2)特殊字符 把 换行标签 变成文本 转换成字符显示在页面上 常用特殊字符表 其他特殊字符表 (3)标题标签 标题标签是 h1 到 h6
body!-- 标题标签需求 1演示标题 1 到 标题 6 的h1 - h6 都是标题标签h1 最大h6 最小align 属性是对齐属性left 左对齐(默认)center 剧中right 右对齐--h1 alignleft标题 1/h1h2 aligncenter标题 2/h2h3 alignright标题 3/h3h4标题 4/h4h5标题 5/h5h6标题 6/h6h7标题 7/h7
/body(4)超链接 在网页中所有点击之后可以跳转的内容都是超连接
body!-- a 标签是 超链接href 属性设置连接的地址target 属性设置哪个目标进行跳转_self 表示当前页面(默认值)_blank 表示打开新页面来进行跳转--a hrefhttp://localhost:8080百度/abr/a hrefhttp://localhost:8080 target_self百度_self/abr/a hrefhttp://localhost:8080 target_blank百度_blank/abr/
/body(5)列表标签
body!--需求 1使用无序列表方式把东北 F4赵四刘能小沈阳宋小宝展示出来ul 是无序列表type 属性可以修改列表项前面的符号li 是列表项--ul typenoneli赵四/lili刘能/lili小沈阳/lili宋小宝/li/ul
/body(6)img 标签 img 标签可以在 html 页面上显示图片。
body
img src1.jpg width200 height260 border1 alt美女找不到/
img src../2.jpg width200 height260 /
img src../imgs/3.jpg width200 height260 /
img src../imgs/4.jpg width200 height260 /
img src../imgs/5.jpg width200 height260 /
img src../imgs/6.jpg width200 height260 /
/body属性说明
1、img标签属性src:设置图片的路径width设置图片的宽度height设置图片的高度border设置图片边框大小的alt 设置当指定路径找不到图片时,用来代替显示的文本内容
2、相对路径和绝对路径
在 JavaSE 中路径分为相对路径和绝对路径相对路径:从工程名开始算绝对路径:盘符:/目录/文件名
在 web 中路径分为相对路径和绝对路径两种相对路径:. 表示当前文件所在的目录.. 表示当前文件所在的上一级目录文件名 表示当前文件所在目录的文件,相当于 ./文件名 ./ 可以省略绝对路径:正确格式是: http://ip:port/工程名/资源路径错误格式是: 盘符:/目录/文件名(7)表格标签
!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd
html
headmeta http-equivContent-Type contenttext/html; charsetUTF-8title表格标签/title
/head
body
table aligncenter border1 width300 height300 cellspacing0trth1.1/thth1.2/thth1.3/th/trtrtd2.1/tdtd2.2/tdtd2.3/td/trtrtd3.1/tdtd3.2/tdtd3.3/td/tr
/table
/body
/html标签属性说明table表格标签border设置表格标签width设置表格宽度height设置表格高度align设置表格相对于页面的对齐方式方式有left、right、centercellspacing设置单元格间距tr行标签th表头标签td是单元格标签align设置单元格文本对齐方式b是加粗标签
(8)跨行跨列表格 新建一个五行五列的表格第一行第一列的单元格要跨两列第二行第一列的单元格跨两行第四行第四列的单元格跨两行两列。
htmlheadmeta http-equivContent-Type contenttext/html; charsetUTF-8title7.表格的跨行跨列/title/headbodytable width500 height500 cellspacing0 border1trtd colspan21.1/tdtd1.3/tdtd1.4/tdtd1.5/td/trtrtd rowspan22.1/tdtd2.2/tdtd2.3/tdtd2.4/tdtd2.5/td/trtrtd3.2/tdtd3.3/tdtd3.4/tdtd3.5/td/trtrtd4.1/tdtd4.2/tdtd4.3/tdtd colspan2 rowspan24.4/td/trtrtd5.1/tdtd5.2/tdtd5.3/td/tr/table/body
/html说明
标签说明colspan设置跨列crowspan设置跨行
(9)iframe 框架标签,内嵌窗口 ifarme 标签它可以在一个 html 页面上,打开一个小窗口,去加载一个单独的页面
!DOCTYPE html
html
head
meta charsetUTF-8
title8.iframe标签.html/title
/head
body我是一个单独的完整的页面br/br/!--ifarme标签可以在页面上开辟一个小区域显示一个单独的页面ifarme和a标签组合使用的步骤:1 在iframe标签中使用name属性定义一个名称2 在a标签的target属性上设置iframe的name的属性值--iframe src3.标题标签.html width500 height400 nameabc/iframeiframe src7.表格跨行跨列.html width500 height 400 namehh/iframe\iframe src7.表格跨行跨列.html width500 height 400 namehh1/iframebr/ullia href0-标签语法.html targetabc0-标签语法.html/a/lilia href1.font标签.html targethh1.font标签.html/a/lilia href2.特殊字符.html targethh12.特殊字符.html/a/li/ul
/body
/html(10)表单标签 表单就是 html 页面中,用来收集用户信息的所有元素集合.然后把这些信息发送给服务器
!DOCTYPE html
html langen
headmeta charsetUTF-8title表单的显示/title
/head
bodyformh1 aligncenter用户注册/h1table aligncentertrtd 用户名称/tdtdinput typetext value默认值//td/trtrtd 用户密码/tdtdinput typepassword valueabc//td/trtrtd确认密码/tdtdinput typepassword valueabc//td/trtrtd性别/tdtdinput typeradio namesex/男input typeradio namesex checkedchecked /女/td/trtrtd 兴趣爱好/tdtdinput typecheckbox checkedchecked /Javainput typecheckbox /JavaScriptinput typecheckbox /C/td/trtrtd国籍/tdtdselectoption--请选择国籍--/optionoption selectedselected中国/optionoption美国/optionoption小日本/option/select/td/trtrtd自我评价/tdtdtextarea rows10 cols20我才是默认值/textarea/td/trtrtdinput typereset //tdtd aligncenterinput typesubmit//td/trtrtdinput typefile//td/tr/table/form
/body
/html标签说明
标签说明form表单input typetext文件输入框 value设置默认显示内容input typetext文件输入框 value设置默认显示内容input typepassword密码输入框 value设置默认显示内容input typeradio单选框 name属性可以对其进行分组 checkedchecked表示默认选中input typecheckbox复选框 checkedchecked表示默认选中input typereset重置按钮 value属性修改按钮上的文本input typesubmit提交按钮 value属性修改按钮上的文本input typebutton按钮 value属性修改按钮上的文本input typefile文件上传域input typehidden隐藏域 当我们要发送某些信息而这些信息不需要用户参与就可以使用隐藏域提交的时候同时发送给服务器select 标签下拉列表框option 标签下拉列表框中的选项 selectedselected设置默认选中textarea表示多行文本输入框 起始标签和结束标签中的内容是默认值rows 属性设置可以显示几行的高度cols 属性设置每行可以显示几个字符宽度
(11)表单提交
!DOCTYPE html
html langen
headmeta charsetUTF-8title表单的显示/title
/head
bodyform actionhttp://localhost:8080 methodpostinput typehidden nameaction valuelogin /h1 aligncenter用户注册/h1table aligncentertrtd 用户名称/tdtdinput typetext nameusername value默认值//td/trtrtd 用户密码/tdtdinput typepassword namepassword valueabc//td/trtrtd性别/tdtdinput typeradio namesex valueboy/男input typeradio namesex checkedchecked valuegirl /女/td/trtrtd 兴趣爱好/tdtdinput namehobby typecheckbox checkedchecked valuejava/Javainput namehobby typecheckbox valuejs/JavaScriptinput namehobby typecheckbox valuecpp/C/td/trtrtd国籍/tdtdselect namecountryoption valuenone--请选择国籍--/optionoption valuecn selectedselected中国/optionoption valueusa美国/optionoption valuejp小日本/option/select/td/trtrtd自我评价/tdtdtextarea namedesc rows10 cols20我才是默认值/textarea/td/trtrtdinput typereset //tdtd aligncenterinput typesubmit//td/tr/table/form
/body
/html说明 form标签是表单标签action属性设置提交的服务器地址method属性设置提交的方式GET(默认值)或POST表单提交的时候数据没有发送给服务器的三种情况1、表单项没有name属性值2、单选、复选下拉列表中的option标签都需要添加value属性以便发送给服务器3、表单项不在提交的form标签中GET请求的特点是1、浏览器地址栏中的地址是action属性[?请求参数]请求参数的格式是namevaluenamevalue2、不安全3、它有数据长度的限制POST请求的特点是1、浏览器地址栏中只有action属性值2、相对于GET请求要安全3、理论上没有数据长度的限制(12)其他表单 div、span、p 标签
!DOCTYPE html
html langen
headmeta charsetUTF-8title其他标签/title
/head
body!--需求1div、span、p标签的演示div标签 默认独占一行span标签 它的长度是封装数据的长度p段落标签 默认会在段落的上方或下方各空出一行来如果已有就不再空--divdiv标签1/divdivdiv标签2/divspanspan标签1/spanspanspan标签2/spanpp段落标签1/ppp段落标签2/p
/body
/html注意想要了解更多标签可以进如下网址 w3school 在线教程
二、CSS简单梳理
1、CSS选择器
(1)标签名选择器
!DOCTYPE html
html
headmeta charsetUTF-8titleCSS选择器/titlestyle typetext/cssdiv{border: 1px solid yellow;color: blue;font-size: 30px;}span{border: 5px dashed blue;color: yellow;font-size: 20px;}/style
/head
body!-- 需求1在所有div标签上修改字体颜色为蓝色字体大小30个像素。边框为1像素黄色实线。并且修改所有span 标签的字体颜色为黄色字体大小20个像素。边框为5像素蓝色虚线。--divdiv标签1/divdivdiv标签2/divspanspan标签1/spanspanspan标签2/span
/body
/html
(2)id 选择器
!DOCTYPE html
html
headmeta charsetUTF-8titleID选择器/titlestyle typetext/css#id001{color: blue;font-size: 30px;border: 1px yellow solid;}#id002{color: red;font-size: 20px;border: 5px blue dotted ;}/style
/head
body !--需求1分别定义两个 div 标签第一个div 标签定义 id 为 id001 然后根据id 属性定义css样式修改字体颜色为蓝色字体大小30个像素。边框为1像素黄色实线。第二个div 标签定义 id 为 id002 然后根据id 属性定义css样式 修改的字体颜色为红色字体大小20个像素。边框为5像素蓝色点线。--div idid002div标签1/divdiv idid001div标签2/div
/body
/html(3)class 选择器
!DOCTYPE html
html
headmeta charsetUTF-8titleclass类型选择器/titlestyle typetext/css.class01{color: blue;font-size: 30px;border: 1px solid yellow;}.class02{color: grey;font-size: 26px;border: 1px solid red;}/style
/head
body!--需求1修改 class 属性值为 class01的 span 或 div 标签字体颜色为蓝色字体大小30个像素。边框为1像素黄色实线。需求2修改 class 属性值为 class02的 div 标签字体颜色为灰色字体大小26个像素。边框为1像素红色实线。--div classclass01div标签class01/divdiv classclass02div标签/divspan classclass02span标签class01/spanspanspan标签2/span
/body
/html(4)组合选择器
!DOCTYPE html
html
headmeta charsetUTF-8titleclass类型选择器/titlestyle typetext/css.class01 , #id01{color: blue;font-size: 20px;border: yellow 1px solid;}/style
/head
body!-- 需求1修改 classclass01 的div 标签 和 idid01 所有的span标签字体颜色为蓝色字体大小20个像素。边框为1像素黄色实线。--div idid01div标签/div br /spanspan 标签/span br /div classclass01div标签/div br /
/body
/html
