web前端2

最新推荐文章于 2024-09-21 11:29:05 发布

阳阳真的很菜

最新推荐文章于 2024-09-21 11:29:05 发布

阅读量95

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/qq_73971624/article/details/131584792

版权

DAY2

元素显示模式
- 块元素：独占一行 div 宽，高，内外边距可设置
- 行内元素：一行可以存在多个 span 宽，高，内外边距不可设置

表格标签

<table>
    <caption>表头</caption>
    <head>
        <tr>
			<th>**内容**</th>        
        </tr>
    </head>
    <tbody>
    	<tr>
        	<td>*内容*</td>
        </tr>
    </tbody>
    <tfoot>
    	<tr>
        	<td>内容</td>
        </tr>
    </tfoot>
</table>

标注

表头 rows data

table:border （只控制最外围大小）、width、height（tbody值是底线，只高不低）、cellspacing（单元格边框大小）

caption：通过css更改

thead、tr、tfoot、height/align(水平)/valign(垂直)

td 跨行 rowspan

跨列 colspan
- details：详情标签配合summary使用
```
<details>
        <summary>有志青年</summary>
        我们这里都是有志青年
    </details>
```
- taabindex：让本不能tab获取焦点的元素可获取，可以为负数、0、正数
```
 <input type="text">
    <a hred="#">百度</a>
    <div tabindex="0">你好</div>
```

表单的基本结构
- 表单：网页交互区，收集用户信息
  
  action:将数据交给谁处理
  
  name：必有属性
  
  method：提交方式 ajax

表单的基本元素

文本框

用户名：<input type="text" name="user" value="" maxlength="6" placeholder="请输入用户名：">

密码

密码：<input type="password" name="pwd">

单选框

<input type="radio" name="gender" value="nan">男
<input type="radio" name="gender" value="nv">女

多选框

<input type="checkbox" name="food" id="liulian"><label for="liulian">吃榴莲</label>
<label><input type="checkbox" name="food">吃臭豆腐</label>

两种label的插入方式

checked默认选中

<input type="checkbox" name="food" checked>吃肥肉

隐藏域

<input type="hidden" name="hid" value="隐藏的内容">

按钮

确认按钮
```
<button type="submit"></button>
```
重置按钮
```
<input type="reset">
```
普通按钮
```
<input type="button">
```

文本域

<textarea cols="20" rows="10" maxlength="200"</textarea>

下拉菜单

 <select name="jiguan" id="">
            <option value="南京">南京</option>
            <!-- selected下拉菜单的默认选中 -->
            <option value="成都" selected>成都</option>
            <option value="西安">西安</option>
</select>

HTML的全局属性

accesskey属性
accesskey属性规定激活元素的快捷键。accesskey=“accesskey”,使用ALT+accesskey(shinft+alt+accesskey)来访问带有指定快捷键的元素。
```
<a href="http://www.baidu.com" accesskey="h">百度</a><br>

<a herf="https://www.sogou.com" accesskey="c">搜狗</a>
```

id、class属性分别是为元素命名唯一id和类名，id身份证号，在一个页面中只能出现一次，class 一类可以出现多个

<div id="one"></div>
<div class="pink" style="font-size: 40px;">我是个盒子</div>
<div class="pink">我是个盒子</div>
<div class="pink">我是个盒子</div>
<div class="pink">我是个盒子</div>

tabindex属性

tabindex属性规定tab键控制次序(tab键用于导航时)，当按tab键时，元素聚焦的次序。**tabindex=“number”，“number”**代表聚焦的次序。

<a href="http://www.baidu.com" tabindex="2">百度</a><br>
 
<a href="https://www.sogou.com" tabindex="1">搜狗</a><br>
 
<a href="http://www.sina.com.cn" tabindex="3">新浪</a><br>

HTML5语义标签
- header—页面或页面中某一个区块，通常是一些引导和导航信息
- nav----可以作为页面导航的链接组
- section----页面中的一个内容区块，通常由内容及其标题组成
- aside----非正文的内容，与页面的主要内容分开的，被删除而不会影响到网页的内容
- article—代表一个独立的、完整的一个区块，可独立于页面其他内容使用
- footer----页面或页面中的某一个脚注
- main—h5的语义化标签，除了单词不一样，本质上就是一个div
CSS
三种引入方式
- 行内样式表（行内式）
- 内部样式表（嵌入式）
- 外部样式表（链接式）推荐
```
<link rel="stylesheet" href="./14-样式.css">
```

基本选择器

/*对h1和p标签进行选择*/
    <style>
        h1{
          background: wheat;
          border-radius: 21px;
        }
        p{
          font-size: 80px;
        }
    </style>

</head>

<body>

<h1>学习Java</h1>
<h1>学习学习</h1>
<p>努力努力</p>

</body>
</html>

包含选择器

<style>
        /* 子代选择器   选中亲生儿子*/
        .a>li {
            background-color: aliceblue;
        }
         /* 后代选择器 找到后代所有要找的元素*/
        .a li {
            color: blueviolet;
        }
    </style>

 <ul class="a">
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <ul>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </ul>

复合选择器

<style>
        /* div {
            color: pink;
        }
        p {
            color: pink;
        }
        span {
            color: pink;
        } */
        div,
        p,
        span {
            color: red;
        }
    </style>
    
     <div>AAA</div>
    <p>AAA</p>
    <span>AAA</span>
    <ul>
        <li>吃饱穿暖</li>
    </ul>

属性选择器

 <style>
        input {
            background-color: pink;
        }

        input[type="password"] {
            background-color: aquamarine;
        }

        div[id] {
            width: 300px;
            height: 300px;
            background-color: blue;
        }

        /* type^="te" 以te开头 */
        input[type^="te"] {
            background-color: red;
        }

        /* type$="l"  以l结尾*/
        input[type$="l"] {
            background-color: green;
        }

        /* type*="e"    type值里边包含e */
        input[type*="e"] {
            background-color: chartreuse;
        }
    </style>
    
    <input type="text"><br />
    <input type="password"><br />
    <input type="search"><br />
    <input type="url"><br />
    <input type="number"><br />
    <div id="aquamarine">1</div>
    <div>2</div>

字体的样式

 <style>
        div {
            cursor: pointer;
            /* 字体大小 */
            /* font-size: 40px; */
            /* 字体粗细 */
            /* font-weight: bold; */
            /* font-weight: 900; */
            /* 100-900 400===normal  800===bold  100-900越来越粗           font-weight: 400;*/
            /* 字体是否倾斜 */
            /* font-style: italic/normal; */
            /* font-family: "微软雅黑"; */
            /* italic 900可省略，字体大小，font-family必须存在 */
            font: italic 900 70px "微软雅黑"
        }
    </style>

首行

 <style>
        p {
            /* text-indent: 32px; */
            font-size: 20px;
            text-indent: 2em;
        }
    </style>

阳阳真的很菜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

web前端2

DAY2

标注

CSS