1) html+css
1) html+css
烤个鸡翅 发表于2年前
1) html+css
  • 发表于 2年前
  • 阅读 5
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

摘要: html+css

从 慕课网《HTML+CSS基础课程》 学习整理。

------------------------------------------正文---------------------------------------

Html和CSS的关系

1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。

2. CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

3. JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。

----------------------------------------------------------------------------------------------

认识html文件基本结构

<html>
    <head>...</head>
    <body>...</body>
</html>

<html></html>称为根标签,所有的网页标签都在<html></html>中。

<head> 标签用于定义文档的头部,它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签。

在<body>和</body>标签之间的内容是网页的主要内容,如<h1>、<p>、<a>、<img>等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。

----------------------------------------------------------------------------------------------------

认识head标签

<head>
    <title>...</title>
    <meta>
    <link>
    <style>...</style>
    <script>...</script>
</head>

<title>标签:在<title>和</title>标签之间的文字内容是网页的标题信息,它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么,

搜索引擎可以通过网页标题,迅速的判断出网页的主题。每个网页的内容都是不同的,每个网页都应该有一个独一无二的title。

用css样式,为表格加入边框

<style type="text/css">
    table tr td,th{border:1px solid #000;}
</style>

上述代码是为th,td单元格添加粗细为一个像素的黑色边框。用 css 样式代码。

---------------------------------------------------------------------------------------------

<body>标签,网页上显示的内容放在这里

<hx>标签,为你的网页添加标题

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

<p>标签,添加段落,有几段文字,就要把几段段落分别放到数个<p>标签中

<p>文章第一段</p>
<p>文章第二段</p>
<p>文章第三段</p>

<strong>和<em>,加强语气

<em>默认斜体</em>  
<strong>默认粗体</strong>

<span>标签,为文字设置单独样式。需要在<head></head>里定义

<style>
    span{
    color:blue;
    }
</style>

<q>标签,短文本引用

浏览器会自动显示双引号,但不是它的默认样式双引号(如果这样我们不如自己在键盘上输入双引号就行了)           它的语义:引用别人的话。

<blockquote>标签,长文本引用

引用文本比较长,就使用<blockquote>,文本的两边会缩进

&nbsp; ,Html中的空格

在HTML的代码中输入N个空格网页中只会显示一个

需要空格就必须 &nbsp; 

<br>标签,分行显示文本

相当于word文档中的回车

html 中, 回车和空格是会被忽略的

没有HTML内容的标签就是空标签,空标签只需要写一个开始标签

如 <br />、<hr />和<img />。

<hr>标签,添加水平横线

默认样式线条比较粗,颜色为灰色

学习了css样式表之后,可以对其修改

<address>标签,为网页加入地址信息

<address>联系地址信息</address>,默认斜体

想加入一行代码吗?使用<code>标签

在文章中一般如果要插入多行代码时不能使用<code>标签了。

<pre>标签,为你的网页加入大段代码

<pre> 标签的主要作用:预格式化的文本。展示计算机的源代码。

被包围在 pre 元素中的文本通常会保留空格和换行符。

需要在网页中预显示格式时也可以使用它

使用ul,添加新闻信息列表

        ul-li在网页中显示的默认样式一般为:每项li前都自带一个圆点列表使用ul-li标签来完成。

        ul-li是没有前后顺序的信息列表。

<ul>
    <li>信息</li>
    <li>信息</li>
    ......
</ul>

使用ol,添加图书销售排行榜

语法同ul-li

用于在网页中展示有前后顺序的信息列表

<div>标签,为网页划分独立的版块

在网页制作过程过中,可以把一些独立的逻辑部分划分出来,

        放在一个<div>标签中,这个<div>标签的作用就相当于一个容器。

        给div命名,使逻辑更加清晰

<div  id="版块名称">…</div>

        用id属性来为<div>提供唯一的名称

<table>标签,认识网页上的表格

table表格在没有添加css样式之前,在浏览器中显示是没有表格线的

创建表格的四个元素:table、tbody、tr、td、th

table:整个表格以<table>标记开始、</table>标记结束。

tbody:加上<tbody>标签后,就要等表格内容全部下载完才显示。

tr:表格的一行,所以有几对tr 表格就有几行。

td:表格的一个单元格,一行中包含几对<td>...</td>,说明一行中就有几列。

th:表格的头部的一个单元格,表格表头。 表头,也就是th标签中的文本默认为粗体并且居中显示

<body>
<table>
    <tbody>
        <tr>
          <th>班级</th>
          <th>学生数</th>
          <th>平均成绩</th>
        </tr>
        <tr>
          <td>一班</td>
          <td>30</td>
          <td>89</td>
        </tr>
        <tr>
          <td>二班</td>
          <td>35</td>
          <td>85</td>
        </tr>
    </tbody>
</table>
</body>

<caption>标签,为表格添加标题和摘要

表格需要添加一些标签进行优化,可以添加标题和摘要。

摘要:摘要的内容是不会在浏览器中显示出来的。

        它的作用是增加表格的可读性(语义化)

语法:<table summary="表格简介文本">

标题:用以描述表格内容,标题的显示位置:表格上方。

<table>
    <caption>标题文本</caption>
    <tr>
        <td>…</td>
        <td>…</td>
        …
    </tr>
    …
</table>

使用<a>标签,链接到另一个页面

<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>

title属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容。

<a href="目标网址" target="_blank">click here!</a>

加入target之后将在新建浏览器窗口中打开链接

使用mailto在网页中链接Email地址

如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,

后面的参数每一个都以“&”分隔。

完整实例:<a href="邮件收件人地址?cc=抄送人地址&bcc=密件抄送&subject=主题&body=邮件内容">发送</a>

<img>标签,为网页插入图片

<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

src:标识图像的位置。图像可以是GIF,PNG,JPEG格式的图像文件

使用表单<form>标签,与用户交互

表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。

<form   method="传送方式"   action="服务器文件"></form>

<form    method="post"   action="save.php">
    <label for="username">用户名:</label>
    <input type="text" name="username" />
    <label for="pass">密码:</label>
    <input type="password" name="pass" />
</form>

action :浏览者输入的数据被传送到的地方

method : 数据传送的方式(get/post)

        0.form表单中的label标签

<label for="控件id名称">

标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

1.文本输入框、密码输入框

<input type="text/password" name="名称" value="文本" />

type:当type="text"时,输入框为文本输入框;

        当type="password"时, 输入框为密码输入框。

name:为文本框命名,以备后台程序ASP 、PHP使用。

value:为文本输入框设置默认值。(一般起到提示作用)

2.文本域,支持多行文本输入

<textarea  rows="行数" cols="列数">文本</textarea>

3.使用单选框、复选框,让用户选择

单选框中的选项用户只能选择一项,

而复选框中用户可以任意选择多项,甚至全选

<input   type= " radio(单选)/checkbox(复选)"   

value=" 值 "name="名称"   checked="checked"/>

checked:当设置 checked="checked" 时,该选项被默认选中

value:提交数据到服务器的值(后台程序PHP使用)

name:为控件命名,以备后台程序 ASP、PHP 使用

同一组的单选按钮,name 取值一定要一致

4.使用下拉列表框,节省空间

<form action="save.php" method="post" >
    <label>爱好:</label>
    <select>
        <option value="看书">看书</option>
        <option value="旅游">旅游</option>
        <option value="运动">运动</option>
        <option value="购物">购物</option>
    </select>
</form>

若将<select>改写成<select multiple="multiple">,

则让“爱好”下拉列表框具有多选功能

5.提交,重置按钮

<input type="submit"   value="提交">

<input type="reset" value="重置">    value:按钮上显示的文字

-------------------------------------------------------------

HTML的代码注释:   <!--注释文字 -->


共有 人打赏支持
粉丝 0
博文 12
码字总数 7269
×
烤个鸡翅
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: