初识HTML+CSS

221 阅读3分钟

html决定页面的结构,css决定页面的样式,js决定页面的行为

HTML(Hyper Text Markup Language):超文本标签语言 文本 标签 语言

html是所有标签的根节点

head标签是文档的头部

title标签是文档的标题

body标签是文档的主体

HTML标签分类 1.双标签 如:<head></head>,<body></body>

2.单标签 如:<br/>,<hr/>

HTML标签关系

1.嵌套关系 如:<head><title></title></head>

2.并列关系 如:<head></head><body></body>

HTML常用标签 1.排版标签

2.标题标签:head title h1-h6

3.段落标签:<p>

4.水平线标签:<hr/>

5.换行标签:<br/>

6.div span 标签

7.文本格式化标签:粗体:<b></b><strong></strong>;斜体:<i></i><em></em>; 加删除线标签:<s></s><del></del>;加下划线标签: </u></u><ins></ins>

标签的属性 语法格式: <标签名 属性1=”属性值1“ 属性2=”属性值2“>内容</标签名>

1.标签可以拥有多个属性,且必须写在起始标签中,位于标签名后面。 2.属性之间部分先后顺序,标签名与属性、属性与属性之间均以空格分开。 3.任何标签的属性都有默认值,省略该属性则取默认值。 通常采取键值对的格式:key="value"的格式 如:<hr width="400"/> 图像标签img <img src="图像URL"'/>

属性属性值描述
srcURL图像的路径
alt文本图像不能显示时的替换文本
title文本鼠标悬停时显示的内容
width像素设置图像的宽度
height像素设置图像的高度
border数字设置图像边框的宽度

链接标签

语法格式: <a href="跳转目标" target="目标窗口弹出方式">文本或者图像</a>

a标签表示超链接,href属性指定要跳转的目标地址,target属性指定跳转的方式,默认值是_self

_self是当前页面进行跳转,_blank是新页面跳转

<!-- 行级标签宽度auto 没有高度的感念(设置高度无效) -->
<span>行级标签容器</span>
<span>第二个行级标签</span>
<!-- 块级标签:宽度默认100% 高度auto -->
<div>块级标签1</div>
<div>块级标签2</div>
<!-- 任何行级标签和块级标签可以相互转换 -->

锚点定位

1.使用”a href="#id名>""链接文本" <a href="#id1">文本</a>

2.使用相应的id名标注跳转目标的位置 <h1 id="id1">文本</h1>

base标签基本的

base 可以设置整体链接的打开状态 base写在head之间 特殊字符:空格:&nbsp <小于号:&lt ,>大于号:&gt

注释标签

注释快捷键:ctrl+/或者是ctrl+shift+/ ctrl+/ 生成的注释会把当前的这一行全部的内容注释掉 ctrl+shift+/会在当前位置生成一个注释标签不会注释掉当前已经有的内容 块级标签:默认宽度100% (默认占据一行) 比如h1-h6标签 、p标签、div标签、hr标签 行级标签:多个行级标签在同一行内显示 比如:b标签 含义不同,语义则不同 b标签和strong标签的区别:b其实是bold的缩写 ,strong表示强调 对于特殊情况,strong标签内容会着重朗读

路径

相对路径:

相对路径就是指这个文件所在的路径引起的跟其它文件的路径关系 意思就是从当前路径开始的路径

例如:JaveScript/day20/代码/01.登录案例.html

绝对路径:是从盘符开始的路径

例如:C:\Windows\System32\cmd.exe

form标签内的提交按钮被点击,会提交该form标签内所有有name属性的标签内容 action属性控制提交的服务器地址,没有给值则提交给自己 method属性表示提交类型:GET或者为POST默认为GET7

get和post提交的区别
get提交时,表单的内容会在地址栏直接显示,post提交时,地址栏不会显示内容
post相较于get请求安全,但是不是绝对安全
get提交时,携带的参数容量较小,post携带参数容量较大