千峰JAVA逆战班Day42

最新推荐文章于 2020-04-08 21:53:21 发布

真的要穿格子衫吗

最新推荐文章于 2020-04-08 21:53:21 发布

阅读量287

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/hsee2006/article/details/105207469

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Day42

*HTML 部分：

I. 主要结构：

1) document type 文档类型，表示这是一个html文件

<!DOCTYPE html>

2）整个html文件的开始到结束，所有的内容都在这中间写

<html>
</html>

3）头部分，可以设置文件编码，标题等

<head>
</head>

4）身体部分，文件的主要内容

<body>
</body>

II. 标签：

1）meta标签：在头部分

<head>
    <!-- 描述了该文件的编码格式 -->
    <meta charset="utf-8" />
</head>

2）title标签：在头部分

<head>
		<meta charset="utf-8">
		<title>这是一个标题</title>
</head>

在这里插入图片描述
3）h1~6标签：标题标签，字由大到小，在body里面

<body>
		<h1>一级标题</h1>
		<h2>二级标题</h2>
		<h3>三级标题</h3>
		<h4>四级标题</h4>
		<h5>五级标题</h5>
		<h6>六级标题</h6>
</body>

在这里插入图片描述

4）p标签和br标签：表示段落和换行

<p>这是一个段落，<br>换行符</p>
<p>这是第二个段落</p>

在这里插入图片描述

5）a标签 href target ：超链接标签

<a href="https://www.baidu.com" target="_self">百度</a><br> <!-- 在自己的页面跳转到百度 -->
<a href="https://www.baidu.com" target="_blank">百度</a><!-- 新开一个页面跳转到百度 -->

6)img :图片标签 ./ 表示当前目录 …/表示上一层目录

<h1>百度的图片</h1>
<img src="../web前端/images/bd_logo1.png">

在这里插入图片描述

7）table：表格标签，下面只能放tbody thead tfoot tr td; 单元格的合并：行合并，列合并

			<!--width: 是整个表格占据的宽度。
			align: 意思是表格居中
			text-align: 表格中的文本居中对齐
			border: 只的是最外层的边框宽度
			<tr>下只能是<th>或者<td>
			<td>或者<th>下什么都可以放
			cellspacing: 指的是单元格的间隙。
			cellpadding: 指的是表格的内容到表格的边线的距离。-->
    <table width="50%" align="center" cellspacing="0" cellpadding="30" border="1" style="text-align: center">
        <thead>
            <tr>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
            </tr>
            <tr>
                <td>jack</td>
                <td>男</td>
                <td>15</td>
            </tr>
            <tr>
                <td>rose</td>
                <td rowspan="2">女</td>
                <td>23</td>
            </tr>
            <tr>
                <td>tom</td>
                <td>22</td>
            </tr>
            <tr>
                <td>steven</td>
                <td colspan="2">男45</td>
            </tr>
        </thead>
    </table>

在这里插入图片描述
8）无序和有序列表标签：ul ol，他们的下面都只能放 li 标签(一般都是用无序，有序用的少)

<body>
    <ul>
        <li><a href="http://www.baidu.com">百度</a></li>
        <li><a href="http://www.qq.com">qq</a></li>
    </ul>
    <ol>
        <li><a href="http://www.baidu.com">百度</a></li>
        <li><a href="http://www.qq.com">qq</a></li>
    </ol>
</body>

在这里插入图片描述

9）span 标签：可以给包裹的文字做一些处理

<body>
    <p style="color: aqua">
        这一大段文字，<span style="color: red">这一大段文字</span>，这一大段文字，这一大段文字，这一大段文字
    </p>
</body>

在这里插入图片描述

10）div标签：对网页做一个分块处理

<div></div>

11)form标签(重点)：表单； input 标签：接受用户的输入信息 select标签：下拉菜单选择

<!-- input type：text（文本） password（密码） radio（单选）checkbox（多选） 
file（文件）submit（提交） reset（重置）  select multiple（下拉菜单，多选）  -->   
<form action="" method="">
        <table align="center" style="text-align: center">
            <tr>
                <th colspan="2">这是一个表单</th>
            </tr>
            </tr>
            <tr>
                <td>用户名：</td>
                <td><input type="text" name="username"></td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input type="password" name="password"></td>
            </tr>
            <tr>
                <td>性别：</td>
                <!-- checked 默认选择 -->
                <td><input type="radio" checked name="sex">男
                    <input type="radio" name="sex">女
                </td>
            </tr>
            <tr>
                <td>头像：</td>
                <td><input type="file" name="head_image"></td>
            </tr>
            <tr>
                <td>爱好：</td>
                <td>
                    <input type="checkbox" name="interests">打篮球
                    <input type="checkbox" name="interests">打游戏
                    <input type="checkbox" name="interests">打台球
                </td>
            </tr>
            <tr>
                <td>学历：</td>
                <td>
                    <select name="graduation">
                        <option>初中</option>
                        <option>高中</option>
                        <option>大专</option>
                        <option>本科</option>
                        <option>本科以上</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>您感兴趣的领域：</td>
                <td>
                    <select multiple name="lingyu">
                        <option>体育</option>
                        <option>游戏</option>
                        <option>动漫</option>
                        <option>鬼畜</option>
                        <option>电影</option>
                        <option>电视剧</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>个人简介：</td>
                <!-- rows:行数  cols:列数 -->
                <td><textarea rows="10" cols="40" name="profile"></textarea> </td>
            </tr>
            <tr>
                <td><input type="submit" value="提交"></td>
                <td><input type="reset" value="重置"></td>
            </tr>
        </table>
    </form>

在这里插入图片描述
III. 块级元素和行级元素

块级元素：独占一行。常见块级元素有：h1~6 p table li div form

行内元素: 元素的宽度是根据内容来适配。a img i b u span input

IV. 文本级元素和非文本级元素

文本级元素下只能放文本标签。a img i b u span

非文本级元素下可以放任何东西。h1~6 table li div

特殊：p标签：p下面不能放块级元素，也不能放它本身

真的要穿格子衫吗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
千峰JAVA逆战班Day42

Day42*HTML 部分： I. 主要结构： 1) document type 文档类型，表示这是一个html文件<!DOCTYPE html> 2）整个html文件的开始到结束，所有的内容都在这中间写<html></html> 3）头部分，可以设置文件编码，标题等<head></head>...
复制链接

扫一扫