HTML+CSS入门（一）_样式类用于bootstrap样式,可以写在html标签什么属性里-CSDN博客

本文链接：https://blog.csdn.net/Kang_xiong/article/details/52917207

一、什么是html

html是用来描述网页的超文本标记语言，不是编程语言（c、c++等）
html使用标记标签来描述网页
html标签是由尖括号和关键字组成，一般有开始标签和结束标签构成，中间就是在网页上显示的内容。
<div>这是一个div标签</div>

二、html文档

html文档是由html标签和文本组成的。我们写好的html文件，在浏览器打开之后，内容会在浏览器上显示，但是标签不会显示。因为浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器会对html文档进行解析。

HTML基本结构

第一行的`<!DOCTYPE html>` 是一个声明告诉浏览器以html5文档标准来解析此文档，并且会向下兼容。

1）head部分是关于文档的描述信息。`charset="UTF-8"` 这个是国际通用的编码格式，gb2312是中国的。很多时候网页出现乱码就是因为编码格式不正确。除此之外，在head部分也可以在“style”标签内部写样式。

2）body是网页的主体部分，网页的布局以及将要显示在网页的内容都写在这里

3）script部分，写相关的javascript语句，对dom进行操作实现动态效果。另外你也可以引入js库，比如jquery等，这可以极大提高我们的工作和学习效率

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个网页</title>
</head>
<body>
            <p>this is a paragraph</p>
</body>
</html>
<script></script>

三、html编辑器

写一个html文档有电脑上有记事本就可以了，把文档的后缀名改成’.html’就好了。但是这样做的效率会很低，这里推荐几款实用的编辑器

sublime text3

notepad++

webstorm

四、html元素

1. 写一个hello,world

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>第一个html</title>
</head>
<body>
            <p>Hello,world</p>
</body>
</html>

2. 常用标签

html标签分为行内元素和块级元素。

块级元素：浏览器显示时，通常会以新行来开始（和结束）。简单说独占一行。（div、p、form、ul、address、table、h1….）

行内元素：在显示时通常不会以新行开始（一行可以写多个）。（span、a、b、strong、small…）

3. 通过一个例子来认识标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>第一个html</title>
</head>
<body>
          <h1>这是一个div</h1>
          <div style="width:500px;height:600px;border:1px solid gray">
                  <h3>(1)格式化和引用标签</h3>
                  <p><b>孔子</b>说:"<i>见贤思齐焉，见不贤而内自省也。</i>"</p>
                   <hr>
                   <p><strong>李白</strong>说:"举头望明月，低头思故乡。"</p>
                   <hr>
                   <p><big>薛之谦</big><small>说:</small>"<blockquote>  该配合你演出的我演视而不见，在逼一个最爱你的而你即兴表演</blockquote>"</p>
                   <hr>
                   住址：<address>广东省深圳市南山区XX镇XX街道XXX号</address>
                   链接：众里寻她千<a href="http://www.baidu.com" >百度</a>，蓦然回首那人却在灯火阑珊处。
                   <h3>(2)删除效果和下划线效果</h3>
                   <p>都说十五的月亮，<del>石榴</del>十六圆</p>
                   <h3>(3)上标和下标</h3>
                   <p>
                           2<sup>3</sup>=8
                           <span>A<sub>1</sub>=x</span></p>
          </div>
</body>
</html>

效果图(没写什么样式，有点丑哈，凑合看看)：
这里写图片描述

h1、h2、h3、h4、h5为标题，他们的字体大小依次向下变小。

p 为段落，里面可以嵌套span标签

b、strong都可以达到加重字体的效果，small为小字体相反big为大字体，i为斜字体。

a为一个超链接，上图点击则会跳到百度页面。

sup为上标，sub为下标。del删除效果，ins下划线效果。

blockquote为长引用（会插入行和外边距）

五、几种样式的写法

我们在浏览网页是会看到很多绚丽多彩的网页，这些很多要归功于样式。样式即style,通俗地说就是给html穿上衣服，让他们看起更漂亮、美观一点。下面介绍几种样式的写法：

内联样式：写在标签的内部，样式写在style属性里。

  <div style="width:100px;height:100px;background:purple">Hello,World</div>

外部样式：外部保存样式文件，通过link标签来引入页面使用。
id是一个唯一的标识，通过box，可以找到页面中的这个div，并为它添加样式。

#box{
    width:100px;
    height: 100px;
    background:purple;
    font-size: 30px;
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
            <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="box">这是一个盒子</div>
</body>
</html>

内嵌样式：写在head内部，对当前文档的修饰。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
             <style type="text/css">
                    #box{
                            width:100px;
                            height: 100px;
                            background:purple;
                            font-size: 30px;
                            }
             </style>
<body>
    <div id="box">这是一个盒子</div>
</body>
</html>

六、HTML表格

表格元素：tr是行元素，td是表头，th是表格元素，caption是表明。

表格属性：cellpadding是单元格和边框的距离，cellspacing 是单元格之间的距离，colspan跨多列的单元格，rowspan跨多行的单元格，bgcolor设置背景颜色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Table</title>
<body>
    <table border="1px solid gray" cellpadding="10" cellspacing="3" > 
          <caption><h2>学生信息表</h2></caption>
              <tr >
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>爱好</th>
                <th colspan="2">电话</th>  
              </tr>
              <tr>
                <td >安东尼</td>
                <td>20</td>
                <td>男</td>
                <td>篮球</td>
                <td>18720988802</td>
              </tr>
              <tr>
                <td>杜兰特</td>
                <td>18</td>
                <td>男</td>
                <td>网游</td>
                <td>13269901273</td>
              </tr>
              <tr>
                <td>露丝卡</td>
                <td>21</td>
                <td>女</td>
                <td>蹦极</td>
                <td>0712-3301018</td>
              </tr>
      </table>
</html>

这里写图片描述

七、HTML列表

1. 有序列表

默认是从数字1开始的，ol的start属性设置开始的数字，type属性设置有序列表的类型，A为大写字母，a为小写字母，I为罗马字母列表，i为小写罗马字母。

<ol start='10'> <li>詹姆斯</li> <li>杜兰特</li> <li>库里</li> </ol>
这里写图片描述

2. 无序列表

type属性设置无序列表的项目符号类型，默认是disc，circ是空心圆，square正方形

<ul type="circle"> <li>詹姆斯</li> <li>杜兰特</li> <li>库里</li> </ul>
这里写图片描述

3. 定义列表

定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 dl 标签开始。每个自定义列表项以 dt开始。每个自定义列表项的定义以 dd 开始。

<dl> <dt>前端知识</dt> <dd>html,css</dd> <dd>bootstrap,jquery</dd> <dt>水果</dt> <dd>菠萝</dd> <dd>榴莲</dd> <dt>书籍</dt> <dd>偷影子的人</dd> <dd>匆匆那年</dd> </dl>
这里写图片描述

八、HTML表单

1. html表单元素

1）input元素

根据type类型的不同，有不同的形态。这里是文本类型，placeholder是对输入框内容的一个提示

<input type="text" name="username" placeholer="请输入你的用户名">

2）select元素

option是待选择的项，value值是实际传给后台的值

<select name="city">
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="guangzhou">广州</option>
            <option value="shenzhen">深圳</option>
    </select>

3）textarea元素

文本域可以输入多行，rows和cols定义所占的行列数。

<textarea name="message" rows="10" cols="30">
                这是一个叫做message的文本域
</textarea>
</body>

4）button元素

html事件很多时候是通过按钮来触发的，onclick是说当点击按钮的时候会触发谋个函数，这个函数是写在script里面的

<button name='btn1' onclick="sayHello()">问候</button>

2. 输入类型和属性

1）action是提交给后台的地址，label一般和文本框搭配使用，告诉我们文本框填的是什么，for属性对应文本框的id,当点击label文字是，光标会自动跳到输入域。

2)type=’password’，输入的密码将会看不见，以黑色实心点替代，maxlength是可输入的最大长度。

3)type=’radio’,单选框，必须把它们的name设为一样的，这样才能把它们当作一组。否则的话，两个都可以被选中。

4)type=’checkbox’复选框，可以同时选中多个

<form action="XXX">
               <p> <label for="username">用户名:</label>
                <input type="text" id="username" ></p>
                <p><label for="pws">密   码: </label> 
                    <input type="password" id="pwd" maxlength="6"></p>
               <p><input type="radio" name="sex" value="man">男
                <input type="radio" name="sex" value="woman">女 </p>
              <p><input type="checkbox" name='interests' value='basketball'>篮球
                        <input type="checkbox" name='interests' value='swimming'>游泳
                        <input type="checkbox" name='interests' value='climbing'>攀登</p>
                <input type="submit" value="提交">
       </form>