凯的个人博客

html基本标签

4/24/2024 html

# HTML5 CSS3

# 1.语义（语义化标签）

语义化标签： 见名知意 的标签

html4 提供的

div

p

span

h1---h6

a

button

ul ol li

tr table th thead td tbody

br

i 文字斜体

form input textArea select option

html5新增的

如果你正在写 移动端网页 标签更加推荐使用 h5提供的

header

nav

main aside selection

footer

# 2.标签身上新增的属性

<xxxx id="1" type="text"  style=""  class=""    src=""  href=""  placehloder=""   width=""   height=''    >   </xxxx>
1

# 1.aria-*

盲人辅助 ：盲人提示语

<标签  aria-xxx="xxxx"   >
1

# 2.data-* 【掌握】

自定义数据

<标签  data-xxx="数据"  >
1

获取自定义数据

dom.dataset.xxx
dom.dataset['xxx']
1
2
      <p  data-aa="100">菜单01</p>
        <p  data-aa="200">菜单03</p>
        <p  data-aa="333">菜单07</p>
    </div>

    <script>
        //获取dom
        let pDoms = document.querySelectorAll('p');
        for(let i=0;i<pDoms.length;i++){
            pDoms[i].addEventListener('click',function(){
                console.log(  pDoms[i].dataset.aa );
            })
        }
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 3.可编辑区域

可以在区域类输入 任何东西

所有的富文本编辑器的 原理 都是 contenteditable

    <style>
        div{
            width: 500px;
            height: 500px;
            border: 1px solid #f60;
        }
    </style>
</head>
<body>
    写法一： <div contenteditable="true">这是一个div标签，点击可以编辑</div>
	写法二： <div contenteditable>这是一个div标签，点击可以编辑</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12

# 3.新增 input type属性值

Color 颜色选择器

Date 日期选择框

Datetime 日期时间选择框 [x]

datetime-local 日期和时间 (无时区)选择框

month 月份选择器

time 时间选择框

week 周和年选择框

email 电子邮件 【只有在 form表单中 且存在 submit 按钮才会生效】

number 数值的输入域

range 区间选择器

search 搜索框

tel 电话号码【x】

url url地址 [x]

<input type="text"   />   
<input type="passwrod"   />  
<input type="raido"   />  
<input type="checkbox"   />  

<input type="email"   />  

<input type="color"   />    颜色选择器

<input type="number"   />    数字输入框 

<input type="tel"   />     手机号输入框 【w3c标准支持  但浏览器未做兼容】
1
2
3
4
5
6
7
8
9
10
11
12

# 案例1：颜色选择器 改整个页面的背景色

1.获取input dom

2.监听 input dom 的change事件

3.获取 input 的 选中的颜色值

4.获取整个页面的 dom节点.style.background="颜色值 "

   <style>
        html,
        body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
    </style>
</head>

<body>
    <input type="color" />

    <script>
        // 1.获取input dom 
        let inpDom = document.querySelector('input')
        let body = document.querySelector('body')

        // 2.监听 input dom 的change事件 
        inpDom.addEventListener('change', function () {
            // 3.获取 input 的 选中的颜色值 
            console.log(inpDom.value);
            // 4.获取整个页面的 dom节点.style.background="颜色值 "
            body.style.backgroundColor = inpDom.value;
        })
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

视频标签及其使用