HTML

一般开头

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>这是一个HTML5的网页</title>
 7 </head>
 8 
 9 <body>
10     <p>Hello HTML5</p>
11 </body>
12 
13 </html>

 CSS外部样式表

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

 

script外部

<script src="myScript.js"></script>

 

CSS选择器

 CSS Float

https://www.runoob.com/try/try.php?filename=trycss_float_elements

 

CSS模型

 

margin

{margin : 10px 0px 15px 5px;}

（定义四个方向的外边距，从top开始顺时针旋转）

 

注释

html注释：

<!--  xxx -->

 

a标签跳转到页面的某个位置

 

表单必填

  <form action="https://freecatphotoapp.com/submit-cat-photo">
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>

 

单选框

  <input type="radio" name="fuck"> indoor
  <input type="radio" name="fuck"> outdoor

name应相同，才可将两个单选绑定在一起。

indoor outdoor

 

 

没name或name不相同时：

indoor outdoor

  <input type="radio"> indoor
  <input type="radio"> outdoor

 

 

 

当添加了label之后，点击文字也可以选中单选框。

  <label>
      <input type="radio" name="indoor-outdoor"> indoor
  </label>
  <label>
      <input type="radio" name="indoor-outdoor"> outdoor
  </label>

 复选框

checkbox

<label><input type="checkbox" name="personality"> a   </label>

 

注意

所有表单都应该套在<form></form>里

 

CSS选择器

.xxxx 选择class="xxxx"的元素

#xxxx 选择id="xxxx"的元素

xxxx 选择<xxxx></xxxx>

id只能用在一个标签里。

还可以

[type='radio'] {
  margin: 20px 0px 20px 0px;
}

 （[attr=value]）

 

一个标签多个类

用空格隔开

class="aaaa bbbb"

 

CSS重载

当一个<xxx>里绑定两个class，在<style></style>里class靠后的重载class靠前的，与<xxx>里class的顺序无关。

当一个<xxx>里同时绑定了id和class，id永远重载class。

子标签永远重载父标签，即<aaa>   <bbb></bbb>  </aaa> 里，bbb的style重载aaa的style。

 

1.外部样式表

2.内部样式表（位于 <head> 标签内部）

3.内联样式（在 HTML 元素内部）

此三者中，后面的重载前面的。

 

!important

 .pink-text {
 color: pink !important;
}

让pink-text永远重载别人。

 

CSS变量

--xxxx: red;

定义变量，变量名xxxx，值为red。

在外层div定义的变量可作用于内层。

应用变量：

background: var(--xxxx);

 

Fallback value：

background: var(--xxxx, green);

 当xxxx变量不可用时，显示为绿色。

 

text-align

justify：更改空格长短，最左、最右字母都与对齐边框。

无justify：

有justify：

center：居中

left

right

 

加粗

<strong> </strong>

 

下划线

<u> </u>

 

斜体

<em></em>

 

删除线

<s></s>

 

分割线

<hr>

posted @ 2020-08-13 14:47  __ZRH  阅读(184)  评论(0)    收藏  举报