为了账号安全,请及时绑定邮箱和手机立即绑定

初识HTML+CSS笔记

2019.12.27 01:35 586浏览

HTML

Html和CSS的关系:

  • HTML是网页内容的载体(骨骼),CSS样式是表现(肌肉皮肤)
  • JavaScript是用来实现网页上的特效效果(动作行为)

基本结构和常见标签:

<!doctype html>  ---  文档声明,表示是html5
<html>  ---  html标签包裹网页的主体,根标签
<head>  ---  html的头部,可包含title、script、style、link、meta等标签
  <title>标题<title>  --- 网页的标题
</head>
<body>  --- 文档的主体
  <!-- 注释,不会显示到网页中,会被忽略 -->
  <p>段落标签</p>
  <h1>一级标题,最大最重要</h1>
  <h2>二级标题</h2>
  <h3>三级标题</h3>
  <h4>四级标题</h4>
  <h5>五级标题</h5>
  <h6>六级标题,最小最不重要</h6>
  <strong>强调作用,粗体</strong>
  <em>强调作用,斜体</em>
  <span>无任何语义的标签</span>
  <q>引用标签,引用别人的一句话</q>
  <blockquote>引用别人的一整段话,长引用</blockquote>
  <br>  ---  换行
  &nbsp;  --- 会被解析为空格符号
  <hr>  ---   水平分割线
  <address>常用来描述地址</adress>
  <code>用来描述代码</code>
  <pre>用来包裹code标签,让里面的代码格式按照编辑时的位置排列</pre>
  <ul>  ---  无序列表
    <li>列表中的项</li>
    <li>列表中的项</li>
  </ul>
  <ol>  ---  有序列表
    <li>列表中的项</li>
    <li>列表中的项</li>
  </ol>
  <div>无语言的块状盒子</div>
  <table>  ---  表格
    <caption>表格的描述性文字,标题</caption>
    <tr>  ---  表格中的一行
      <th>表格中的表头,黑体</th>
      <th>表格中的表头</th>
    </tr>
    <tr>  ---  表格中的一行
      <td>表格中的单元格</td>
      <td>表格中的单元格</td>
    </tr>
  <table>
  <a target="_blank">链接,blank属性表示在新窗口打开</a>
  <a href="mailto:yy@imooc.com?subject=观了不起的盖茨比有感&body=你好,对此评论有些想法">发送邮件</a>
  <img src="" title="">  ---  图片标签
  <form  method="post"   action="save.php">  ---  表单标签
    <input type="text" name="myName">  ---  text文本输入框
    <input type="password" name="pass">  ---  输入框,带星号
    <textarea  rows="行数" cols="列数">多行输入</textarea>
    <input   type="radio"   value=""    name="名称"   checked="checked"/>  ---  单选按钮
    <input   type="checkbox"   value=""    name="名称"   checked="checked"/>  ---  多行按钮
    <select multiple="multiple">  ---  下拉列表
      <option value="">选择项的值</option>
    </select>
    <input   type="submit"   value="提交">  --- 提交按钮
    <input   type="reset"   value="重置">  --- 重置按钮
    <label for="控件id名称">描述input的文字</label>
  </form>
</body>
</html>

CSS

CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。

语法和常见用法:

/* 注释代码 */  

<style>
p {  ---  p表示选择器,即选择p标签 
  font-size:12px;  ---  属性和属性值,字号大小
  color:red;  ---  颜色
  font-family:"宋体";  ---  字体
  font-weight:bold;  ---  粗细
  font-style:italic;  ---  字体样式
  text-decoration:underline;  ---  下划线
  text-decoration:line-through;  ---  删除线
  text-indent:2em;  ---  缩进
  line-height:2em;  --- 行间距
  letter-spacing:50px;  --- 中文字间隔、字母间隔
  word-spacing:50px;  ---  单词间隔
  text-align:center;  ---  对齐方式
}
</style>

<p style="color:red">这里文字是红色。</p>  --- 内联样式表

<link href="base.css" rel="stylesheet" type="text/css" />  ---  外部样式表

选择器:

  • 标签选择器:p、div、h1、h6
  • 类选择器:<div class="cls"></div> -> .cls{}
  • ID选择器:<div id="no1"></div> -> #no1{}
  • 子代选择器:ul>li {},选择 ul 中的 li 标签
  • 后代选择器:div div {},选择 div 中的 div,但是不一定是父子关系
  • 通用选择器:* {},选择所以标签元素
  • 伪类选择器:a:hover {},用冒号表示
  • 分组选择器:h1,div {},用逗号表示

具有继承性、层叠性,有权重的问题:标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。

p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/

元素

元素分类:

  • 块级元素:
    • 每个块级元素都从新的一行开始,并且其后的元素也另起一行;
    • 元素的高度、宽度、行高以及顶和底边距都可设置;
    • 元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度
    • <div><p><h1><form><ul><li>就是块级元素
  • 内联元素:
    • 和其他元素都在一行上
    • 元素的高度、宽度及顶部和底部边距不可设置
    • 元素的宽度就是它包含的文字或图片的宽度,不可改变
    • <span><a><label><strong><em>就是典型的内联元素
  • 内联块状元素:
    • 和其他元素都在一行上
    • 元素的高度、宽度、行高以及顶和底边距都可设置
    • <img><input>标签就是这种内联块状标签

盒模型:每个元素可以看成是一个盒子,这个盒子从里到外,分别对应着不同的内容,内容content -> 内边距(内容到边框的距离) -> 边框 -> 外边距(距离相邻盒子边界的距离)

div{border:2px  solid  red;}  ---  边框
div{border-bottom:1px solid red;}  ---  边框
div{padding:20px 10px 15px 30px;}  ---  内边距
div{margin:20px 10px 15px 30px;}  ---  外边距

/* 书写顺序:上 右 下 左,顺时针 */
/* 
简写: 
  margin:10px 10px 10px 10px;
  -》  margin:10px;
  margin:10px 20px 10px 20px;
  -》  margin:10px 20px;
  margin:10px 20px 30px 20px;
  -》  margin:10px 20px 30px;
*/

布局

布局模型:

  • 流动模型:从上到下依次放盒子
  • 浮动模型:浮动盒子会影响他下面盒子的摆放,关键词float
  • 层模型:
    • 绝对定位,相对于有定位的父盒子的位置position:absolute;
    • 相对定位,相对自己的位置定位position:relative;
    • 固定定位:相对浏览器的位置定位position:fixed;

居中:

.txtCenter{
  text-align:center;
}

margin-left:auto;
margin-right:auto;

position:relative;
left:-50%;

height:100px;
line-height:100px;
点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消