Html/CSS 初步介绍html和css部分重要标签
Posted cc123nice
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Html/CSS 初步介绍html和css部分重要标签相关的知识，希望对你有一定的参考价值。
&初步介绍html和css部分重要标签&
注：开头书写：<!DOCTYPE html>表明对应标准html代码
html标签（仅有一个），内部可以写属性
- 自闭合标签 例：<meta />
- 主动闭合标签 大多都需主动闭合
head标签：
- -<meta > 编码，跳转/刷新（提及但不推荐在此书写），关键字，描述，IE兼容（主要避免IE6的乱码问题，现今无需考虑）
- -title 标签
- -Link 搞图标
- -style 界面样式（高宽 居中等）
- -script
body标签：
- -图标， -空格 >-大于号 <-小于号（具体搜索html特殊图标）
- -<p>段落内容</p> 段落书写 两个段落间有间距
- -h系列标签 用作控制字大小（加大加粗）
<h1>段落</h1> h1-h6 从大到小 - -<br/> 换行
- -<span>内容</span> 白板输出 自占多少占多少（行内标签）
- -<div>内容</div> 白板输出 自占一行（块级标签）
注：
- 所有标签分为：
块级标签：自占一行 例：H系列，p标签，div
行内标签：自占多少占多少 例：span标签 - 标签之间可以嵌套
- 标签存在意义-方便后期css，js操作
- 所有标签分为：
body大标签中常见小标签及其系列：
-
input系列
- <input type=‘text‘/> name属性 value=‘默认值‘
- <input type=‘password‘/> name属性
- <input type=‘submit‘ value=‘提交按钮‘/>
- <input type=‘button‘/> 按钮
- <input type=‘radio‘ name=‘‘ value=‘‘/> 实现单选框需要name与value（name必须相同达成互斥）
- <input type=‘checkbox‘ name=‘‘ value=‘‘/>实现多选框需要name与value（name可相同to批量处理数据 value不同）
- <input type=‘file‘/> 依赖form表单的一个属性 enctype="multipart/form-data"
- <input type=‘reset‘/> 重置
- <textarea name="">默认值</textarea> 同text但多行
-
select标签
统一name 内部option-value 提交到后台
3.a标签
-跳转
-锚 （定位页面显示位置） href=‘#+标签id‘ 标签id不能重复
4.img标签
<img src="1.jpg" title="pictur"style="height:200px;width:200px;" alt="ok">
1. src-文件地址
2. title-鼠标放于图片显示
3. style-图片像素大小设定
4. alt-图片不显示时的默认值
5.下拉列表(不常用 带过)
ul
li
ol
li
dl
dt
dd
6.表格table （border="1"边框）
- thead
- tr
- th
- tbody
- tr
- td
- 让列合并 td colspan=“number”
- 让行合并 tr rowspan="number"
7.label
##点击用户名后方text输入则需让id对应
<label for="usename">用户名</label>
<input id="usename" type="text"/>
8.fieldset
边框插文字
legend
CSS重点
1）在标签上设置style
2）写在head里面，style标签中写样式
-id选择器 （不推荐少使用）
#i1{
background-color 背景色
height 高度
}
<标签 id="i1"></标签>
-class选择器
.名称{
style
}
<标签 class=‘名称‘></标签>
-标签选择器
div{
style
}
所有div都用此style
-层级选择器（空格隔开））
div .c1 .c2{
style
}
仅在div下.c1下的.c2才使用
-组合选择器（逗号）
div,.c1,.c2{
style
}
-属性选择器
对选择后的标签再通过属性进行删选
.c1[id="1"]{
style
}
=======注意：若有重复则调用最近的style==========
3）.css样式可写在单独文件中（此处卸载Xxx.css）用以下方法调用
<link rel="stylesheet" href="Xxx.css"/>
4）边框
-宽度 样式 颜色
border:4px dotted red;
-选择边框作用边
border-left
-其他
height，
width
text-align:center水平方向居中
line-height 根据标签高度居中
color 字体颜色
font-size 字体大小
font-weight 字体加粗
5）float 重点
使标签浮起来，块级标签将不占一行可并列
当外界标签容不下内部时 可让外部增大到正好容纳
<div style="clear:both;"></div>
6）display
display:none; 标签消失
display:inline; 标签设为行内
display:block; 标签设为块状
display:inline-block;
具有inline，默认占自己本身长度
具有block，可以设置高度、宽度、padding、margin
****
行内标签：无法设置高度、宽度、padding、margin
块级标签：高度、宽度、padding、margin
7） padding margin(0,auto)
边距
margin： 外边距 增加后 标签上边与父框上边框增加距离
padding: 内边距 增加后 标签上边与下边框增加距离
以上是关于Html/CSS 初步介绍html和css部分重要标签的主要内容，如果未能解决你的问题，请参考以下文章