HTML基础和css

                          1.HTML基础

1.1什么是标记语言

文本文件:只保留文字内容,不保留文字格式。

Word中:即可以保存文字内容又可以保留文字格式。                               

 比如:在.txt文件中和在word文件中输入同样的内容,设置同样的格式,全部发到另一台计算机时,出现了txt文件只有文字内容没有格式,而word保留了内容和样式

Word文档就是标记语言的一种,而现在要学习的就是HTMLHyperText Markup Language )也是 一种标记语言,叫做超文本标记语言。                                                        

   超文本标记语言:不光可以保存文字信息,还可以保存音频、视频内容等。

   在我们浏览网页时,其实是将储存在服务器上的HTML文件下载到本地,在通过浏览器进行解析,从而呈现了网页内容。

2..HTML的基本结构

<html>
<head>
    <meta charset=UTF-8><!--设置字符集 用什么编码来解析-->
    <title>FIRST HTML</title> <!--设置标题-->
</head>
<body>
       <h1>王明臣是最帅的</h1>
       <h1>吕佳伟是最帅的</h1>
       <h1>杨小军是最帅的</h1>
       <h1>李高伟是最帅的</h1>

</body>
</html>

HTML的基本结构包括三大部分: <html>标签:是整个目录的根节点,包含了两个子节点。

<head>标签:文档的主要设置一些写代码时需要做的设置工作,比如字符集,标题。

<body>标签:文档的主体部分,在页面要呈现的内容都在这里。

<meta content="utf-8">//设置字符集 用什么编码来解析
<title>Title</title> //设置标题

3. HTML的基础标签

3.1标题标签

  常用的标题有<h1><h6> 从大变小;用于显示页面的标题,包含了标题的格式。语意信息等内容。

  <body>
       <h1>这里是标签1</h1>
       <h2>这里是标签2</h2>
       <h3>这里是标签3</h3>
       <h4>这里是标签4</h4>
       <h5>这里是标签5</h5>
       <h6>这里是标签6</h6>
</body>

 

 

3.2段落标签

   <p>段落标签:标示页面中的一个段落

  <body>
    
       <h3>静夜思</h3>
       <p>床前明月光</p>
       <p>疑似地上霜</p>
       <p>举头望明月</p>
       <p>低头思故乡</p>
</body>

3.3链接标签

  <a href =”#”>标签,作用就是页面跳转,包括页内跳转和页间跳转

  href属性:连接的目标地址:

  Target 属性: 控制页面跳转的方式,其取值有四个:

        _blank  页间跳转  在新的页面打开

        _self    页内跳转  在当前页面打开(默认的打开方式)

        _top  

_parent

<a href="https://www.baidu.com/" target="_self">跳转到百度</a>

2. 页面跳转

  要给“目的地”设置一个id,在<a>标签中的href属性里边使用“#...(id名)”实现页内头部和尾部的跳转。

  Id属性具有唯一性,是页面元素中的唯一标识,id名不能重复。

3.4 图片标签

  <img>图片标签:在网页中插入图片。

<img src="img/徐璐1.png" alt="">

<img src="网络图片地址" alt="">

图片可以从本地载入,也可以从网页中载入,本地载入时要找到图片的存储地址,在网页载

入时要找到图片的网络地址。

路径:

相对路径:

。。/上一级目录

/下一级目录

,:同级目录,这个“”可以省略。

 

3.5列表

  列表在word

 

有序列表

  <ol>标签定义一个有序列表

<li>标签定义一个列表项

type属性:它指定了列表符号的种类包括:

1、2、3、4、5........

a、b、c、d、f........

  其他的符号种类(自己去试一下)

Start属性:指定了列表开始的位置,也就是从第几个开始,而不是从几开始。

<ol type="a" start="2">
    <li>李高伟</li>
    <li>是男神</li>
    <li>不解释</li>
    <li>拒反驳</li>
    <li>帅炸裂</li>
</ol>

 

无序列表在html中:

  <ul>标签定义一个无序列表

<li>标签定义一个列表项

type属性指定了无序列表的符号,取值有:

  disc: 实心圆 (默认)

  circle:空心圆

  aquare:实心正方形

 

<body>
<ul type="disc">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>

结果:

 

自定义列表html中:

<dl>标签定义一个自定义列表

<dt>标签列表的标题

<dd>标签列表的描述

<dl>
    <h2>中国各省份</h2>
    <dt>河南</dt> <!--列表中的标题-->
    <dd>对河南的描述(此处省略一万字)</dd><!--列表中的项-->
    <dt>浙江</dt>
    <dd>对浙江的描述(此处省略一万字)</dd>
</dl>

 

 

4表单

  4.1表单

什么是表单,表单就是收集填写信息后提交到后台服务器。

<form>标签定义一个表单。

Get 和post 的不同

定义一个密码输入框:

<input type="password" name="password">

   Lable的作用,可以对其单独进行样式设置,同for属性可以和某一个Input标签进行关联。

<lable for="user">用户名: </lable>

单选框:checked 默认选

<input type="radio" name="role" value="1" checked>学生

多选框:

<input type="checkbox" value =”1”>

普通按钮:

<button></button>

文件选择框:

<input type="file">文件

下拉列表:

<select name="" id="">
    <option value="1">s</option>
    <option value="2">d</option>
    <option value="3">d</option>
    <option value="4">f</option>
</select>

多文本框:

<textarea name="" id="" cols="30" rows="10">fgasd

 

</textarea>

 

Css的书写方式

内联样式

<p style="color: #FF0000">一段文字</p>

 

内部样式

<style> <!-层叠--->
/*元素选择器*/
    html{background: wheat;}
    p{color: red;}
    /*类选择器*/
    .first{color: green;}
    /*id选择器 id命名是唯一的 */
    #sec{color: blue;}
</style>

 

权限优先级:id选择器>class选择器>元素选择器

外部样式(外链样式)

建立.css文件

<link rel="stylesheet" href="dfgs.css" type="text/css"> 

/* 路径 */

html{background: wheat;}
/*元素选择器*/
p{color: red;}
/*类选择器*/
.first{color: green;}
/*id选择器*/
#sec{color: blue;}

 

层叠优先级:内联>内部>外部

字体属性:

<style type="text/css">
    .text{font-size: 20px; /*字体大小*/
          font-style: italic;/*斜体*/
          flood-color:blue ; /*字体颜色*/
          font-weight: bold;/*字体样式*/
          font-family: 黑体;/*字的字体*/
    }
</style>

段落相关属性:

.text{
    /*行间距(行高),字符间距,首行缩进,对齐方式,文本修饰*/
    line-height: 40px;
    word-spacing:80px;
    text-indent: 50px;
    text-align: center;
    text-decoration: underline;
}

 

尺寸相关属性:

.d1{
    width: 100px; 
    min-height: 100px; //最小高度 auto  自适应
    max-height: 300px; //最大高度
    background-color: #FF0000;

}

盒子模型:

外边距:

内边距:

边框:

 

父子元素之间的留白,用父元素的padding,兄弟之间的留白用margin

块级元素的居中margin ,0 auto ;

 

Display

 

显示模式布局: display

代码中空格和回车会被当成字符显示在页面上,

基线对齐

对齐方式是在父元素中设置。

 

Float

Clear:both 消除浮动对兄弟元素的影响

Overflow:hidden 本意是超出部分隐藏,在这里,我们用作消除浮动时对父元素产生的影响。

 

 

相对定位:

position: relative;
left: 200px;
top: 100px;

相对于原来的位置进行定位

 

绝对定位:

相对于最近的一个拥有定位属性(除static以外)父类元素定位,父相子绝。脱离原有的文档流(原来的位置不见了)

 

固定定位:

相对于浏览器窗口固定 (原来的位置不见了)

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭