【笔记】Web基础之HTML

Html
用于开发网页的一门语言 ,由W3C组织提供
细节:
(1)HTML是一门标记语言,不是编程语言(如C++/JAVA)
(2)HTML是标记语言,是通过标记来组织网页结构
(3)使用HTML开发的网页文件以.htm或.html为后缀
(4)使用HTML开发的网页文件,由浏览器负责打开解析并显示
(5)HTML是文档的一种 txt word ppt等

通用标签（由于尖括号会被编辑器识别为标签，所以这里省略）
换行: br 或者使用带有换行效果的标签包裹 如div h1等
空格:&nbsp
图像标签:img src=""
超链接:
target 可以指定用什么方式打开超链接 比如新窗口或者原有窗口
targeet _blank(新标签) _self: 在当前窗口打开超链接
表格: table
表头 th
行 tr
列 td
colspan 是合并列，rowspan是合并行

css样式
引入方式:link rel=“stylesheet” href=“路径”/
在head标签内添加 用于修饰网页
常用属性:
border-collapse: collapse; /设置边框单元格合并/
border: 2px solid green; /solid表示实线/
background-color: green;//背景颜色
color: yellow; //字体颜色
width: 30%; //宽度(可以是像素值 也可以是占页面的百分比)
margin-left: auto;//一般做居中用 距离页面的边距 外边距
margin-right: auto;
padding: 50px; 内边距 设置单元格边框与内容之间的距离
text-align: center; //字体对齐方式
text-indent //首行缩进

css选择器
标签名选择器:通过元素名选中元素组
格式:span{}
类(class)选择器: //一个元素可以具有多个类名 重复的会覆盖
格式:span class =“s1,s2” span111/ span
.s1{}
id选择器: 通过为元素添加id独一无二的编号,可以通过id值选中指定的元素
id 属性只能在每个 HTML 文档中出现一次。
格式:p id=“p1”
#id1{}
后代选择器: //为某个元素内的某个元素设置属性
p span{}

属性选择器: //用元素现有的属性来选择元素
input[type=‘text’][name=‘username’] //匹配所有的input元素且type值为text的元素

PS:a标签(超链接)要设置字样必须亲自设置a元素的属性,用父类来修改是不行的
元素:
div
span
input type=“这里设置各种类型” name=“这里是提交的key值” value=“这里是提交的值 此属性不设置默认为后面的文字”
placeholder=“输入框的提示内容”>
button //普通按钮
submit //提交按钮 传送给服务器
checkbox //复选框
radio //单选框(name属性一样才可以单选)
下拉菜单select option value=“bj” 北京 option 提交的是value值

表单(form)
作用:用于向服务器提交数据,提交的方式有两种:
第一种通过表单向服务器提交数据(比如注册时候填写的信息)
第二种通过超链接向服务器提交数据(如百度搜索时候http://www.baidu.com?user=chenyang&age=22)
标签:form action="" method="">/form>
action用于向服务器提交数据 method用于选择post方式还是get方式
常用属性:

常用属性
文本属性
text-align:设置文本水平排列方式
left(默认) right center
text-indent:设置文本是首行缩进 单位:像素/百分比
text-decoration:设置文本的下划线样式
none underline(默认,有下划线)
letter-spacing:设置字符间隔 单位:像素

字体属性
font-size:字体大小
font-weight:字体粗细 normal(默认 正常) bold/bolder 加粗 也可以用像素值
font-family:字体
color:字体颜色
line-height:行高(一行的顶部和底部的距离)
背景属性
background:复合属性
background-color:颜色
background-image:图片
background-repeat:排列方式
repeat:默认,重复排列
repeat-x repeat-y; //纵向 横向都重复 */
background-position:背景图片的位置
值1:背景图片距离左边框的间隔
值2:背景图片距离上边框的间隔
边框(border)
border:2px solid red
border-width:粗细
top
left
right
bottom
border-style:样式
border-color:颜色
其他属性
width:元素的高度
hight:元素的宽度
display:inline 行元素 不可以设置宽高,多个元素在一行
block 块元素 可以设置宽高,默认独占一行
inline-block 行内块元素(既能设置宽高,也可以和其他元素在同一行)
none (隐藏)

元素类型
块级元素(block) 如:div p h1 form table
默认情况下.块级元素占一行
可以设置宽高,不设置默认宽填满父元素,高由内容决定
行级元素(inline) 如:span
如果元素display属性默认为inline,表示当前元素是行内元素
默认情况下,多个元素处在同一行
不能设置宽高
行内块元素(inline-block)
既能设置宽高,也可以和其他元素在同一行