app编程软件有哪些,网站推广优化外包,建筑网站建设案例,直播网站开发费用文章目录 引言前端概述分类 HTML快速入门重要的body标签注释hr标签br标签一些常见的标签标题标签div标签span标签p标签a标签img标签路径问题 ol和ul标签table标签input标签#xff08;表单元素#xff09;textarea标签#xff08;表单元素#xff09;select标签#xff08… 文章目录 引言前端概述分类 HTML快速入门重要的body标签注释hr标签br标签一些常见的标签标题标签div标签span标签p标签a标签img标签路径问题 ol和ul标签table标签input标签表单元素textarea标签表单元素select标签表单元素form标签 引言
eghttp://localhost:8080/file?name1
URL分成4部分
协议部分http、https域名ip 端口 localhost:8080服务器内部路径 /file请求参数?后面的部分。比如想搜索手机搜索其他的需要传递参数。 name1 前端
概述
前端又称web前端网站的前台部分运行在浏览器给客户浏览的网页。后端管理和处理数据的。前端页面上展示的数据都是后端给的。
分类
HTML用于搭建基础网页展示页面的内容CSS用于美化页面布局页面JavaScript控制页面的元素让页面有一些动态的效果 HTML
概念
HTML(hyper text markup language)超文本标记语言是一个以.html为后缀的文本是一个文本也是一个网页该文本可以用浏览器打开超文本包含文本字体、图片、链接甚至音乐、程序等元素的文本HTML 是一个使用’标签’来描述网页的文本 (标签在HTML文本中有实际意义)
简而言之
首先是一个语言文本语言用标签/标记来描述的文本语言
快速入门 html文档后缀名 .html 或者 .htm 标签分为 围堵标签有开始标签和结束标签。如 html /html自闭合标签开始标签和结束标签在一起。如 br hr 标签可以嵌套 需要正确嵌套不能你中有我我中有你 错误ab/a/b 正确ab/b/a 在开始标签中可以定义属性。属性是由键值对构成值需要用引号单双都可引起来 html的标签不区分大小写但是建议使用小写。
eg
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDemo/title
/head
bodydivdiv猫和老鼠/divhr width600px alignleft猫 - 汤姆br老鼠 - 杰瑞br
/div/body
/html重要的body标签
我们研究html就是研究html不同语法标签body部分比较重要
注释
ctrl shift / !----
hr标签
hr是一个横线标签, 单标签
属性
size高度厚度不同于height不带单位时 – 默认pxwidth宽度不带单位时 – 默认px 候选值 {value}/ {value}px代表多少个像素{value}% 占父元素的百分比 noshade颜色是否有阴影(纯色)align对其方式。 候选值center、 left、 right
eg
!--高度--
hr size100px!--默认居中对其--
hr width600px alignleft!--noshade 没有阴影--
hr size50px noshadenoshadebr标签
br换行符单标签
注意
在html里直接回车换行没有效果只会变成一个空格。多个空格也是没有效果的也只会变成一个空格。
一些常见的标签
显示结果HTML代码描述空格nbsp;空格gt;大于符号lt;小于符号amp; b/bb标签是加粗 i/ii标签是斜体
标题标签
h1、h2、h3、h4、h5、h6
属性
alignLeft左对齐内容默认值Center右对齐内容Right居中对齐内容
注意1 自定义标签
h0、h7、h8 自定义标签, 自定义标签没有任何特殊效果, 等价于span标签
注意2h1在一个html页面上最好出现一次h2-h6可以在一个html页面上出现多次
div标签
div给页面进行分区或者节/块会自动换行。 div会自动换行一般用它来框定范围
span标签
行内进行分块的不会自动换行
div和span的区别div一般用来先划定一个大的范围最后再用span进行填充
p标签
p 段落标签
注意:段落一般用来描述大段文字很类似div的使用 只不过段落会自动的在段前/段后加上一部分段落间距
a标签
a超链接标签
eg a hrefhttps://www.baidu.com target_blankbaidu/a a hrefhttps://www.baidu.com target_selfbaidu/a
属性
href指向要打开页面的的URLtarget 新页面的打开方法 _blank在空页面打开_self在当前页面打开_top打开最底层的网页_parent打开上一层的网页
a标签有时候和一个常见的标签结合起来使用
iframe可以内嵌页面 eg iframe src https://www.baidu.com/ width600px height1000px /iframe
img标签
img 图片标签
img src这里填图片路径 alt图片加载失败..
属性 src用来指示图片的加载路径相对路径、绝对路径
路径问题
Java路径:
// 相对路径: ./ ../ ../../
// 绝对路径: C:\Users\HTML前端路径:
// 相对路径: ./ ../ ../../
// 绝对路径: http://localhost:8080/code/com/coo1heisenberg/html/1.png
// 相对路径最终会转换成绝对路径
ol和ul标签 ol 有序列表成套标签 和li标签构成一套标签
ol属性
type规定在列表中使用的标记类型(1,A,a,I,i)。start规定有序列表的起始值reversed规定列表顺序为降序。(9,8,7…) ul 无序列表成套标签 和li标签构成一套标签
ul属性
type: disc默认值。实心圆。circle空心圆。square实心方块。
eg
ol reversedlihello/liliworld/lilihi/li/*1.hello2.world3.hi*/
/olul TYPEcirclelihello/liliworld/lilihi/li/*helloworldhi*/
/ultable标签
table表格标签, 成套标签, tr, td
tr表格的一行td一行中一个单元格
属性
table的属性 bgcolor 背景颜色border 1、2 代表边框的像素cellpadding规定单元边沿与其内容之间的空白。cellspacing规定单元格之间的空白。 tr的属性: bgcolorvalign规定表格行中内容的垂直对齐方式。 topmiddlebottom td的属性: colspan横跨列数 td colspan2 代表占两列所以看起来像占了两个单元格 rowspan横跨行数
注table自动补全
eg
table border1 cellspacing0 cellpadding10trtd这是第一个单元格/tdtd这是第二个单元格/td/tr
/tableinput标签表单元素
input输入框
属性
type text默认文本password密码button按钮hidden隐藏输入框主要是用来传递一些不希望客户看到的参数radio单选框reset定义重置按钮。submit提交
eg
input type text br
input type password br
input type button value button brtextarea标签表单元素
textarea : 多行输入框
属性
cols列rows行可以修改行数默认是2行placeholder提示
eg
bodytextarea rows10 cols100 placeholder输入内容/textarea/bodyselect标签表单元素 select 下拉选择和option是成套标签
属性
optionselectedselectedselected选中状态代表默认选择的选项selectmultiplemultiple “multiple” 允许多选selectsizesize 4下拉可见数4可以控制可见的数目
eg
body
select optiona/optionoptionb/optionoption selectedc/option
/select/bodyform标签
form表单
用来在浏览器的网页上, 通过用户输入或者点击, 生成一个url, 让浏览器根据这个url发起请求。用于采集用户输入的数据的用于和服务器进行交互。比如登录页面注册页面。
属性
action: 指定提交数据的URL action需要写三部分数据协议部分、域名、ip 端口、服务器内部路径 method指定提交方式 分类一共七种常用的两种get、post
eg
body
form actionhttp://localhost:8080/file!--name表示输入框的key值--用户名input name username br密码input namepassword typepasswordbrinput typesubmit value提交input typereset value重置!--生成的URLhttp://localhost:8080/file?usernamepassword--
/form/bodybodyform actionhttp://localhost:8080//file!-- 在里面去写 输入框 --!-- 因为我们想提交的数据key是name --文件名input name nameinput typesubmit value提交数据!-- 我们点击提交数据会发生怎样的事情1. 使用action部分填写的三个信息 协议、域名ip 端口、服务器内部路径2. 使用form标签内部的输入值组装成参数 --- 键值对http://localhost:8080//file?name111--/form/body----------------------------------------------------------------------------bodyform actionhttp://www.baidu.com/s 要搜索的商品input name wdinput typesubmit value点我搜索/form/body
通过form标签发送请求有两种请求方式get、post get与post请求的差别
第一个是语义化的区别 get获取数据post提交数据 第二个是参数位置的区别 get 请求把请求参数放在URL后面post请求在请求参数放在请求正文中 post 相对于get提交的参数安全一点通过浏览器的地址栏只能发送get请求post请求无法发送get请求更易于传播一些URL有最长的限制 上传一些大的数据的时候通过get请求无法完成
eg
form actionhttp://www.baidu.com/s methodpost!-- value admin 是直接把输入框里面赋值成这个--input nametoken valueadmininput namegoodsDetailId value1235input namestatus value0input namenum value1input nameamount value300input typesubmitinput typereset!--我们通过浏览器的地址只能发送get请求无法发送post请求要想发送post请求需要借助form标签1. 在action的地方写三部分数据协议、域名ip 端口、服务器内部路径2. method写出post3. 我们需要提交参数input必须要写name4. 写一个输入框type submit--
/form/body注
使用form主要是提交数据使用table主要是完成布局
