html基础-2

ody

常用标签

body分为块级和行内

块级独占整行
行内内容有多少就占多少

文本格式化标签

br 换行

<div>qwer<br/>zxcv</div>

div和span

div 块级标签样式

<div style="background-color: green;">qwer</div>

span 行内标签样式

span style="background-color: green;">zxcv</span>

p 段落

<p>hahahahah</p> 
<p>hahahahahaaa</p>

h 标题

h1~h6y依次变小

   <div>默认文字字体</div>
   <h1>再再再再再粗一点</h1>
   <h2>再再再再粗一点</h2>
   <h3>再再再粗一点</h3>
   <h4>再再粗一点</h4>
   <h5>再粗一点</h5>
   <h6>粗一点</h6>

链接

a 超链接，跳转到指定的地址

<a href="http://www.baidu.com" title="baidu">百度</a>

锚点，点击后跳转到指定位置

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>野鸡平台</title>
</head>
<body>
<h1>章节</h1>
<a href="#i1" title="第一章">第一章 寂寞的春天</a>
<a href="#i2" title="第二章">第二章 寂寞的夏天</a>
<a href="#i3" title="第三章">第三章 寂寞的秋天</a>
<a href="#i4" title="第四章">第四章 寂寞的冬天</a>
<h1>内容</h1>
<div style="height: 1000px;" id="i1">
   <h3>第一章 寂寞的春天</h3>
   <p>春暖花开,万物复苏,又到了交配的季节。</p>
</div>
<div style="height: 1000px;" id="i2">
   <h3>第二章 寂寞的夏天</h3>
   <p>夏天夏天悄悄过去留下小咪咪</p>
</div>
<div style="height: 1000px;" id="i3">
   <h3>第三章 寂寞的秋天</h3>
   <p>今年的秋天真是寂寞呀！！！</p>
</div>
<div style="height: 1000px;" id="i4">
   <h3>第四章 寂寞的冬天</h3>
   <p>下雪</p>
</div>
</body>
</html>

ul ol dl 列表展示

ul 无序列表
ol 有序列表
dl 层级列表
li 列表项目

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>野鸡平台</title>
</head>
<body>
    <ul>
        <li>周杰伦</li>
        <li>林俊杰</li>
        <li>王力宏</li>
    </ul>
    <ol>
        <li>铁锤</li>
        <li>钢弹</li>
        <li>狗蛋</li>
    </ol>
    <dl>
        <dt>河北省</dt>
        <dd>邯郸</dd>
        <dd>石家庄</dd>
        <dt>山西省</dt>
        <dd>太原</dd>
        <dd>平遥</dd>
    </dl>
</body>
</html>

table 表格

table表格标题
thead表格标题
tr 行标签
th 列名
tbody表格内容
tr 列标签
td 列内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6666</title>
</head>
<body>
    <table border="3">   <!--border 选择表格样式-->>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>爱好</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>xxxx</td>
                <td>18</td>
                <td>看书</td>
            </tr>
            <tr>
                <td rowspan="3">aaaa</td>  <!--rowspan 合并单元格-->>
                <td>18</td>
                <td>吃饭</td>
            </tr>
            <tr>
                <td>33</td>>
                <td>heiheihei</td>>
            </tr>>
        </tbody>
    </table>
</body>
</html>

img 图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6666</title>
</head>
<body>
    <!--显示本地图片，找不到图片则显示alt中的文字-->
    <img src="img/lover.png" alt="美女">
    <!--显示网络图片-->
    <img src="https://images.cnblogs.com/cnblogs_com/wupeiqi/662608/t_212313579359018.png" alt="妹子">
</body>
</html>

用户交互

按钮标签

type

buttom: 普通
submit: 提交
reset: 重置

 <button type="button"> 按钮 </button>

input

text，文本框。
password，密码框。
radio，单选框（必须设置name属性相同，否则无法实现）。
checkbox，复选框。
file，文件上传。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>666666</title>
</head>
<body>
    <h3>文本框</h3>
    <input type="text">
    <h3>密码框</h3>
    <input type="password">
    <h3>单选框</h3>
    <input type="radio" name="gender">男
    <input type="radio" name="gender">女
    <h3>复选框</h3>
    <input type="checkbox">篮球
    <input type="checkbox">足球
    <input type="checkbox">橄榄球
    <h3>上传文件</h3>
    <input type="file">
</body>
</html>

select下拉框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML学习</title>
</head>
<body>
    <h3>单选</h3>
    <select>
        <option>上海</option>
        <option>北京</option>
        <option>深圳</option>
    </select>
    <h3>多选</h3>
    <select multiple>
        <option>上海</option>
        <option>北京</option>
        <option>深圳</option>
    </select>
</body>
</html>

textarea多行文本框

<!DOCTYPE html>
卧槽，无情呀
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>HTML学习</title>
</head>
<body>
    <textarea>文本内容写在这里...</textarea>
</body>
</body>
</html>

form表单

用于提交数据到后台

提交时，只会提交form标签内部【用户交互】相关的标签。
<input type="submit" value="提交"> 用于提交当前所在的表单。
<input type="reset" value="重置"> 用于重置当前标签中的选项。
form标签内置属性action="/xx/" ，表示表单要提交的地址。method="get"，表示表单的提交方式。enctype="multipart/form-data"，如果form内部有文件上传，必须加上此设置
form内部【用户交互】相关标签必须设置name，不然提交数据后后端无法获取

// 提交表单之后，实际上会将表单中的数据构造成一种特殊的结构，发送给后台，类似于：
{
    user:用户输入的姓名,
  pwd:用户输入的密码,
    ...
}

radio、checkbox、select 除了要设置name属性以外，还必须设置value属性，因为这三中标签在form表单提交时，不会把看到的内容提交到后台，而是把选择选项对应的value值提交到后台。

家今天好我是小月,为大家介绍一下建站的基础语音,喜欢的建站的朋友要认真阅读,这会对你有一定的帮助!!

DW使用；

搭建一个站点；

首页文件名称：index.html

文件夹 style js

w3c 是一个组织，制定网页规范标准的组织；

声明网页的编码格式；

常用的编码格式；utf-8 国际通用标准，支持英文，中文，韩文，越南语

日语等等。。。；

gbk(gb2312)它是国标，支持中文简体繁体；跟后台有关；

字体：编辑，首选参数字体

列表 type修改列表符号；

布局，搭建一个网页结构；根据用户体验需求对内容进行合理规划；根据网络营销需求；

怎么布局；

表格布局

表格的最外层标记，<table> </table>

表格里面的行用<tr></tr>表示；一对tr表示一行；

一个单元格用<td></td>来表示；

表格里面有一个属性边框 border 默认情况下，这个border="0"

ctrl alt a

单元格与单元格的缝 cellspacing 默认情况不为0

跨行 rowspan 跨行，就是指一个单元格在垂直方向占领多行；

跨列 colspan 在水平方向占领多个单元格；

背景颜色 bgcolor

布局 table布局；现在不是主流，但是在网页中还是会用到；现在主要用

div+css来进行网页布局；

为什么要用div+css呢？

简单一些；

2 代码相对table而言，div+css涉及到的代码行数更少；

2 div+css网页布局有利于seo；做搜索引擎喜欢网站；

2 div+css方便后期管理维护（css讲完之后再来理解；）

2 有利于浏览器的向后兼容；新的浏览器不能识别传统的一些布局标签，但是div+css

所涉及的标签浏览器能够很好的识别；

ie 5 6 7 8 9 10 11 12

CSS是什么？

有什么用？

CSS全称是层叠样式表 Cascading Style Sheets 也叫样式，style

修饰，美化网页的；

table 表格，结构

如何在网页中实现CSS；CSS表现形式；

三种常见的表现形式（实现方式）；

每一种行内式，

直接在html开始标签里面写上style="属性：属性值；属性：属性值；"

第二种写法：内部嵌入式（嵌入式）

在<head></head>内部嵌入

<style>

css代码

html标签{属性：属性值；}

</style>

第三种表现形式；外部链接式（外链式）

把css样式单独放在一个style样式文件夹里面，然后在html页面中来调用这个css文件；

以后大家都使用第三种表现式，外部链接式；

为什么要用第三种表现形式；

第一,w3c组织推荐使用第三种外链式；

第二，外部链接式实现了表现（html）与样式（css）相分离（有利于简化页面结构），

有利于后期维护修改等（选择器）；

第三，有利于搜索引擎优化（seo）

选择器

是什么？

有什么用？

p{color:red;} 它表示把所有的p标签里面的内容都变成红色；

作用：指定样式控制修饰的对象；

常用的基础选择器；

标签选择器；直接把html标签拿到css里面当选择器使用的称之为标签选择器；

类选择器；

给元素取名；

在开始标签里面写上 class="类名" ，注意，类名不要以数字开头；一般用英文小写开头；

在css里面写上 .类名{属性：属性值；属性：属性值；}

background:#09F; 背景颜色这是在css里面的写法；

bgcolor 这是在html标签里面的写法；

text-align:center; 文字居中；

以上是今天的建站的内容，喜欢的小伙伴关注一下我每天都会更新这方面的知识！谢谢大家！

lt;thead>标签定义HTML中<table>元素的标题；

<thead>标签与<tbody>和<tfoot>标签一起使用，它们定义HTML表格中的表头，表主体和表脚。

<thead>标签作为<table>标签的子元素，需出现在<caption>、<colgroup>元素之后；<tbody>，<tr>或<tfoot>元素之前。

<thead>标记内应至少包含一行<tr>元素。

提示：<thead>、<tbody>和<tfoot>元素默认不会影响表格的布局。不过可以使用CSS来为这些元素定义样式，从而改变表格的外观。

语法格式

<thead>

<thead>

示例代码

<table border="1">
    <caption>图书大厦书目价格单</caption>  
    <thead>  
        <tr>  
            <th>书名</th>  
            <th>单价</th>  
        </tr>  
    </thead>  
    <tr>  
        <td>HTML入门教程</td>  
        <td>79.00元</td>  
    </tr>  
    <tr>  
        <td>JavaScript基础教程</td>  
        <td>46.00元</td>  
    </tr>  
    <tr>  
        <td>Python精品教程</td>  
        <td>99.00元</td>  
    </tr>  
</table>  123456789101112131415161718192021复制代码类型：[html]

效果展示：

图书大厦书目价格单
书名	单价
HTML入门教程	79.00元
JavaScript基础教程	46.00元
Python精品教程	99.00元

HTML4.01与HTML5差异

在HTML5中，不再支持HTML4.01中<thead>标签的任何属性。

浏览器支持

所有主流浏览器都支持<thead>标签。

标签属性

属性	值	描述
align	right left center justify char	HTML5 不支持。定义 <thead> 元素中内容的对齐方式。
char	character	HTML5 不支持。规定 <thead> 元素中内容根据哪个字符来对进行文本对齐。
charoff	number	HTML5 不支持。规定 <thead> 元素中内容的第一个对齐字符的偏移量。
valign	top middle bottom baseline	HTML5 不支持。规定 <thead> 元素中内容的垂直对齐方式。

全局属性

<thead>标签支持HTML的全局属性。

事件属性

<thead>标签支持HTML的事件属性。

开课吧广场-人才学习交流平台

在线咨询

上一篇：JavaScript基础09-数据类型
下一篇：新手课堂：关于css权重计算的趣事

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商