第三周:html基础

1:网页基本结构

<!DOCTYPE html>
<html>
     <head>
        <title></title>
     </head>
     <body>
     </body>
</html>

2:想要页面换行:
(1)使用<br/>

body>
        天气列表:<br/>
        一月:
     </body>
*注:<br/>没有开标签和闭标签,任何标签都可以用在标签背后加斜线的方式自己结束自己。*

(2)使用<p></p> 标签

<body>
    天气列表:
   <p> 一月:</p>
 </body>
注:使用`<p></p>` 标签两行文字会空一行,更适用于段落换行。

3:标题:<h1></h1>标签

<body>
    天气列表:
  <h1> 一月:</h1>
  <h1> 二月:</h1>
 在网页中加了<h1></h1>的字就会有不一样的字体。
 还有<h2></h2>、<h3></h3>等等。每个字体都不一样。

4:网页分格:<hr/>
出现和网页内容一样宽的水平分割线。

<body>
    天气列表:
  <h1> 一月:</h1>
  <hr/>
  <h1> 二月:</h1>
 </body>

5:添加注释:<!--文字-->
注:网页上不会出现
6:转义字符:
(1)在网页中插入多个空格:
插入:&nbsp;(一个空格插入一个&nbsp)
(2)在网页中输入<符号
插入:&lt;
(3) 在网页中输入&符号
插入:&amp;
7:插入图片:<img src="yiyue.jpg" alt="一月的图片">
src是图片的路径,alt是图片的替代性文字。
控制图片宽度和高度:

<img src="yiyue.jpg" alt="一月的图片" width="300px" height="200px">   

8:图片的超链接:
(1)新建一个页面,保存为html模式yiyue.html,创建html结构,再在<body></body>中间放好图片

<body>
  <img src="yiyue.jpg" alt="一月的图片">
 </body>

(2)在主页面中加上<a href="yiyue.html" >一月</a>

 <body>
    天气列表:
  <h1> <a href="yiyue.html">一月:</a></h1>
  <hr/>
  <h1> 二月:</h1>
 </body>
注:<a></a>即为设置超链接的标签;

href属性:需要链接的网页路径;
target属性:设置在什么地方打开页面,默认为target="_self",新建一个为target="_blank"
9:div与span:
<div></div>大多用来组织网页结构,在

中为独占一行。
<span></span>也可以用来组织网页结构,不会单独显示在一行

  网页一般结构:
   <body>
      <div id="header"></div>
      <div id="content"></div>
      <div id="footer"></div>
      <span>项目1</span>
      <span>项目2</span>
      <span>项目3</span>
     </body>

10:列表:
无序列表:<ul></ul>项目前有一个圆点。

<body>
    <ul>
        <li>迷糊</li>
        <li>蛋黄</li>
        <li>果汁</li>
    </ul>
</body>
注:type有三种取值
(1)`<ul type="disc"></ul>`    disc为默认取值。项目前有一个圆点。
(2)`<ul type="ciecle"></ul>`     ciecle 项目前有一个圆圈。
(3)`<ul type="square"></ul>`    square项目前有一个方形实心点。

有序列表:<ol></ol>默认项目前为数字123。

<body>
    <ol>
        <li>迷糊</li>
        <li>蛋黄</li>
        <li>果汁</li>
    </ol>
</body>
注:type有五种取值

(1)“1” (2)“a” (3)“A” (4)“i” (5)“I”
**11:表格:<table border="1"></table>**
<tr></tr>为一行,
<td></td>为一行里面的单元格

<body>
      <table border="1">
        <tr>
            <td>季节</td>
            <td>月份</td>
        </tr>
          <tr>
              <td>春天</td>
              <td>三月到五月</td>
          </tr>
          <tr>
            <td>夏天</td>
            <td>六月到八月</td>
          </tr>
          <tr>
            <td>秋天</td>
            <td>九月到十一月</td>
          </tr>
          <tr>
            <td>冬天</td>
            <td>十二月到二月</td>
          </tr>
      </table>
</body>

表格标题使用,和的用法是一样的,标题的文字自动加粗且水平居中对齐。
属性:
border=“1” 单元格边框的宽度
width=“500” 表格的宽度
height=“300” 表格的高度
cellspacing=“2” 单元格与单元格的距离
cellpadding=“2” 内容距边框的距离
bgcolor=“red” 背景颜色
bordercolor 设置边框颜色
colspan可以合并同行的单元格,后面指定合并的单元格数目。

align=“left|right|center” 内容的的位置,也可以用于表格,
如果直接给表格用align=“center”,表格居中,
如果给tr或者td使用,tr或者td内容居中。

内容垂直对齐方式:
valign设置内容的垂直对齐方式,默认是居中(middle),也可是顶部垂直(top)和底部垂直(bottom)。

<td valign="bottom">周巡</td>

12:表单<form></form>
作用:主要负责数据的采集功能。
表单的组成:提示信息:表单控件:表单域:

<form>
          <input type="text">                                        (文本框)
          <input type="password">                               (密码框)
          <input type="checkbox">婚否                         (选择框)
          <input type="radio" name="mast">男        前提:name同   
          <input type="radio" name="mast">女             (二选一)
          <input type="button" value="确定">                 (按钮)
          <textarea name="" id="" cols="30" rows="10"></textarea>(多行文本)
          <select name="" id="">
                <option value="1">婴儿</option>
                <option value="2">儿童</option>
                <option value="3">成人</option>
          </select>                                                (下拉选择框)
          <input type="submit" value="提交">                 (确定)
          <input type="reset" value="取消">                  (取消)
</form>

表单属性:
action:用来指定表单处理程序的位置,也就是将收集
到数据发送的位置(服务器端脚本处理程序)
name:定义表单的名字
method:定义表单将数据传送到服务器的方式,默认
是get,但是get安全性差,建议使用post,安
全性更高。
文本/密码输入框属性:
maxlength:指定输入的字符最大长度
readonly=“readonly”:将输入框设置为只读的状态
disable=“disable”:输入框设置为未激活状态
name=“username”:输入框的名称
value=“frank”:将输入框的内容传给处理的脚本,后面如果指定内容则为默认内容。
下拉列表属性:
multiple=“multiple”:将下拉列表设置为多选项
selected=“selected”:设置为默认的选中项
使用optgroup标签可以对下拉列表进行分组:label指定了组名,不能被选定:
e,g:

居住地:<select>
            <optgroup label="上海市">
                <option>长宁区</option>
                <option>静安区</option>
                <option>浦东新区</option>
                <option>奉贤区</option>
                <option>杨浦区</option>
                <option>普陀区</option>
                <option selected="selected">松江区</option>
            </optgroup>
            <optgroup label="安徽省">
                <option>合肥市</option>
                <option>芜湖市</option>
                <option>马鞍山市</option>
                <option>安庆市</option>
                <option>宿州市</option>
                <option>阜阳市</option>
            </optgroup>
        </select>

按钮:
普通按钮:不能实现信息的提交,必须要配合JS的使用。
提交按钮:可以实现信息的提交功能。
图片按钮:能够实现数据的提交。
重置按钮:重置输入的内容

13:css选择器:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>css选择器</title>
    <style>
        h1{                             (第一种标签选择器)
            color: blue;
        }                                         
        .x1{                             (第二种类选择器)
            color: chartreuse;
        }
        .x2{
            color: cornsilk;
        }
        #title{                          (第三种id选择器)
            color: darkmagenta;
            font-size: 12pt;(设置字体大小)
        }
</head>
<body>
  <span id="title">天气列表:</span>
  <h1> 一月:</h1>
  <h2>晴天</h2>
  <hr/>
  <h1> 二月:</h1>
  <h2>阴天</h2>
 </body>
</html>

13:css盒子模型:
由四层组成:由内而外分别为:
(1)元素的真实内容autoxauto
(2)内边距padding
(3)元素的边框border 复合属性(宽度,颜色,线的类型)
(4)外边距margin
solid实线,dotted虚线,
border-radius:圆角比平的半径
background-color: darkmagenta;设置背景颜色
注:背景颜色覆盖了内边距,不覆盖外边距。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>css盒子模型</title>
    <style>
        #show-padding{
            padding:10px;
            background-color: darkmagenta;(设置背景颜色)
        }
        #show-margin{
            margin:10px;
        }
        #show-border{
            border:1px black solid;
            border-radius: 5px;
        }
        #show-all{
            padding:10px;
            margin:10px;
            border:1px black solid;
        }
    </style>
</head>
<body>
    <span>天气列表:</span>
    <span id="show-padding">天气列表:</span>
    <span id="show-margin">天气列表:</span>
    <span id="show-border">天气列表:</span>
    <span id="show-all">天气列表:</span>

 </body>
</html>

改变padding的不同:

#show-padding{
         padding-left:10px;
         padding-right:5px;
         padding-top:7px;
         padding-bottom:4px;
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

安然907

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值